open-index/open-npm huggingface dataset:
npm package: @jerryshim-ui/accordion
Description: Accessible, composable Accordion components built on `@radix-ui/react-accordion`.
Latest version: 0.1.0

# @jerryshim-ui/accordion

Accessible, composable Accordion components built on `@radix-ui/react-accordion`.

## Installation

```bash
pnpm add @jerryshim-ui/accordion
```

## Quick Start

```tsx
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@jerryshim-ui/accordion';

export default function Example() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>Section 1</AccordionTrigger>
        <AccordionContent>Content 1</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Section 2</AccordionTrigger>
        <AccordionContent>Content 2</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

## Theme integration (brief)

This component uses token utility classes (e.g., `bg-theme-…`). To generate theme CSS via `@jerryshim/theme-builder`:

```bash
pnpm add -D @jerryshim/theme-builder
```

`package.json`

```jsonc
{
  "scripts": {
    "theme:dep": "jerry-theme-build dep-sync",
    "theme:sync": "jerry-theme-build sync",
  },
}
```

`jerry-theme.config.js`

```js
export default {
  outputDir: 'src/styles/jerry-theme',
  palettes: [
    {
      colorName: 'blue',
      base: { option: 'all', p3: true, theme: true },
      alpha: { option: 'all', p3: true, theme: true },
    },
    {
      colorName: 'slate',
      base: { option: 'all', p3: true, theme: true },
      alpha: { option: 'all', p3: true, theme: true },
    },
    { colorName: 'mono', alpha: { option: 'all', p3: true, 'reverse-theme': true } },
  ],
};
```

Import in your app:

```css
@import '@jerryshim-ui/tailwind-util';
@import '@jerryshim-ui/accordion/preset.css';
@import './styles/jerry-theme/all-colors-only.css';
```

## API

All components are re-exported wrappers of Radix primitives with default styles.

### `Accordion`

- Root component. Accepts Radix props like `type`, `collapsible`, `value`, `defaultValue`, `onValueChange`.

### `AccordionItem`

- Single item container. Requires a unique `value`.

### `AccordionTrigger`

- Header button for toggling the item. Includes an arrow icon that rotates.

### `AccordionContent`

- Content region with open/close animations.

## Accessibility

- Built on Radix Accordion, ensuring ARIA roles, keyboard navigation, and focus management.

## TypeScript

- Component props are typed via Radix component prop types.

## License

MIT
npm package: @jerryshim-ui/grid
Description: A flexible grid layout component for React applications.
Latest version: 0.1.0

# @jerryshim-ui/grid

A flexible grid layout component for React applications.

## Installation

```bash
pnpm add @jerryshim-ui/grid
```

## Quick Start

```jsx
import { Grid, GridItem } from '@jerryshim-ui/grid';

function App() {
  return (
    <Grid columns={3} gap="md">
      <GridItem>Item 1</GridItem>
      <GridItem>Item 2</GridItem>
      <GridItem>Item 3</GridItem>
    </Grid>
  );
}
```

## API

### `Grid`

- **Props**:
  - `columns`: number of columns (default: 2)
  - `rows`: number of rows
  - `gap`: gap size between grid items (default: 'md')
  - `radius`: border radius of grid items (default: 'md')

### `GridItem`

- **Props**:
  - `colSpan`: number of columns to span
  - `rowSpan`: number of rows to span
  - `align`: vertical alignment
  - `justify`: horizontal alignment

## Usage

The `Grid` component is used to create a flexible grid layout. You can specify the number of columns, rows, and the gap between items. The `GridItem` component allows you to control the span and alignment of individual items.

## License

MIT
npm package: @jerryshim-ui/primitives
Description: Low-level React primitives for building headless UI components in Jerry UI. Includes `Slot` from Radix and an event utility.
Latest version: 0.0.1

# @jerryshim-ui/primitives

Low-level React primitives for building headless UI components in Jerry UI. Includes `Slot` from Radix and an event utility.

## Install

```bash
pnpm add @jerryshim-ui/primitives
```

Peer deps: `react >= 19`, `react-dom >= 19`.

## Exports

- `Slot` — Re-export from `@radix-ui/react-slot`. Enables slot-based composition.
- `composeEventHandlers` — Safely compose two event handlers.

## Usage

### Slot

```tsx
import { Slot } from '@jerryshim-ui/primitives';

function Button({ asChild, ...props }: { asChild?: boolean } & React.ComponentProps<'button'>) {
  const Comp = asChild ? Slot : 'button';
  return <Comp className="inline-flex items-center gap-2 px-3 py-2" {...props} />;
}

