npm package: @syraui/core
Description: Cross-platform UX components for React & React Native — zero-config, same API across platforms.
Author: Ryan Aprianto
Latest version: 0.1.3

# @syraui/core

> Cross-platform UX components for React & React Native — zero-config, same API across platforms.

[![npm version](https://img.shields.io/npm/v/@syraui/core.svg)](https://www.npmjs.com/package/@syraui/core)
[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)

---

## Installation

```bash
npm install @syraui/core
```

---

## Platform Support

| Platform     | Import                |
| ------------ | --------------------- |
| React        | `@syraui/core`        |
| Next.js      | `@syraui/core`        |
| Vite         | `@syraui/core`        |
| React Native | `@syraui/core/native` |
| Expo         | `@syraui/core/native` |

---

## Components

- [`<Skeleton>`](#skeleton) — Auto-generates shimmer from any component's shape

---

## Skeleton

Wrap any component. Get its skeleton. Zero config.

### Web — React / Next.js / Vite

```tsx
import { Skeleton } from "@syraui/core";

<Skeleton loading={isLoading}>
  <ProfileCard user={user} />
</Skeleton>;
```

### React Native / Expo

Wrap elements you want shimmer'd with `<SkeletonItem>`. It reads dimensions directly from the child's style — no duplication needed.

```tsx
import { Skeleton, SkeletonItem } from "@syraui/core/native";

<Skeleton loading={isLoading}>
  <View style={s.card}>
    <SkeletonItem>
      <Image source={{ uri: user.avatar }} style={s.avatar} />
    </SkeletonItem>
    <SkeletonItem>
      <Text style={s.name}>{user.name}</Text>
    </SkeletonItem>
    <SkeletonItem>
      <Text style={s.bio}>{user.bio}</Text>
    </SkeletonItem>
    <Button title="Follow" />
  </View>
</Skeleton>;
```

> **Expo** — requires `expo prebuild` or bare workflow. Does not run in Expo Go.

---

## Props

### `<Skeleton>`

| Prop             | Type                             | Default     | Description                                       |
| ---------------- | -------------------------------- | ----------- | ------------------------------------------------- |
| `loading`        | `boolean`                        | —           | Toggle between shimmer and real content           |
| `children`       | `ReactNode`                      | —           | Your real component                               |
| `animation`      | `"shimmer" \| "pulse" \| "none"` | `"shimmer"` | Animation style                                   |
| `baseColor`      | `string`                         | `"#EAECF0"` | Background color of skeleton blocks               |
| `highlightColor` | `string`                         | `"#F8F9FB"` | Shimmer highlight color                           |
| `speed`          | `number`                         | `1.8`       | Animation speed in seconds. Higher = slower       |
| `borderRadius`   | `string \| number`               | auto        | Override border radius on all blocks              |
| `direction`      | `"ltr" \| "rtl"`                 | `"ltr"`     | Shimmer sweep direction                           |
| `fadeDuration`   | `number`                         | `250`       | Fade-in duration (ms) when loading ends. Web only |
| `className`      | `string`                         | —           | CSS class on wrapper. Web only                    |
| `style`          | `CSSProperties \| ViewStyle`     | —           | Inline styles                                     |

### `<SkeletonItem>` _(React Native only)_

| Prop           | Type           | Default | Description                           |
| -------------- | -------------- | ------- | ------------------------------------- |
| `children`     | `ReactElement` | —       | The element to shimmer                |
| `borderRadius` | `number`       | auto    | Override border radius for this block |

---

## Theming

```tsx
// Dark mode
<Skeleton loading={isLoading} baseColor="#1E293B" highlightColor="#334155">
  <Card />
</Skeleton>

// Pulse animation
<Skeleton loading={isLoading} animation="pulse" speed={1.5}>
  <Card />
</Skeleton>

// RTL
<Skeleton loading={isLoading} direction="rtl">
  <Card />
</Skeleton>
```

---

## License

MIT © [SyraUI](https://github.com/ryanap7/syraui-core)