open-index/open-npm huggingface dataset:
npm package: @lynx-js/cache-events-webpack-plugin
Description: Cache Lynx native events until the BTS chunk is fully loaded, and replay them when the BTS chunk is ready.
Author: Yiming Li
Latest version: 0.0.3

<h2 align="center">@lynx-js/cache-events-webpack-plugin</h2>

A webpack plugin that cache Lynx native events until the BTS chunk is fully loaded, and replay them when the BTS chunk is ready.
npm package: @lynx-js/cache-events-webpack-plugin-canary
Description: Cache Lynx native events until the BTS chunk is fully loaded, and replay them when the BTS chunk is ready.
Author: Yiming Li
Latest version: 0.0.3

<h2 align="center">@lynx-js/cache-events-webpack-plugin</h2>

A webpack plugin that cache Lynx native events until the BTS chunk is fully loaded, and replay them when the BTS chunk is ready.
npm package: @lynx-js/config-rsbuild-plugin
Description: An rsbuild plugin for config Lynx Config defined by @lynx-js/type-config.
Author: Yiming Li
Latest version: 0.0.2

<p align="center">
  <a href="https://lynxjs.org/rspeedy" target="blank"><img src="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/rspeedy-banner.png" alt="Rspeedy Logo" /></a>
</p>

<p>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@lynx-js/config-rsbuild-plugin">
    <img alt="" src="https://img.shields.io/npm/v/@lynx-js/config-rsbuild-plugin?logo=npm">
  </a>
  <a aria-label="License" href="https://www.npmjs.com/package/@lynx-js/config-rsbuild-plugin">
    <img src="https://img.shields.io/badge/License-Apache--2.0-blue" alt="license" />
  </a>
</p>

## Getting Started

```bash
npm install -D @lynx-js/config-rsbuild-plugin
```

## Usage

```ts
// lynx.config.ts
import { pluginLynxConfig } from '@lynx-js/config-rsbuild-plugin'
import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  plugins: [
    pluginLynxConfig({
      enableCheckExposureOptimize: false,
    }),
  ],
})
```

## Contributing

Contributions to Rspeedy are welcome and highly appreciated. However, before you jump right into it, we would like you to review our [Contribution Guidelines](/CONTRIBUTING.md) to make sure you have a smooth experience contributing to this project.

## License

Rspeedy is Apache-2.0 licensed.
npm package: @lynx-js/config-rsbuild-plugin-canary
Description: An rsbuild plugin for config Lynx Config defined by @lynx-js/type-config.
Author: Yiming Li
Latest version: 0.0.2

<p align="center">
  <a href="https://lynxjs.org/rspeedy" target="blank"><img src="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/rspeedy-banner.png" alt="Rspeedy Logo" /></a>
</p>

<p>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@lynx-js/config-rsbuild-plugin">
    <img alt="" src="https://img.shields.io/npm/v/@lynx-js/config-rsbuild-plugin?logo=npm">
  </a>
  <a aria-label="License" href="https://www.npmjs.com/package/@lynx-js/config-rsbuild-plugin">
    <img src="https://img.shields.io/badge/License-Apache--2.0-blue" alt="license" />
  </a>
</p>

## Getting Started

```bash
npm install -D @lynx-js/config-rsbuild-plugin
```

## Usage

```ts
// lynx.config.ts
import { pluginLynxConfig } from '@lynx-js/config-rsbuild-plugin'
import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  plugins: [
    pluginLynxConfig({
      enableCheckExposureOptimize: false,
    }),
  ],
})
```

## Contributing

Contributions to Rspeedy are welcome and highly appreciated. However, before you jump right into it, we would like you to review our [Contribution Guidelines](/CONTRIBUTING.md) to make sure you have a smooth experience contributing to this project.

## License

Rspeedy is Apache-2.0 licensed.
npm package: @lynx-js/css-extract-webpack-plugin
Description: This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.
Author: Qingyu Wang
Latest version: 0.7.0

<h2 align="center">@lynx-js/css-extract-webpack-plugin</h2>

This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.
npm package: @lynx-js/css-extract-webpack-plugin-canary
Description: This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.
Author: Qingyu Wang
Latest version: 0.7.0

<h2 align="center">@lynx-js/css-extract-webpack-plugin</h2>

This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.
npm package: @lynx-js/externals-loading-webpack-plugin
Description: A webpack plugin to load lynx external bundles.
Author: Hengchang Lu
Latest version: 0.1.0

<h2 align="center">@lynx-js/externals-loading-webpack-plugin</h2>

A webpack plugin to support loading externals in Lynx.

## When to use this package

Most applications should use
`@lynx-js/external-bundle-rsbuild-plugin`, which expands presets and handles
development serving and build-time asset emission.

Use `@lynx-js/externals-loading-webpack-plugin` directly only when you need the
low-level webpack/Rspack runtime integration.

## Usage

```ts
import { ExternalsLoadingPlugin } from '@lynx-js/externals-loading-webpack-plugin';

export default {
  plugins: [
    new ExternalsLoadingPlugin({
      backgroundLayer: 'BACKGROUND_LAYER',
      mainThreadLayer: 'MAIN_THREAD_LAYER',
      externals: {
        './App.js': {
          libraryName: './App.js',
          bundlePath: 'comp-lib.lynx.bundle',
          background: { sectionPath: './App.js' },
          mainThread: { sectionPath: './App.js__main-thread' },
          async: true,
        },
        '@lynx-js/react': {
          libraryName: ['ReactLynx', 'React'],
          bundlePath: 'react.lynx.bundle',
          background: { sectionPath: 'ReactLynx' },
          mainThread: { sectionPath: 'ReactLynx__main-thread' },
          async: false,
        },
      },
    }),
  ],
};
```

### `bundlePath` vs `url`

- `bundlePath` is preferred for bundles that should resolve from the runtime
  public path.