// Usage
<Button>Default Button</Button>
<Button asChild>
  <a href="/docs">Link Button</a>
</Button>
```

### composeEventHandlers

```tsx
import { composeEventHandlers } from '@jerryshim-ui/primitives';

type Props = React.ComponentProps<'button'> & {
  onPress?: (e: React.MouseEvent<HTMLButtonElement>) => void;
};

function Pressable({ onClick, onPress, ...props }: Props) {
  return <button onClick={composeEventHandlers(onClick, onPress)} {...props} />;
}
```

- Signature:
  ```ts
  function composeEventHandlers<E extends React.SyntheticEvent>(
    theirs?: (e: E) => void,
    ours?: (e: E) => void,
    options?: { checkForDefaultPrevented?: boolean },
  ): (event: E) => void;
  ```
- Calls `theirs` first, then `ours` unless `event.preventDefault()` was called and `checkForDefaultPrevented !== false`.
npm package: @jerryshim-ui/skeleton
Description: A versatile skeleton component for loading states in React applications.
Latest version: 0.1.0

# @jerryshim-ui/skeleton

A versatile skeleton component for loading states in React applications.

## Installation

```bash
pnpm add @jerryshim-ui/skeleton
```

## Quick Start

```tsx
import { Skeleton } from '@jerryshim-ui/skeleton';

function App() {
  return <Skeleton loading={true} />;
}
```

---

## Theme integration (brief)

This component uses token utility classes (`bg-theme-…`, `text-theme-…`). In your app, generate and import theme CSS via `@jerryshim/theme-builder`.

1. Install the theme builder and add scripts

```bash
pnpm add -D @jerryshim/theme-builder
```

`package.json`

```jsonc
{
  "scripts": {
    "theme:dep": "jerry-theme-build dep-sync",
    "theme:sync": "jerry-theme-build sync",
  },
}
```

2. Add a minimal `jerry-theme.config.js` at project root

```js
// jerry-theme.config.js
export default {
  outputDir: 'src/styles/jerry-theme',
  palettes: [
    {
      colorName: 'blue',
      base: { option: 'all', p3: true, theme: true },
      alpha: { option: 'all', p3: true, theme: true },
    },
    {
      colorName: 'slate',
      base: { option: 'all', p3: true, theme: true },
      alpha: { option: 'all', p3: true, theme: true },
    },
    { colorName: 'mono', alpha: { option: 'all', p3: true, 'reverse-theme': true } },
  ],
};
```

3. Merge dependency theme configs (optional)

```bash
pnpm run theme:dep
```

4. Generate theme files and import in your app

```bash
pnpm run theme:sync
```

```ts
// e.g., in src/main.tsx or your global style entry
import '@jerryshim-ui/skeleton/preset.css';
import './styles/jerry-theme/all-colors-only.css';
```

- Docs: [@jerryshim/theme-builder](https://www.npmjs.com/package/@jerryshim/theme-builder)

---

## Build

Built with [@jerryshim/builder](https://www.npmjs.com/package/@jerryshim/builder). Ships dual ESM/CJS `exports` and TypeScript declarations.

---

## API

### Skeleton

- **loading**: `boolean` - Whether the skeleton is in a loading state. Defaults to `true`.
- **asChild**: `boolean` - If `true`, renders children as a slot.
- **renderChildren**: `boolean` - If `true`, renders the actual children inside the skeleton.
- **strong**: `boolean` - If `true`, increases the background intensity.

## Usage

The `Skeleton` component is used to display a placeholder for content that is loading. It can be customized with different tones, radii, and animations.

## Styling/UX

The component uses CSS variables prefixed with `--jerry-` for theming and supports different tones and radii.

## Accessibility

The `Skeleton` component is `aria-hidden` by default and should not interfere with screen readers.

## License

MIT
npm package: @jerryshim-ui/spinner
Description: Accessible, composable loading spinner for React with overlay mode.
Latest version: 0.2.0

# @jerryshim-ui/spinner

Accessible, composable loading spinner for React with overlay mode.

## Installation

```bash
pnpm add @jerryshim-ui/spinner
```

## Quick Start

```tsx
import { Spinner } from '@jerryshim-ui/spinner';

export default function Example() {
  return (
    <div className="h-16 grid place-items-center">
      <Spinner size="lg" speed="normal" />
    </div>
  );
}
```

### Overlay mode

Provide children to render a dimmed content with a centered spinner overlay.

```tsx
<Spinner loading size="md" motion="pop">
  <button className="btn" disabled>
    Submitting…
  </button>
