open-index/open-npm huggingface dataset:
npm package: @liftkit-vue/nuxt
Description: Nuxt 4 module for LiftKit Vue - auto-imports components and CSS design tokens
Author: annrie
Latest version: 0.2.2

# @liftkit-vue/nuxt

Nuxt 4 module for LiftKit Vue — auto-imports all components and injects the CSS design system.

**[日本語版はこちら](#日本語)**

## Installation

```bash
npm install @liftkit-vue/nuxt
```

## Setup

Add the module to `nuxt.config.ts`:

```ts
export default defineNuxtConfig({
  modules: ['@liftkit-vue/nuxt'],
})
```

## Usage

All LiftKit components are auto-imported. Wrap your app with `LkTheme` in your layout:

```vue
<!-- layouts/default.vue -->
<template>
  <LkTheme source-color="#035eff">
    <slot />
  </LkTheme>
</template>
```

Then use components directly in any page:

```vue
<template>
  <LkContainer>
    <LkCard material="filled">
      <LkText font-class="heading">Welcome</LkText>
      <LkButton variant="fill" color="primary">Get Started</LkButton>
    </LkCard>
  </LkContainer>
</template>
```

## What the Module Does

1. **CSS Injection** — Automatically loads the LiftKit core CSS (tokens, reset, component styles)
2. **Component Registration** — Registers all 35+ components for auto-import
3. **Runtime Plugin** — Initializes the theme system on app startup

## Color Mode

The `LkTheme` component supports automatic OS-based color mode detection:

```vue
<!-- Auto (default) — follows OS light/dark setting -->
<LkTheme color-mode="auto">

<!-- Force light or dark -->
<LkTheme color-mode="light">
<LkTheme color-mode="dark">
```

## Requirements

- Nuxt >= 4.0
- Vue >= 3.5

---

<a id="日本語"></a>

# @liftkit-vue/nuxt（日本語）

LiftKit Vue 用の Nuxt 4 モジュールです。全コンポーネントの自動インポートと CSS デザインシステムの注入を行います。

## インストール

```bash
npm install @liftkit-vue/nuxt
```

## セットアップ

`nuxt.config.ts` にモジュールを追加:

```ts
export default defineNuxtConfig({
  modules: ['@liftkit-vue/nuxt'],
})
```

## 使い方

全 LiftKit コンポーネントが自動インポートされます。レイアウトで `LkTheme` をラップしてください:

```vue
<!-- layouts/default.vue -->
<template>
  <LkTheme source-color="#035eff">
    <slot />
  </LkTheme>
</template>
```

ページ内で直接コンポーネントを使用できます:

```vue
<template>
  <LkContainer>
    <LkCard material="filled">
      <LkText font-class="heading">Welcome</LkText>
      <LkButton variant="fill" color="primary">Get Started</LkButton>
    </LkCard>
  </LkContainer>
</template>
```

## モジュールの機能

1. **CSS 注入** — LiftKit コア CSS（トークン、リセット、コンポーネントスタイル）を自動読み込み
2. **コンポーネント登録** — 35以上のコンポーネントを自動インポート用に登録
3. **ランタイムプラグイン** — アプリ起動時にテーマシステムを初期化

## カラーモード

`LkTheme` コンポーネントは OS ベースのカラーモード自動検出に対応しています:

```vue
<!-- Auto（デフォルト）— OS のライト/ダーク設定に追従 -->
<LkTheme color-mode="auto">

<!-- ライトまたはダークを強制 -->
<LkTheme color-mode="light">
<LkTheme color-mode="dark">
```

## 要件

- Nuxt >= 4.0
- Vue >= 3.5
npm package: @liftkit-vue/preset-unocss
Description: UnoCSS preset for the LiftKit design system - golden-ratio spacing, MD3 colors, typography scale
Author: annrie
Latest version: 0.2.1

# @liftkit-vue/preset-unocss

UnoCSS preset for the LiftKit design system — provides utility classes mapped to LiftKit tokens.

**[日本語版はこちら](#日本語)**

## Installation

```bash
npm install @liftkit-vue/preset-unocss
```

## Setup

Add to your UnoCSS config:

```ts
import { defineConfig } from 'unocss'
import { presetLiftKit } from '@liftkit-vue/preset-unocss'

export default defineConfig({
  presets: [
    presetLiftKit(),
  ],
})
```

## What's Included

- **Color utilities**: `text-primary`, `bg-surface`, `border-outline`, etc.
- **Spacing scale**: `p-md`, `m-lg`, `gap-sm` mapped to golden ratio tokens
- **Border radius**: `rounded-xs`, `rounded-md`, etc.
- **Shadow utilities**: LiftKit shadow definitions
- **Typography shortcuts**: `display1`, `title2`, `heading`, `body`, `caption` (with bold variants)

## Example

```html
<div class="bg-surface text-onsurface p-md rounded-sm shadow-md">
  <h1 class="display2">Hello</h1>
  <p class="body">Content here</p>
</div>
```

## Requirements

- UnoCSS >= 0.58

---

<a id="日本語"></a>

# @liftkit-vue/preset-unocss（日本語）

LiftKit デザインシステム用の UnoCSS プリセットです。LiftKit トークンにマッピングされたユーティリティクラスを提供します。

## インストール

```bash
npm install @liftkit-vue/preset-unocss
```

## セットアップ

UnoCSS 設定に追加:

```ts
import { defineConfig } from 'unocss'
import { presetLiftKit } from '@liftkit-vue/preset-unocss'

export default defineConfig({
  presets: [
    presetLiftKit(),
  ],
})
```

## 含まれるもの

- **カラーユーティリティ**: `text-primary`、`bg-surface`、`border-outline` など
- **スペーシングスケール**: `p-md`、`m-lg`、`gap-sm`（黄金比トークンにマッピング）
- **ボーダー半径**: `rounded-xs`、`rounded-md` など
- **シャドウユーティリティ**: LiftKit シャドウ定義
- **タイポグラフィショートカット**: `display1`、`title2`、`heading`、`body`、`caption`（ボールドバリアント付き）

## 使用例

```html
<div class="bg-surface text-onsurface p-md rounded-sm shadow-md">
  <h1 class="display2">Hello</h1>
  <p class="body">Content here</p>
</div>
```

## 要件

- UnoCSS >= 0.58
npm package: @liftkit-vue/theme-css
Description: LiftKit pure CSS theme with golden-ratio design tokens - Tailwind v4 compatible
Author: annrie
Latest version: 0.2.1

# @liftkit-vue/theme-css

Pure CSS theme package for LiftKit — use with Tailwind v4 or any CSS framework. No JavaScript required.

**[日本語版はこちら](#日本語)**

## Installation

```bash
npm install @liftkit-vue/theme-css
```

## Usage

Import in your CSS or Tailwind config:

```css
@import '@liftkit-vue/theme-css';
```

This gives you access to all LiftKit CSS custom properties:

```css
.my-element {
  color: var(--lk-primary);
  padding: var(--lk-size-md);
  border-radius: var(--lk-size-xs);
}
```

## What's Included

- **Color tokens**: `--lk-primary`, `--lk-secondary`, `--lk-error`, `--lk-surface`, etc.
- **Sizing scale**: `--lk-size-3xs` through `--lk-size-4xl` (golden ratio based)
- **Typography**: Font size and line-height tokens
- **Light/Dark variants**: `--light__*_lkv` and `--dark__*_lkv` variables

## Use Cases

- Tailwind v4 projects that want LiftKit tokens without Vue components
- Projects using Tailwind-dependent UI frameworks (e.g., Nuxt UI, daisyUI) that need LiftKit design tokens alongside their existing Tailwind setup
- Static sites or non-Vue frameworks
- Custom CSS-only builds

---

<a id="日本語"></a>

# @liftkit-vue/theme-css（日本語）

LiftKit の純粋 CSS テーマパッケージです。Tailwind v4 や任意の CSS フレームワークと組み合わせて使用できます。JavaScript 不要。

## インストール

```bash
npm install @liftkit-vue/theme-css
```

## 使い方

CSS または Tailwind 設定でインポート:

```css
@import '@liftkit-vue/theme-css';
```

LiftKit の全 CSS カスタムプロパティが利用可能になります:

```css
.my-element {
  color: var(--lk-primary);
  padding: var(--lk-size-md);
  border-radius: var(--lk-size-xs);
}
```

## 含まれるもの

- **カラートークン**: `--lk-primary`、`--lk-secondary`、`--lk-error`、`--lk-surface` など
- **サイジングスケール**: `--lk-size-3xs` 〜 `--lk-size-4xl`（黄金比ベース）
- **タイポグラフィ**: フォントサイズとラインハイトのトークン
- **ライト/ダークバリアント**: `--light__*_lkv` および `--dark__*_lkv` 変数

## ユースケース

- Vue コンポーネント不要で LiftKit トークンだけ使いたい Tailwind v4 プロジェクト
- Tailwind 必須の UI フレームワーク（Nuxt UI、daisyUI など）を使用しつつ、LiftKit のデザイントークンも併用したい場合
- 静的サイトや Vue 以外のフレームワーク
- CSS のみのカスタムビルド
npm package: @liftr/cli
Description: The Liftr CLI provides scaffolding for the Liftr framework
Author: Faris Tangastani
Latest version: 3.0.0

# liftr-cli

<p align="center">
    <img alt="Liftr logo" src="./logo.png">
</p>

[![npmversion](https://img.shields.io/npm/v/@liftr/cli.svg?style=for-the-badge)](https://github.com/liftr-framework/cli)
[![npmlicense](https://img.shields.io/npm/l/@liftr/cli.svg?style=for-the-badge)](https://github.com/liftr-framework/cli/blob/master/LICENSE/)
[![downloads](https://img.shields.io/npm/dy/liftr.svg?style=for-the-badge)](https://github.com/liftr-framework/cli)

The liftr-cli is a quick project-starter CLI to work with the Liftr framework, it will create the necessary files for you to begin a Node.js & Typescript project. Ontop of that, you can generate new backend components on the fly - providing a quicker way to build structured and robust API's.

## Quickstart

Install the liftr-cli as a global CLI.

```shell
npm install -g @liftr/cli

cd <your-repo-location>

# Then you run
liftr -s <name-of-your-project>
```

This should setup a project with all the necessary folders and files so that you can begin building straight away!

### Commands

Here are all the possibilities with the liftr-cli

```shell

# Create a setup for your Nodejs/Typescript project

liftr -s <your-project-name>
liftr --setup <your-project-name>

# THE FOLLOWING COMMANDS CAN ONLY BE DONE IN A LIFTR SETUP
-----------------------------------------------------------
# All files get their own folder in their component folder
# Using the -f or --flat command skips the folder creation and just creates the files

# Create a module with its own routes file which provides. The module gets added to the LiftrRoutingModule
liftr -m <your-module-name>
liftr --module <your-module-name>

# Create a route in a target route file as well as in the target module (should have the same intial name). This will add the route to the routes file and automatically add it to the module.
liftr -r <your-route-name> -t <your-target-module-and-routes-file>
liftr --route <your-route-name> --target <your-target-module-and-routes-file>

# Create a controller in the controller folder
liftr -c <your-controller-name>
liftr --controller <your-controller-name>

# Create a middleware in the middleware folder
liftr --middleware <your-middleware-name>

```
## Supporting packages

| Package | Description | Version |
| --- | --- | --- |
| [@liftr/core](https://github.com/farisT/liftr-core) | The core package for Liftr | [![npmversion](https://img.shields.io/npm/v/@liftr/core.svg?style=for-the-badge)](https://github.com/farisT/liftr-core) |
| [@liftr/tscov](https://github.com/jeroenouw/liftr-tscov) | Check the type coverage of your Liftr project TypeScript project | [![npmversion](https://img.shields.io/npm/v/@liftr/tscov.svg?style=for-the-badge)](https://github.com/jeroenouw/liftr-tscov) |


## Contributing

Want to file a bug, contribute some code, or improve documentation? Feel free to place an [issue](https://github.com/farisT/liftr-cli/issues) and check the [contributing guidelines](https://github.com/farisT/liftr-cli/blob/master/CONTRIBUTING.md/).
npm package: @liftr/core
Description: The core package for the Liftr framework
Author: Faris Tangastani @farisT
Latest version: 1.1.0

# @liftr/core

<p align="center">
    <img alt="Liftr logo" src="./logo.png">
</p>

[![npmversion](https://img.shields.io/npm/v/@liftr/core.svg?style=for-the-badge)](https://github.com/farisT/liftr)

Provides essential functionality for the Liftr framework.

## Installation

This will be automatically installed with the [liftr-cli](https://github.com/farisT/liftr).

Otherwise:

```
npm install @liftr/core --save
```

## Methods

- [server](docs/server.md)
- [useDocs](docs/useDocs.md)
- [req.validate](docs/req.validate.md)
npm package: @liftr/docs
Description: Middleware for the Liftr framework to document routes in Swagger
Author: Faris Tangastani @farisT
Latest version: 0.2.1

# liftr-docs

[![npmversion](https://img.shields.io/npm/v/liftr-docs.svg)](https://github.com/farisT/liftr-docs)

A middleware for documenting your [Liftr](https://github.com/farisT/liftr) routes with [Swagger 3.0](https://swagger.io/) under the hood.

## Installation

```
npm install liftr-docs --save
```


## Example usage

```
import * as express from 'express';
import { LiftrDocs } from 'liftr-docs';
import { routes } from '@routes/LiftrRoutingModule';

// swaggerDescriptions
// ---------------------------
// standard info and port config for the documentation
// the version of openapi used is 3.0.0. THIS SHOULD NOT CHANGE.

const swaggerDescriptions = {
  info: {
    title: 'Liftr REST API',
    version: '1.0.0',
    description: 'REST API for all the endpoints',
  },
  servers: [{
    url: `http://localhost:${process.env.PORT || 4000}`,
  }],
  openapi: '3.0.0', 
  paths: {},
};

// swaggerResponses
// ---------------------------
// Define the responses for your API endpoints and what type of request body you will send. 

const swaggerResponses = {
  responses: {
    200: {
      description: 'OK',
    },
    400: {
      description: 'Error: Bad Request',
    },
    401: {
      description: 'Error: Unauthorized',
    },
  },
  requestBody: {
    required: true,
    content: {
      'application/json': { },
    },
    description: '',
  },
};

// This will initiate the /docs route to contain the swagger documentation
// This will use the routes created in the LiftrRoutingModule
app.use('/docs', LiftrDocs(routes, swaggerDescriptions, swaggerResponses));

```