- `url` is only needed when the external bundle is hosted outside the current
  build output.
npm package: @lynx-js/externals-loading-webpack-plugin-canary
Description: A webpack plugin to load lynx external bundles.
Author: Hengchang Lu
Latest version: 0.1.0

<h2 align="center">@lynx-js/externals-loading-webpack-plugin</h2>

A webpack plugin to support loading externals in Lynx.

## When to use this package

Most applications should use
`@lynx-js/external-bundle-rsbuild-plugin`, which expands presets and handles
development serving and build-time asset emission.

Use `@lynx-js/externals-loading-webpack-plugin` directly only when you need the
low-level webpack/Rspack runtime integration.

## Usage

```ts
import { ExternalsLoadingPlugin } from '@lynx-js/externals-loading-webpack-plugin';

export default {
  plugins: [
    new ExternalsLoadingPlugin({
      backgroundLayer: 'BACKGROUND_LAYER',
      mainThreadLayer: 'MAIN_THREAD_LAYER',
      externals: {
        './App.js': {
          libraryName: './App.js',
          bundlePath: 'comp-lib.lynx.bundle',
          background: { sectionPath: './App.js' },
          mainThread: { sectionPath: './App.js__main-thread' },
          async: true,
        },
        '@lynx-js/react': {
          libraryName: ['ReactLynx', 'React'],
          bundlePath: 'react.lynx.bundle',
          background: { sectionPath: 'ReactLynx' },
          mainThread: { sectionPath: 'ReactLynx__main-thread' },
          async: false,
        },
      },
    }),
  ],
};
```

### `bundlePath` vs `url`

- `bundlePath` is preferred for bundles that should resolve from the runtime
  public path.
- `url` is only needed when the external bundle is hosted outside the current
  build output.
npm package: @lynx-js/gesture-runtime
Description: Lynx Gesture
Latest version: 2.1.3

# Lynx Gesture Runtime

`@lynx-js/gesture-runtime` provides typed gesture primitives and simple composition utilities for Lynx.

## Install

- `pnpm add @lynx-js/gesture-runtime @lynx-js/react`

## Usage

```tsx
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';

export default function Example() {
  const pan = useGesture(PanGesture).onUpdate((event, stateManager) => {
    'main thread';
    stateManager.active();
  });
  return <view main-thread:gesture={pan}></view>;
}
```
npm package: @lynx-js/gesture-runtime-canary
Description: Lynx Gesture
Latest version: 2.1.3

# Lynx Gesture Runtime

`@lynx-js/gesture-runtime` provides typed gesture primitives and simple composition utilities for Lynx.

## Install

- `pnpm add @lynx-js/gesture-runtime @lynx-js/react`

## Usage

```tsx
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';

export default function Example() {
  const pan = useGesture(PanGesture).onUpdate((event, stateManager) => {
    'main thread';
    stateManager.active();
  });
  return <view main-thread:gesture={pan}></view>;
}
```
npm package: @lynx-js/luna-core
Description: Core constants, types, and utilities for the L.U.N.A project
Author: The Lynx Authors
Latest version: 0.1.0

# luna-core

The foundational types package for the LUNA theming system. It provides theme types, color ID/key constants and conversion utilities, and theme resolution (resolver) APIs.

This package does not ship any concrete color values. Color values live in `@lynx-js/luna-tokens` as the single source of truth.

## Installation

```bash
pnpm add @lynx-js/luna-core
```

## What’s Inside

- Theme keys: `LunaThemeKey` / `LunaThemeVariant` / `LunaThemeMode`, plus extensible custom space via `LunaCustomThemeKey`
- Theme token types: `LunaThemeTokens` / `LunaCustomThemeTokens` / `LunaCustomThemeMeta`
- Color system: `LunaColorId` (kebab-case), `LunaColorKey` (camelCase), `LUNA_COLOR_IDS` / `LUNA_COLOR_KEYS`, and `colorIdToColorKey` / `colorKeyToColorId`
- Theme resolver: `resolveThemeKeyFromList` / `resolveThemeObjectFromList` / `inferThemeMode`

## Usage

### Pair With Tokens (Get Concrete Color Values)

```ts
import type { LunaThemeTokens } from '@lynx-js/luna-core'
import { lunarisDarkTokens } from '@lynx-js/luna-tokens'

const theme: LunaThemeTokens = lunarisDarkTokens

const primary = theme.colors['primary']
const contentMuted = theme.colors['content-muted']
```

### ColorId / ColorKey

`LunaColorId` is the color id used in tokens (kebab-case), e.g. `primary-content`. `LunaColorKey` is the camelCase variant intended for runtime components/hooks, e.g. `primaryContent`.

```ts
import {
  LUNA_COLOR_IDS,
  LUNA_COLOR_KEYS,
  colorIdToColorKey,
  colorKeyToColorId,
  createEmptyLunaColors,
} from '@lynx-js/luna-core'

const firstId = LUNA_COLOR_IDS[0]
const key = colorIdToColorKey('primary-content')
const id = colorKeyToColorId('primaryContent')

const emptyColors = createEmptyLunaColors()
emptyColors.primary = '#ff8ab5'
```

### Theme Resolver (Pick the Best Match From an Allowlist)

```ts
import { resolveThemeKeyFromList } from '@lynx-js/luna-core'

const allowed = ['luna-light', 'lunaris-dark'] as const

const resolved1 = resolveThemeKeyFromList(allowed, 'lunaris-light')
const resolved2 = resolveThemeKeyFromList(allowed, 'luna-dark')
```

## LUNA Packages

- `@lynx-js/luna-tokens` — source of truth for token values
- `@lynx-js/luna-core` — token and theme type definitions (this package)
- `@lynx-js/luna-styles` — CSS variables output
- `@lynx-js/luna-tailwind` — Tailwind utilities output
- `@lynx-js/luna-reactlynx` — ReactLynx runtime integration
npm package: @lynx-js/luna-styles
Description: CSS theme variables for the L.U.N.A project
Author: The Lynx Authors
Latest version: 0.1.0