</Spinner>
```

## Theme integration (brief)

This component uses design token utilities. Generate theme CSS via `@jerryshim/theme-builder` and import:

```css
@import '@jerryshim-ui/tailwind-util';
@import '@jerryshim-ui/spinner/preset.css';
```

## API

### `Spinner`

- Props:
  - `loading`: boolean (default: `true`) – when `false`, renders `children` as-is.
  - `size`: `'sm' | 'md' | 'lg' | 'xl'` (default: `'md'`)
  - `dim`: `'none' | 'soft' | 'strong'` (default: `'soft'`)
  - `speed`: `'slow' | 'normal' | 'fast'` (default: `'normal'`)
  - `motion`: `'none' | 'pop' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right'` (default: `'pop'`)
  - `enterDuration`: `number` ms (default: `200`)
  - `asChild`: `boolean` – when no children, wrap container with `Slot` instead of `span`.
  - `label`: `string` (default: `'loading'`) – aria label for status.

### Accessibility

- When `loading` is `true`, spinner element includes `role="status"`, `aria-live="polite"`, `aria-busy`, and a visually hidden label.

## TypeScript

- `SpinnerProps` extends `HTMLAttributes<HTMLSpanElement>` and variant props.

## License

MIT
npm package: @jerryshim-ui/style-utils
Description: Tiny, zero-runtime styling helpers used across Jerry UI. Provides a `cn` function that merges conditional classNames and resolves Tailwind CSS conflicts using `clsx` + `tailwind-merge`.
Latest version: 0.0.1

# @jerryshim-ui/style-utils

Tiny, zero-runtime styling helpers used across Jerry UI. Provides a `cn` function that merges conditional classNames and resolves Tailwind CSS conflicts using `clsx` + `tailwind-merge`.

## Install

```bash
pnpm add @jerryshim-ui/style-utils
```

## Usage

```tsx
import { cn } from '@jerryshim-ui/style-utils';

export function Alert({
  intent = 'info',
  className,
  ...props
}: {
  intent?: 'info' | 'error';
  className?: string;
}) {
  return (
    <div
      className={cn(
        'rounded-md p-3 text-sm',
        intent === 'info' && 'bg-blue-50 text-blue-900',
        intent === 'error' && 'bg-red-50 text-red-900',
        // Conflicting utilities get deduped by tailwind-merge
        'p-2', // will be merged out by the later p-3
        className,
      )}
      {...props}
    />
  );
}
```

## API

- `cn(...inputs: ClassValue[]): string`
  - Accepts strings, arrays, objects, and falsy values (same as `clsx`).
  - Returns a merged className string with Tailwind-aware conflict resolution.

## Notes

- No peer dependencies. Internally uses `clsx` and `tailwind-merge`.
- Works with Tailwind CSS v3 and v4 projects.
npm package: @jerryshim-ui/tailwind-util
Description: Tailwind CSS v4 preset utilities and keyframes used across Jerry UI components. Ships as a CSS entry you can import to enable animation utilities and Radix-friendly transitions.
Latest version: 0.0.2

# @jerryshim-ui/tailwind-util

Tailwind CSS v4 preset utilities and keyframes used across Jerry UI components. Ships as a CSS entry you can import to enable animation utilities and Radix-friendly transitions.

## Install

```bash
pnpm add @jerryshim-ui/tailwind-util
```

## Usage

Tailwind v4 (PostCSS preset import):

```css
/* e.g. in src/styles/tailwind.css */
@import '@jerryshim-ui/tailwind-util';
```

Or directly in your app entry:

```ts
import '@jerryshim-ui/tailwind-util';
```

Then you can use the utilities:

```html
<div class="animate-in fade-in-90 zoom-in-95" />
<div class="animate-out slide-out-to-top-2" />
<div class="animate-radix-accordion-down" />
```

## Provided utilities (selection)

- Keyframes: `fade-in`, `fade-out`, `enter`, `exit`, `expand-vertical`, `collapse-vertical`
- Generic:
  - `animate-in`, `animate-out`
  - `slide-in-from-{right|left|bottom|top}-*`
  - `slide-out-to-{right|left|bottom|top}-*`
  - `zoom-in-*`, `zoom-out-*`, `fade-in-*`, `fade-out-*` (percent values)
- Radix helpers:
  - `animate-radix-collapsible-{down|up}`
  - `animate-radix-accordion-{down|up}`

You can customize duration/easing via CSS variables:

```css
:root {
  --animate-duration: 200ms;
  --animate-ease: ease-out;
}
```