open-index/open-npm huggingface dataset:
npm package: @statekit-vue/shared
Description: Shared types and metadata for StateKit state recipes.
Latest version: 0.2.0

# @statekit-vue/shared

Shared types and metadata for StateKit state recipes.

`@statekit-vue/shared` is the source-of-truth package behind StateKit. Use it when you need typed ids, categories, layouts, tones, metadata lists, or lookup helpers without pulling in the Vue component layer.

## Install

```bash
npm install @statekit-vue/shared
```

## Quick Start

```ts
import {
  priorityStateBlocks,
  stateBlockMetaBySlug,
  stateBlockMetaList,
} from "@statekit-vue/shared";

console.log(stateBlockMetaList.length);
console.log(stateBlockMetaBySlug["empty-search-state"].componentName);
console.log(priorityStateBlocks.map((block) => block.id));
```

## What It Exports

- `StateBlockId`, `ImplementedBlockId`, `StateCategory`, `StateTone`, `StateDensity`, and `StateLayout`
- `StateAction`, `StateActionSlot`, `BaseStateProps`, and `StateBlockMeta`
- `stateBlockMetaList`, `stateBlockMetaById`, and `stateBlockMetaBySlug`
- `implementedBlockIds`, `priorityStateBlockIds`, `priorityStateBlocks`, and `isImplementedBlockId`

## Typical Uses

- Build docs tooling, recipe pickers, or internal registries from the same metadata used by the Vue package
- Drive analytics or routing from stable recipe ids and slugs
- Create custom wrappers around StateKit presets while keeping shared type safety

If you only want ready-to-use Vue components, install `@statekit-vue/vue` instead.

## Links

- Repository: https://github.com/gaoliuqing9178/StateKit
- Root docs and examples: https://github.com/gaoliuqing9178/StateKit#readme
- Release notes: https://github.com/gaoliuqing9178/StateKit/blob/main/CHANGELOG.md
npm package: @statekit-vue/vue
Description: Category-first Vue state UI for SaaS products.
Latest version: 0.2.0

# @statekit-vue/vue

Category-first Vue state UI for SaaS products.

`@statekit-vue/vue` is the main public package for StateKit. Install it when your app needs production-ready empty, loading, error, permission, upgrade, and success states without rebuilding layout, copy structure, and CTA behavior from scratch.

## Install

```bash
npm install @statekit-vue/vue
```

Peer dependency:

- `vue@^3.4.0`

## Quick Start

```vue
<script setup lang="ts">
import { ref } from "vue";
import "@statekit-vue/vue/styles.css";
import { EmptyState } from "@statekit-vue/vue";

const clearing = ref(false);

async function handleClearFilters() {
  clearing.value = true;
  try {
    await Promise.resolve();
  } finally {
    clearing.value = false;
  }
}
</script>

<template>
  <EmptyState
    title="No matching invoices"
    description="Try a different keyword or clear your current filters."
    :primary-action="{
      label: 'Clear filters',
      onClick: handleClearFilters,
      loading: clearing,
      loadingLabel: 'Clearing filters...',
    }"
    :secondary-action="{
      label: 'Create invoice',
      href: '/invoices/new',
    }"
  />
</template>
```

## What It Includes

- Six category-first public components: `EmptyState`, `LoadingState`, `ErrorState`, `PermissionState`, `UpgradeState`, and `SuccessState`
- 18 preset recipes and compatibility exports across the same six categories
- Shared prop surface for `title`, `description`, `tone`, `density`, `layout`, `primaryAction`, and `secondaryAction`
- Built-in stylesheet entry at `@statekit-vue/vue/styles.css`
- Re-exports from `@statekit-vue/shared` for recipe metadata and shared types

Onboarding-style entry points currently live inside the empty-state category through first-run presets such as `FirstProjectState`.
Prefer the unified category entries in new code and customize the copy, layout, and actions per screen. Older scenario-specific exports remain available as deprecated compatibility presets.

## Shared Preset API

Supported layouts:

- `inline`
- `panel`
- `page`

Supported tones:

- `neutral`
- `brand`
- `danger`
- `warning`
- `success`

## CTA Action Object

`primaryAction` and `secondaryAction` both accept `StateAction | null | undefined`.

A `StateAction` can include:

- `label`: required button text
- `href`: optional link target that renders the action as an anchor
- `onClick`: optional click handler for buttons or links
- `loading`: optional busy state controlled by the consumer
- `loadingLabel`: optional busy text that replaces the default `Working...`
- `disabled`: optional unavailable state that keeps the action visible

Passing `null` removes a preset action explicitly. Leaving an action prop `undefined` keeps the preset default.

## Links

- Repository: https://github.com/gaoliuqing9178/StateKit
- Root docs and examples: https://github.com/gaoliuqing9178/StateKit#readme
- Release notes: https://github.com/gaoliuqing9178/StateKit/blob/main/CHANGELOG.md