# luna-styles

CSS Custom Properties for the LUNA theming system.

`@lynx-js/luna-styles` converts the theme token values from `@lynx-js/luna-tokens` into CSS variables, scoped under theme class names (e.g. `.lunaris-dark`, `.luna-light`).

## Installation

```bash
pnpm add @lynx-js/luna-styles
```

## How It Works

- Each theme is emitted as a CSS file that defines variables inside a theme selector:

  ```css
  .lunaris-dark {
    --canvas: #0d0d0d;
    --content: #f8f8f8;
  }
  ```
- Variables are only available within the DOM subtree that has the theme class applied
- `index.css` imports all built-in themes, so you can switch themes by toggling the class name

## Usage

Import all themes (recommended for theme switching):

```css
@import "@lynx-js/luna-styles/index.css";
```

Or import a single theme only:

```css
@import "@lynx-js/luna-styles/lunaris-dark.css";
```

Use the variables in your styles:

```css
.canvas {
  color: var(--content);
  background-color: var(--canvas);
}

.luna-gradient-rose {
  background: linear-gradient(
    0deg,
    var(--gradient-a),
    var(--gradient-b)
  );
}
```

Apply a theme class to scope the variables:

```tsx
function App() {
  return (
    <view className='canvas lunaris-dark luna-gradient-rose'>
      {/* Your Demo */}
    </view>
  )
}
```

## LUNA Packages

- `@lynx-js/luna-tokens` — source of truth for token values
- `@lynx-js/luna-core` — token and theme type definitions
- `@lynx-js/luna-styles` — CSS variables output (this package)
- `@lynx-js/luna-tailwind` — Tailwind utilities output
- `@lynx-js/luna-reactlynx` — ReactLynx runtime integration
npm package: @lynx-js/luna-tailwind
Description: TailwindCSS preset for the L.U.N.A project
Author: The Lynx Authors
Latest version: 0.1.0

# luna-tailwind

TailwindCSS preset for the LUNA theming system.

`@lynx-js/luna-tailwind` maps LUNA color tokens to Tailwind color utilities using CSS variables. It is designed to be used together with `@lynx-js/luna-styles`, which provides the actual `--*` variables under theme class names (e.g. `.lunaris-dark`, `.luna-light`).

## Installation

```bash
pnpm add -D @lynx-js/luna-tailwind @lynx-js/tailwind-preset tailwindcss@v3
pnpm add @lynx-js/luna-styles
```

## How It Works

- `theme.colors` is extended so utilities like `bg-primary` resolve to `var(--primary)`
- Tokens are registered as nested Tailwind color keys and expand into hyphenated utilities — `text-primary-content` resolves to `var(--primary-content)`
- Variables are scoped by the theme class you apply in your DOM tree, so switching themes is just toggling the theme class name

## Setup

Add the preset to your `tailwind.config.ts`:

```ts
import LynxPreset from '@lynx-js/tailwind-preset'
import type { Config } from 'tailwindcss'

import { LunaPreset } from '@lynx-js/luna-tailwind'

const config: Config = {
  content: [],
  presets: [LynxPreset, LunaPreset],
}

export default config
```

Import LUNA theme variables once (global stylesheet):

```css
@import "@lynx-js/luna-styles/index.css";

@tailwind base;
@tailwind components;
@tailwind utilities;
```

## Usage

```tsx
import { Button } from '@lynx-js/lynx-ui'

function App() {
  return (
    <view className='lunaris-dark'>
      <Button className='bg-primary'>
        <text className='text-primary-content'>Button</text>
      </Button>
    </view>
  )
}
```

## Built-in Gradients

This preset also ships gradient classes that use the LUNA gradient tokens:

- `luna-gradient`
- `luna-gradient-rose`
- `luna-gradient-berry`
- `luna-gradient-ocean`

## LUNA Packages

- `@lynx-js/luna-tokens` — source of truth for token values
- `@lynx-js/luna-core` — token and theme type definitions
- `@lynx-js/luna-styles` — CSS variables output
- `@lynx-js/luna-tailwind` — Tailwind utilities output (this package)
- `@lynx-js/luna-reactlynx` — ReactLynx runtime integration
npm package: @lynx-js/lynx-bundle-rslib-config
Description: The rsbuild config for building Lynx bundle
Author: Hengchang Lu
Latest version: 0.3.1

<h2 align="center">@lynx-js/lynx-bundle-rslib-config</h2>

The package `@lynx-js/lynx-bundle-rslib-config` provides the configurations for bundling Lynx bundle with [Rslib](https://rslib.rs/).

## Usage

Use `defineExternalBundleRslibConfig` when you want to build a Lynx external
bundle that will later be loaded by `pluginExternalBundle`.

### Minimal example

```ts
import { defineExternalBundleRslibConfig } from '@lynx-js/lynx-bundle-rslib-config'
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'

export default defineExternalBundleRslibConfig({
  id: 'comp-lib',
  source: {
    entry: {
      './App.js': './external-bundle/CompLib.tsx',
    },
  },
  plugins: [
    pluginReactLynx(),
  ],
  output: {
    externalsPresets: {
      reactlynx: true,
    },
    globalObject: 'globalThis',
  },
})
```

This produces an external bundle whose React-related requests are mapped to the
built-in `reactlynx` preset instead of a hand-written externals table.

### Custom presets

If your business bundle needs extra preset mappings, define them next to
`externalsPresets`:

```ts
export default defineExternalBundleRslibConfig({
  output: {
    externalsPresets: {
      reactlynx: true,
      lynxUi: true,
    },
    externalsPresetDefinitions: {
      lynxUi: {
        externals: {
          '@lynx-js/lynx-ui': ['LynxUI', 'UI'],
        },
      },
    },
  },
})
```

If you need to extend a built-in preset instead of defining a brand new one,
use `extends`:

```ts
export default defineExternalBundleRslibConfig({
  output: {
    externalsPresets: {
      reactlynxPlus: true,
    },
    externalsPresetDefinitions: {
      reactlynxPlus: {
        extends: 'reactlynx',
        externals: {
          '@lynx-js/lynx-ui': ['LynxUI', 'UI'],
        },
      },
    },
  },
})
```

Explicit `output.externals` still override preset-provided mappings.
npm package: @lynx-js/lynx-bundle-rslib-config-canary
Description: The rsbuild config for building Lynx bundle
Author: Hengchang Lu
Latest version: 0.3.1

<h2 align="center">@lynx-js/lynx-bundle-rslib-config</h2>

The package `@lynx-js/lynx-bundle-rslib-config` provides the configurations for bundling Lynx bundle with [Rslib](https://rslib.rs/).

## Usage

Use `defineExternalBundleRslibConfig` when you want to build a Lynx external
bundle that will later be loaded by `pluginExternalBundle`.

### Minimal example

```ts
import { defineExternalBundleRslibConfig } from '@lynx-js/lynx-bundle-rslib-config'
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'

export default defineExternalBundleRslibConfig({
  id: 'comp-lib',
  source: {
    entry: {
      './App.js': './external-bundle/CompLib.tsx',
    },
  },
  plugins: [
    pluginReactLynx(),
  ],
  output: {
    externalsPresets: {
      reactlynx: true,
    },
    globalObject: 'globalThis',
  },
})
```

This produces an external bundle whose React-related requests are mapped to the
built-in `reactlynx` preset instead of a hand-written externals table.

### Custom presets

If your business bundle needs extra preset mappings, define them next to
`externalsPresets`:

```ts
export default defineExternalBundleRslibConfig({
  output: {
    externalsPresets: {
      reactlynx: true,
      lynxUi: true,
    },
    externalsPresetDefinitions: {
      lynxUi: {
        externals: {
          '@lynx-js/lynx-ui': ['LynxUI', 'UI'],
        },
      },
    },
  },
})
```

If you need to extend a built-in preset instead of defining a brand new one,
use `extends`:

```ts
export default defineExternalBundleRslibConfig({
  output: {
    externalsPresets: {
      reactlynxPlus: true,
    },
    externalsPresetDefinitions: {
      reactlynxPlus: {
        extends: 'reactlynx',
        externals: {
          '@lynx-js/lynx-ui': ['LynxUI', 'UI'],
        },
      },
    },
  },
})
```

Explicit `output.externals` still override preset-provided mappings.
npm package: @lynx-js/lynx-ui
Description: `@lynx-js/lynx-ui` is the official headless UI library for ReactLynx, provided as a reference for building flexible, universal, and high-performance ReactLynx components.
Author: The Lynx Authors
Latest version: 3.130.1

# @lynx-js/lynx-ui

`@lynx-js/lynx-ui` is the official headless UI library for ReactLynx, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

## Introduction

We extend native components' capabilities through frontend components, toward a high-performance, native-like Lynx component ecosystem with broad compatibility.

UI characteristics on the same platform often differ in behavior, APIs, and even design philosophy, especially for advanced features. Cross-platform frameworks must bridge these gaps, and Lynx is no exception.

This is where `lynx-ui` comes in, streamlining and unifying disparate atomic APIs to reconcile underlying behaviors and limitations, delivering a consistent experience across platforms.

## Installation

`lynx-ui` supports both full-library imports and individual component imports.

### Option 1: Full-Library Import (Recommended)

Import the entire `lynx-ui` package. Tree-shaking is supported, so unused components won't increase your final build size.

```bash
pnpm add @lynx-js/lynx-ui
```

**Usage:**

```tsx
import { Button } from '@lynx-js/lynx-ui'

export default function App() {
  return (
    <view>
      <Button>Hello</Button>
    </view>
  )
}
```

### Option 2: Importing Individual Components

Each `lynx-ui` component is distributed as a separate package. Use this approach for compatibility or specific requirements.

**Example with `<Button>`:**

```bash
pnpm add @lynx-js/lynx-ui-button
```

**Usage:**

```tsx
import { Button } from '@lynx-js/lynx-ui-button'

export default function App() {
  return (
    <view>
      <Button>Hello</Button>
    </view>
  )
}
```

## Configuration

If you are using `rspeedy`, configure the `pluginReactLynx` as follows:

```typescript
// lynx.config.ts
import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  plugins: [
    pluginReactLynx({
      enableNewGesture: true,
    }),
  ],
})
```

## Compatibility

- **LynxSDK**: >= 3.2

> These are full-library requirements. Individual components may have different version requirements.

## Development

If you are interested in contributing to `lynx-ui`, please read our [Contributing Guide](./CONTRIBUTING.md).

## License

[**lynx-ui**](https://github.com/lynx-family/lynx-ui) is [**Apache License 2.0**](./LICENSE) licensed.
npm package: @lynx-js/lynx-ui-button
Description: A headless Button component for ReactLynx. It provides press state tracking (`active`) and render props for custom styling.
Author: The Lynx Authors
Latest version: 3.130.0

# @lynx-js/lynx-ui-button

A headless Button component for ReactLynx. It provides press state tracking (`active`) and render props for custom styling.

## Installation

We strongly recommend installing and using this component through the main `@lynx-js/lynx-ui` package:

```bash
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui

# npm
npm install @lynx-js/lynx-ui

# yarn
yarn add @lynx-js/lynx-ui
```

_(If necessary, you can still install the standalone package via `pnpm add @lynx-js/lynx-ui-button`)_

## Usage

[View Full Examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/Button)

## Component Structure

```tsx
<Button>
  {/* Your content */}
</Button>
```

## About @lynx-js/lynx-ui

This component is part of `@lynx-js/lynx-ui`, a headless UI library officially maintained by the Lynx team, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

## License

[**lynx-ui**](https://github.com/lynx-family/lynx-ui) is [**Apache License 2.0**](./LICENSE) licensed.
npm package: @lynx-js/lynx-ui-checkbox
Description: A headless Checkbox component for ReactLynx. It supports controlled/uncontrolled checked state and indeterminate mode.
Author: The Lynx Authors
Latest version: 3.130.0

# @lynx-js/lynx-ui-checkbox

A headless Checkbox component for ReactLynx. It supports controlled/uncontrolled checked state and indeterminate mode.

## Installation

We strongly recommend installing and using this component through the main `@lynx-js/lynx-ui` package:

```bash
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui

# npm
npm install @lynx-js/lynx-ui

# yarn
yarn add @lynx-js/lynx-ui
```

_(If necessary, you can still install the standalone package via `pnpm add @lynx-js/lynx-ui-checkbox`)_

## Usage

The `lynx-ui-checkbox` follows a headless composition pattern.

[View Full Examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/Checkbox)

## Component Structure

The `Checkbox` component is composed of several specialized sub-components to give you full control over the layout and styling.

```tsx
<Checkbox>
  <CheckboxIndicator />
</Checkbox>
```

- **`Checkbox`**: The root container that manages the state and interactions.
- **`CheckboxIndicator`**: The visual indicator that shows the checked state.

## About @lynx-js/lynx-ui

This component is part of `@lynx-js/lynx-ui`, a headless UI library officially maintained by the Lynx team, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

## License

[**lynx-ui**](https://github.com/lynx-family/lynx-ui) is [**Apache License 2.0**](./LICENSE) licensed.
npm package: @lynx-js/lynx-ui-common
Description: Common utilities, hooks, and types shared across `@lynx-js/lynx-ui` components.
Author: The Lynx Authors
Latest version: 3.130.0

# @lynx-js/lynx-ui-common

Common utilities, hooks, and types shared across `@lynx-js/lynx-ui` components.

## Installation

We strongly recommend installing and using this component through the main `@lynx-js/lynx-ui` package:

```bash
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui

# npm
npm install @lynx-js/lynx-ui

# yarn
yarn add @lynx-js/lynx-ui
```

_(If necessary, you can still install the standalone package via `pnpm add @lynx-js/lynx-ui-common`)_

## About @lynx-js/lynx-ui

This component is part of `@lynx-js/lynx-ui`, a headless UI library officially maintained by the Lynx team, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

## License

[**lynx-ui**](https://github.com/lynx-family/lynx-ui) is [**Apache License 2.0**](./LICENSE) licensed.
npm package: @lynx-js/lynx-ui-dialog
Description: A headless Dialog (modal) component for ReactLynx. It provides backdrop overlay, open/close state management, and enter/exit animations via Presence.
Author: The Lynx Authors
Latest version: 3.130.0

# @lynx-js/lynx-ui-dialog

A headless Dialog (modal) component for ReactLynx. It provides backdrop overlay, open/close state management, and enter/exit animations via Presence.

## Installation

We strongly recommend installing and using this component through the main `@lynx-js/lynx-ui` package:

```bash
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui

# npm
npm install @lynx-js/lynx-ui

# yarn
yarn add @lynx-js/lynx-ui
```

_(If necessary, you can still install the standalone package via `pnpm add @lynx-js/lynx-ui-dialog`)_

## Usage

The `lynx-ui-dialog` follows a headless composition pattern.

[View Full Examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/Dialog)

## Component Structure

The `Dialog` component is composed of several specialized sub-components to give you full control over the layout and styling.

```tsx
<DialogRoot>
  <DialogTrigger />
  <DialogView>
    <DialogBackdrop />
    <DialogContent>
      <DialogClose />
    </DialogContent>
  </DialogView>
</DialogRoot>
```

- **`DialogRoot`**: The root container that manages the state.
- **`DialogView`**: The viewport container for the dialog components.
- **`DialogBackdrop`**: The dimmed overlay behind the dialog.
- **`DialogContent`**: The actual dialog panel that contains your content.
- **`DialogTrigger`**: A button that opens the dialog.
- **`DialogClose`**: A button that closes the dialog.

## About @lynx-js/lynx-ui

This component is part of `@lynx-js/lynx-ui`, a headless UI library officially maintained by the Lynx team, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

## License

[**lynx-ui**](https://github.com/lynx-family/lynx-ui) is [**Apache License 2.0**](./LICENSE) licensed.
npm package: @lynx-js/lynx-ui-draggable
Description: A headless Draggable component for ReactLynx. It provides drag-and-drop primitives via main-thread execution.
Author: The Lynx Authors
Latest version: 3.130.0

# @lynx-js/lynx-ui-draggable

A headless Draggable component for ReactLynx. It provides drag-and-drop primitives via main-thread execution.

## Installation

We strongly recommend installing and using this component through the main `@lynx-js/lynx-ui` package:

```bash
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui

# npm
npm install @lynx-js/lynx-ui

# yarn
yarn add @lynx-js/lynx-ui
```

_(If necessary, you can still install the standalone package via `pnpm add @lynx-js/lynx-ui-draggable`)_

## Usage

The `lynx-ui-draggable` follows a headless composition pattern.

[View Full Examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/Draggable)

## Component Structure

The `Draggable` component is composed of several specialized sub-components to give you full control over the layout and styling.

```tsx
<DraggableRoot>
  <DraggableArea>
    <Draggable />
  </DraggableArea>
</DraggableRoot>
```

- **`DraggableRoot`**: The root container that manages the state and logic.
- **`DraggableArea`**: The defined area where items can be dragged.
- **`Draggable`**: The actual draggable item.
- **`useDraggable`**: A hook for custom draggable implementations.

## About @lynx-js/lynx-ui

This component is part of `@lynx-js/lynx-ui`, a headless UI library officially maintained by the Lynx team, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

## License

[**lynx-ui**](https://github.com/lynx-family/lynx-ui) is [**Apache License 2.0**](./LICENSE) licensed.
npm package: @lynx-js/lynx-ui-feed-list
Description: A FeedList component for ReactLynx. Designed to render lists with complex layouts and infinite scrolling.
Author: The Lynx Authors
Latest version: 3.130.0

# @lynx-js/lynx-ui-feed-list

A FeedList component for ReactLynx. Designed to render lists with complex layouts and infinite scrolling.

## Installation

We strongly recommend installing and using this component through the main `@lynx-js/lynx-ui` package:

```bash
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui

# npm
npm install @lynx-js/lynx-ui

# yarn
yarn add @lynx-js/lynx-ui
```

_(If necessary, you can still install the standalone package via `pnpm add @lynx-js/lynx-ui-feed-list`)_

## Usage

The `lynx-ui-feed-list` follows a headless composition pattern.

[View Full Examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/FeedList)

## Component Structure

The `FeedList` component is composed of the following sub-components:

```tsx
<FeedList>
  <list-item item-key={item.id} key={item.id}>
    <view>{/* Your item content */}</view>
  </list-item>
</FeedList>
```

- **`FeedList`**: The main list component.

## About @lynx-js/lynx-ui

This component is part of `@lynx-js/lynx-ui`, a headless UI library officially maintained by the Lynx team, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

## License

[**lynx-ui**](https://github.com/lynx-family/lynx-ui) is [**Apache License 2.0**](./LICENSE) licensed.
npm package: @lynx-js/lynx-ui-form
Description: A headless Form component for ReactLynx. It provides form context and a submit button that collects field values.
Author: The Lynx Authors
Latest version: 3.130.0

# @lynx-js/lynx-ui-form

A headless Form component for ReactLynx. It provides form context and a submit button that collects field values.

## Installation

We strongly recommend installing and using this component through the main `@lynx-js/lynx-ui` package:

```bash
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui

# npm
npm install @lynx-js/lynx-ui

# yarn
yarn add @lynx-js/lynx-ui
```

_(If necessary, you can still install the standalone package via `pnpm add @lynx-js/lynx-ui-form`)_

## Usage

The `lynx-ui-form` follows a headless composition pattern.

[View Full Examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/Form)

## Component Structure

The `Form` component is composed of the following sub-components:

```tsx
<FormRoot>
  <FormField />
  <FormSubmitButton />
</FormRoot>
```

- **`FormRoot`**: The root container that provides form context.
- **`FormField`**: A form field container.
- **`FormSubmitButton`**: A button that triggers form submission.

## About @lynx-js/lynx-ui

This component is part of `@lynx-js/lynx-ui`, a headless UI library officially maintained by the Lynx team, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

## License

[**lynx-ui**](https://github.com/lynx-family/lynx-ui) is [**Apache License 2.0**](./LICENSE) licensed.
npm package: @lynx-js/lynx-ui-input
Description: A headless Input component for ReactLynx. It provides primitives for text entry and keyboard awareness.
Author: The Lynx Authors
Latest version: 3.130.0

# @lynx-js/lynx-ui-input

A headless Input component for ReactLynx. It provides primitives for text entry and keyboard awareness.

## Requirements

- **Lynx SDK**: >= 3.4

## Installation

We strongly recommend installing and using this component through the main `@lynx-js/lynx-ui` package:

```bash
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui

# npm
npm install @lynx-js/lynx-ui

# yarn
yarn add @lynx-js/lynx-ui
```

_(If necessary, you can still install the standalone package via `pnpm add @lynx-js/lynx-ui-input`)_

## Usage

The `lynx-ui-input` follows a headless composition pattern.

[View Full Examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/Input)

## Component Structure

The `Input` component is composed of several specialized sub-components to give you full control over the layout and styling.

```tsx
<KeyboardAwareRoot>
  <KeyboardAwareResponder>
    <KeyboardAwareTrigger>
      <Input />
    </KeyboardAwareTrigger>
    <KeyboardAwareTrigger>
      <TextArea />
    </KeyboardAwareTrigger>
  </KeyboardAwareResponder>
</KeyboardAwareRoot>
```

- **`Input`**: The main input field.
- **`TextArea`**: A multi-line text input field.
- **`KeyboardAwareRoot`**: The root container for keyboard awareness.
- **`KeyboardAwareTrigger`**: The trigger area for the keyboard.
- **`KeyboardAwareResponder`**: The area that responds to the keyboard.

## About @lynx-js/lynx-ui

This component is part of `@lynx-js/lynx-ui`, a headless UI library officially maintained by the Lynx team, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

## License

[**lynx-ui**](https://github.com/lynx-family/lynx-ui) is [**Apache License 2.0**](./LICENSE) licensed.
npm package: @lynx-js/lynx-ui-lazy-component
Description: A LazyComponent for ReactLynx. It defers the loading of non-critical UI elements.
Author: The Lynx Authors
Latest version: 3.130.0

# @lynx-js/lynx-ui-lazy-component

A LazyComponent for ReactLynx. It defers the loading of non-critical UI elements.

## Installation

We strongly recommend installing and using this component through the main `@lynx-js/lynx-ui` package:

```bash
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui

# npm
npm install @lynx-js/lynx-ui

# yarn
yarn add @lynx-js/lynx-ui
```

_(If necessary, you can still install the standalone package via `pnpm add @lynx-js/lynx-ui-lazy-component`)_

## Usage

The `lynx-ui-lazy-component` follows a headless composition pattern.

[View Full Examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/LazyComponent)

## Component Structure

The `LazyComponent` component is composed of the following sub-components:

```tsx
<LazyComponent>
  {/* Your content */}
</LazyComponent>
```

- **`LazyComponent`**: The main lazy loading component.

## About @lynx-js/lynx-ui

This component is part of `@lynx-js/lynx-ui`, a headless UI library officially maintained by the Lynx team, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

## License

[**lynx-ui**](https://github.com/lynx-family/lynx-ui) is [**Apache License 2.0**](./LICENSE) licensed.
npm package: @lynx-js/lynx-ui-list
Description: A virtualized List component for ReactLynx. Designed to render long lists of data.
Author: The Lynx Authors
Latest version: 3.130.0

# @lynx-js/lynx-ui-list

A virtualized List component for ReactLynx. Designed to render long lists of data.

## Installation

We strongly recommend installing and using this component through the main `@lynx-js/lynx-ui` package:

```bash
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui

# npm
npm install @lynx-js/lynx-ui

# yarn
yarn add @lynx-js/lynx-ui
```

_(If necessary, you can still install the standalone package via `pnpm add @lynx-js/lynx-ui-list`)_

## Usage

The `lynx-ui-list` follows a headless composition pattern.

[View Full Examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/List)

## Component Structure

```tsx
<List>
  <list-item item-key={item.id} key={item.id}>
    <view>{/* Your item content */}</view>
  </list-item>
</List>
```

- **`List`**: The virtualized list container.

## About @lynx-js/lynx-ui

This component is part of `@lynx-js/lynx-ui`, a headless UI library officially maintained by the Lynx team, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

## License

[**lynx-ui**](https://github.com/lynx-family/lynx-ui) is [**Apache License 2.0**](./LICENSE) licensed.
npm package: @lynx-js/lynx-ui-overlay
Description: An Overlay component for ReactLynx. It renders content in a native overlay layer above the main view tree.
Author: The Lynx Authors
Latest version: 3.130.0

# @lynx-js/lynx-ui-overlay

An Overlay component for ReactLynx. It renders content in a native overlay layer above the main view tree.

## Installation

We strongly recommend installing and using this component through the main `@lynx-js/lynx-ui` package:

```bash
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui

# npm
npm install @lynx-js/lynx-ui

# yarn
yarn add @lynx-js/lynx-ui
```

_(If necessary, you can still install the standalone package via `pnpm add @lynx-js/lynx-ui-overlay`)_

## Usage

`@lynx-js/lynx-ui-overlay` is an internal primitive used by higher-level components (for example, `@lynx-js/lynx-ui-dialog`, `@lynx-js/lynx-ui-popover`, and `@lynx-js/lynx-ui-sheet`) to render content above the normal view tree.

It is not expected to be consumed directly in application code, and its API may change without notice. If you need an overlay-based UI, prefer using `Dialog`, `Popover`, or `Sheet` from `@lynx-js/lynx-ui`.

- [Dialog examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/Dialog)
- [Popover examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/Popover)
- [Sheet examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/Sheet)

## Component Structure

The `OverlayView` component is the main overlay container:

```tsx
<OverlayView>
  {children}
</OverlayView>
```

## About @lynx-js/lynx-ui

This component is part of `@lynx-js/lynx-ui`, a headless UI library officially maintained by the Lynx team, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

## License

[**lynx-ui**](https://github.com/lynx-family/lynx-ui) is [**Apache License 2.0**](./LICENSE) licensed.
npm package: @lynx-js/lynx-ui-popover
Description: A headless Popover component for ReactLynx. It provides primitives for positioning and anchor tracking.
Author: The Lynx Authors
Latest version: 3.130.1

# @lynx-js/lynx-ui-popover

A headless Popover component for ReactLynx. It provides primitives for positioning and anchor tracking.

## Installation

We strongly recommend installing and using this component through the main `@lynx-js/lynx-ui` package:

```bash
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui

# npm
npm install @lynx-js/lynx-ui

# yarn
yarn add @lynx-js/lynx-ui
```

_(If necessary, you can still install the standalone package via `pnpm add @lynx-js/lynx-ui-popover`)_

## Usage

The `lynx-ui-popover` follows a headless composition pattern.

[View Full Examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/Popover)

## Component Structure

The `Popover` component is composed of the following sub-components:

```tsx
<PopoverRoot>
  <PopoverTrigger />
  <PopoverAnchor />
  <PopoverPositioner>
    <PopoverBackdrop />
    <PopoverContent>
      <PopoverArrow />
    </PopoverContent>
  </PopoverPositioner>
</PopoverRoot>
```

- **`PopoverRoot`**: The root container that manages open/close state.
- **`PopoverTrigger`**: The element that toggles the popover.
- **`PopoverAnchor`**: An alternative anchor element for positioning.
- **`PopoverPositioner`**: Handles floating positioning relative to the anchor.
- **`PopoverBackdrop`**: A backdrop overlay.
- **`PopoverContent`**: The popover panel content.
- **`PopoverArrow`**: An arrow pointing to the anchor.

## About @lynx-js/lynx-ui

This component is part of `@lynx-js/lynx-ui`, a headless UI library officially maintained by the Lynx team, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

## License

[**lynx-ui**](https://github.com/lynx-family/lynx-ui) is [**Apache License 2.0**](./LICENSE) licensed.
npm package: @lynx-js/lynx-ui-presence
Description: A Presence component for ReactLynx. It animates elements entering and leaving the view tree.
Author: The Lynx Authors
Latest version: 3.130.0

# @lynx-js/lynx-ui-presence

A Presence component for ReactLynx. It animates elements entering and leaving the view tree.

## Installation

We strongly recommend installing and using this component through the main `@lynx-js/lynx-ui` package:

```bash
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui

# npm
npm install @lynx-js/lynx-ui

# yarn
yarn add @lynx-js/lynx-ui
```

_(If necessary, you can still install the standalone package via `pnpm add @lynx-js/lynx-ui-presence`)_

## Usage

`@lynx-js/lynx-ui-presence` is an internal primitive used by higher-level components (for example, `@lynx-js/lynx-ui-dialog`, `@lynx-js/lynx-ui-popover`, and `@lynx-js/lynx-ui-sheet`) to control mount/unmount with enter/exit animation states.

It is not expected to be consumed directly in application code, and its API may change without notice. If you need enter/exit animations for overlays and panels, prefer using `Dialog`, `Popover`, or `Sheet` from `@lynx-js/lynx-ui`.

- [Dialog examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/Dialog)
- [Popover examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/Popover)
- [Sheet examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/Sheet)

## Component Structure

```tsx
<Presence>
</Presence>
```

- **`Presence`**: Controls mount/unmount with enter/exit animation states.
- **`usePresenceGroup`**: Hook for managing presence of a list of items.
- **`useVisibilityFromPresence`**: Hook for deriving visibility from presence context.

## About @lynx-js/lynx-ui

This component is part of `@lynx-js/lynx-ui`, a headless UI library officially maintained by the Lynx team, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

## License

[**lynx-ui**](https://github.com/lynx-family/lynx-ui) is [**Apache License 2.0**](./LICENSE) licensed.
npm package: @lynx-js/lynx-ui-radio-group
Description: A headless RadioGroup component for ReactLynx. It manages single-selection state across a group of radio buttons.
Author: The Lynx Authors
Latest version: 3.130.0

# @lynx-js/lynx-ui-radio-group

A headless RadioGroup component for ReactLynx. It manages single-selection state across a group of radio buttons.

## Installation

We strongly recommend installing and using this component through the main `@lynx-js/lynx-ui` package:

```bash
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui

# npm
npm install @lynx-js/lynx-ui

# yarn
yarn add @lynx-js/lynx-ui
```

_(If necessary, you can still install the standalone package via `pnpm add @lynx-js/lynx-ui-radio-group`)_

## Usage

The `lynx-ui-radio-group` follows a headless composition pattern.

[View Full Examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/RadioGroup)

## Component Structure

The `RadioGroup` component is composed of the following sub-components:

```tsx
<RadioGroupRoot>
  <Radio>
    <RadioIndicator />
  </Radio>
</RadioGroupRoot>
```

- **`RadioGroupRoot`**: The root container that manages the selection state.
- **`Radio`**: An individual radio button.
- **`RadioIndicator`**: The visual indicator for the selected state.

## About @lynx-js/lynx-ui

This component is part of `@lynx-js/lynx-ui`, a headless UI library officially maintained by the Lynx team, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

## License

[**lynx-ui**](https://github.com/lynx-family/lynx-ui) is [**Apache License 2.0**](./LICENSE) licensed.
npm package: @lynx-js/lynx-ui-scroll-view
Description: A ScrollView component for ReactLynx. It provides scrolling primitives and bounce handling.
Author: The Lynx Authors
Latest version: 3.130.0

# @lynx-js/lynx-ui-scroll-view

A ScrollView component for ReactLynx. It provides scrolling primitives and bounce handling.

## Installation

We strongly recommend installing and using this component through the main `@lynx-js/lynx-ui` package:

```bash
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui

# npm
npm install @lynx-js/lynx-ui

# yarn
yarn add @lynx-js/lynx-ui
```

_(If necessary, you can still install the standalone package via `pnpm add @lynx-js/lynx-ui-scroll-view`)_

## Usage

The `lynx-ui-scroll-view` follows a headless composition pattern.

[View Full Examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/ScrollView)

## Component Structure

The `ScrollView` component is composed of the following sub-components:

```tsx
<ScrollView>
  {/* Your content */}
</ScrollView>
```

- **`ScrollView`**: The main scrollable container.

## About @lynx-js/lynx-ui

This component is part of `@lynx-js/lynx-ui`, a headless UI library officially maintained by the Lynx team, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

## License

[**lynx-ui**](https://github.com/lynx-family/lynx-ui) is [**Apache License 2.0**](./LICENSE) licensed.
npm package: @lynx-js/lynx-ui-sheet
Description: A Bottom Sheet component for ReactLynx. It provides drag interactions and snap point primitives.
Author: The Lynx Authors
Latest version: 3.130.1

# @lynx-js/lynx-ui-sheet

A Bottom Sheet component for ReactLynx. It provides drag interactions and snap point primitives.

## Installation

We strongly recommend installing and using this component through the main `@lynx-js/lynx-ui` package:

```bash
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui

# npm
npm install @lynx-js/lynx-ui

# yarn
yarn add @lynx-js/lynx-ui
```

_(If necessary, you can still install the standalone package via `pnpm add @lynx-js/lynx-ui-sheet`)_

## Usage

The `lynx-ui-sheet` follows a headless composition pattern. You can control its visibility via a `ref` and define its behavior using properties like `snapPoints` and `initialSnap`.

[View Full Examples](https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/Sheet)

## Component Structure

The `Sheet` component is composed of several specialized sub-components to give you full control over the layout and styling.

```tsx
<SheetRoot>
  <SheetView>
    <SheetBackdrop />
    <SheetContent>
      <SheetHandle />
    </SheetContent>
  </SheetView>
</SheetRoot>
```

- **`SheetRoot`**: The root container that manages the state, snap points, and drag logic.
- **`SheetView`**: The viewport container for the sheet components.
- **`SheetBackdrop`**: The dimmed overlay behind the sheet. Can be configured to close the sheet on tap.
- **`SheetContent`**: The actual sliding panel that contains your content.
- **`SheetHandle`**: (Optional) A draggable visual indicator (usually a small bar) at the top of the sheet content.

## About @lynx-js/lynx-ui

This component is part of `@lynx-js/lynx-ui`, a headless UI library officially maintained by the Lynx team, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

## License

[**lynx-ui**](https://github.com/lynx-family/lynx-ui) is [**Apache License 2.0**](./LICENSE) licensed.