npm - @lanrenbang/basecoat-ultra - Versions diffs - 0.1.2 → 0.1.4 - Mend

@lanrenbang/basecoat-ultra 0.1.2 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README-cn.md CHANGED Viewed

@@ -1,122 +1,148 @@
 # Basecoat Ultra
-[English](./README.md) | **中文**
+**中文** | [English](./README.md)
-Basecoat is a set of components built with Tailwind CSS. It is designed to be used with any traditional web stack.
-Basecoat brings the magic of shadcn/ui to any traditional web stack: no React required.
+Basecoat 是一套基于 Tailwind CSS 构建的组件库。它旨在用于任何传统的 Web 技术栈。
+Basecoat 将 shadcn/ui 的设计魔法带到了传统 Web 开发中：无需 React。
-**Basecoat Ultra** 是基于 [Basecoat](https://basecoatui.com) 开发的增强版 UI 库。它保留了原版“Tailwind 优先、框架无关”的核心理念，并在此基础上根据现代审美与轻量化需求进行了深度定制。我们移除了对 Nunjucks/Jinja 的原生支持，转而专注于提供更丰富的交互组件、开箱即用的主题系统以及细腻的视觉增强。
+**Basecoat Ultra** 是基于 [Basecoat](https://basecoatui.com) 的增强版 UI 库。它保留了“Tailwind 优先、框架无关”的核心理念，同时提供了针对现代审美和轻量级需求的深度定制。我们移除了对 Nunjucks/Jinja 的原生支持，转而专注于提供更丰富的交互组件、开箱即用的主题系统以及精细的视觉增强。
-## ✨ 特性 (Features)
+## ✨ 特性
-### 🛠️ 核心增强与修复 (Core Improvements)
-我们对 Basecoat 原版核心进行了大量细节打磨与 bug 修复（详见 CHANGELOG），包括但不限于：
-- **CSS 模块化**: 将单体 CSS 重构为模块化结构，支持按需加载。
-- **构建修复**: 修复了 Tailwind v4 下复杂选择器的转义问题。
-- **组件优化**:
-    - `Button`: 修复 Ghost/Link 变体在特定背景下的显示问题。
-    - `Dialog`: 引入更自然的缩放与回弹动画。
-    - `Dropdown Menu`: 修复初始化时的闪烁问题。
-    - `Sidebar`: 智能识别当前页高亮逻辑。
+### 🛠️ 核心改进
+我们对 Basecoat 核心进行了大量细节打磨和错误修复（详见 CHANGELOG），包括但不限于：
+- **CSS 模块化**：将单体 CSS 重构为模块化结构，支持按需加载。
+- **构建修复**：解决了 Tailwind v4 中复杂选择器的转义问题。
+- **组件优化**：
+    - `Button`：修复了特定背景下 Ghost/Link 变体的显示问题。
+    - `Dialog`：引入了更自然的缩放和回弹动画。
+    - `Dropdown Menu`：修复了初始化时的闪烁问题。
+    - `Sidebar`：智能识别并高亮当前页面的逻辑。
-### 🧩 新增组件 (New Components)
-引入了一系列对标 shadcn/ui 的高频组件，且完全不依赖 React/Vue：
-- **Accordion (手风琴)**: 上游仅在文档中作为演示存在，本项目将其逻辑标准化并内置，基于原生 `<details>` 实现，零 JS 依赖动画。
-- **Sheet (侧边抽屉)**: 优雅的侧边滑出面板。
-- **Carousel (轮播图)**: 轻量级轮播组件。
-- **Input OTP (验证码输入)**: 专用的验证码输入框。
-- **Toggle Group (开关组)**: 类似于 Radio Group 的按钮式交互。
-- **Toggle (开关)**: 独立的开关按钮样式。
+### 🧩 新增组件
+引入了一系列受 shadcn/ui 启发的高频组件，完全独立于 React/Vue：
+- **Accordion (手风琴)**：原版仅存在于演示中，现已标准化并内置。基于原生 `<details>`，零 JS 动画。
+- **Sheet (侧边栏/抽屉)**：优雅的侧滑面板。
+- **Carousel (轮播)**：轻量级轮播组件。
+- **Input OTP (验证码输入)**：专用的单次密码输入框。
+- **Toggle Group (切换组)**：类似 Radio Group 的按钮式交互。
+- **Toggle (切换按钮)**：独立的切换按钮样式。
-### 🔌 外部集成 (External Integrations)
-集成了优秀的第三方库以弥补纯 CSS/Vanilla JS 的短板（需单独引入）：
-- **Date Picker**: 基于 [Flatpickr](https://flatpickr.js.org/) 的深度定制，完美适配主题。
-- **Resizable**: 基于 [Split.js](https://split.js.org/) 的可拖拽分割面板。
+### 🔌 外部集成
+集成了优秀的第三方库以填补纯 CSS/Vanilla JS 的空白（需单独引入）：
+- **Date Picker (日期选择器)**：基于 [Flatpickr](https://flatpickr.js.org/) 的深度定制版，完美适配主题。
+- **Resizable (拖拽分割)**：基于 [Split.js](https://split.js.org/) 的可拖拽分割面板。
-### 🎨 视觉增强 (Visual Enhancements)
-- **Catppuccin 主题**: 内置 [Catppuccin](https://github.com/catppuccin/catppuccin) 全系列（Latte, Frappé, Macchiato, Mocha）主题支持。
-- **Neumorphism Extension**:
-    - **全局光照系统**: 独特的鼠标跟随光影效果 (`lighting.js`)，为 `.neu-panel`, `.neu-btn` 等元素赋予拟态光感。
-    - **3D 翻转**: 支持基于 CSS 3D Transform 的卡片翻转效果。
+### 🎨 视觉增强
+- **Catppuccin 主题**：内置支持完整的 [Catppuccin](https://github.com/catppuccin/catppuccin) 配色方案 (Latte, Frappé, Macchiato, Mocha)。
+- **拟态设计 (Neumorphism) 扩展**：
+    - **全局光照系统**：独特的小鼠跟随光照效果 (`lighting.js`)，赋予 `.neu-panel`、`.neu-btn` 元素拟态质感。
+    - **3D 翻转**：支持基于 CSS 3D Transform 的卡片翻转效果。
-## 📦 安装 (Installation)
+## 📦 安装
-本项目已发布到 [JSR (JavaScript Registry)](https://jsr.io/)。
-### 1. 安装依赖
+推荐使用 `bun`，当然也支持 `npm` 或 `pnpm`：
 ```bash
-# 使用 npm
-npx jsr add @lanrenbang/basecoat-ultra
+bun add @lanrenbang/basecoat-ultra
+# 或
+npm install @lanrenbang/basecoat-ultra
+```
-# 使用 bun
-bunx jsr add @lanrenbang/basecoat-ultra
+## 🚀 配置 (构建工具)
-# 使用 deno
-deno add @lanrenbang/basecoat-ultra
-```
+如果您使用 Vite、Webpack 等构建工具，并已配置 Tailwind CSS v4，请按照以下步骤操作。
+### 1. 引入 CSS
-### 2. 引入样式
+在您的 CSS 入口文件（例如 `style.css`）中引入。
-在你的 CSS 文件中（需配置 Tailwind CSS v4）：
+**注意**：请引入不带编译的源码版本（`/css`），让您的 Tailwind 配置来处理样式。切勿引入 `.cdn.css` 版本。
 ```css
 @import "tailwindcss";
-/* 引入核心样式 */
-@import "@lanrenbang/basecoat-ultra/css/basecoat.css";
-/* 或者使用 CDN 版本（包含 Tailwind 工具类） */
-/* @import "@lanrenbang/basecoat-ultra/css/basecoat.cdn.css"; */
-/* 引入 Catppuccin 主题（可选） */
-@import "@lanrenbang/basecoat-ultra/dist/theme/catppuccin/index.css";
+/* 1. Basecoat 核心样式 (必须) */
+@import "@lanrenbang/basecoat-ultra/css";
+/* 2. 外部扩展组件样式 (可选，仅当您使用这些组件时需要) */
+@import "@lanrenbang/basecoat-ultra/css/datepicker.css";
+@import "@lanrenbang/basecoat-ultra/css/resizable.css";
+/* 3. 主题样式 (可选，必须显式引入) */
+/* 我们提供了一套 Catppuccin 主题，您也可以参考源码实现自己的主题 */
+@import "@lanrenbang/basecoat-ultra/theme/catppuccin/index.css";
 ```
-### 3. 引入交互逻辑
+### 2. 引入 JavaScript
+在您的应用入口文件（例如 `main.js` 或 `app.ts`）中引入。
-你可以全量引入，也可以按需引入：
+**方式一：全量引入 (推荐)**
+包含核心逻辑及大部分常用组件（不含 Datepicker/Resizable）。
 ```javascript
-// 全量引入 (包含所有组件逻辑)
 import '@lanrenbang/basecoat-ultra';
+```
+**方式二：按需引入**
+如果您想减少体积，可以只引入需要的组件。
+**重要**：必须首先引入 `basecoat` 核心模块，因为其他组件依赖它来注册初始化逻辑。
+```javascript
+// 1. 先引入核心
+import '@lanrenbang/basecoat-ultra/basecoat';
-// 或者按需引入
-import '@lanrenbang/basecoat-ultra/basecoat'; // 核心
+// 2. 再引入具体组件
 import '@lanrenbang/basecoat-ultra/tabs';
-import '@lanrenbang/basecoat-ultra/sheet';
-// ...
+import '@lanrenbang/basecoat-ultra/select';
+import '@lanrenbang/basecoat-ultra/popover';
 ```
-对于外部组件（Datepicker, Resizable），需要单独引入：
+**外部扩展组件 (必须单独引入)**
+无论使用哪种方式，以下组件因为体积较大或依赖外部库，**不会**包含在默认入口中，必须显式引入：
 ```javascript
-// Datepicker
-import 'flatpickr/dist/flatpickr.css';
-import '@lanrenbang/basecoat-ultra/css/datepicker.css';
-import '@lanrenbang/basecoat-ultra/datepicker';
-// Resizable
-import '@lanrenbang/basecoat-ultra/css/resizable.css';
-import '@lanrenbang/basecoat-ultra/resizable';
+import '@lanrenbang/basecoat-ultra/datepicker'; // 基于 flatpickr
+import '@lanrenbang/basecoat-ultra/resizable';  // 基于 split.js
 ```
-对于外部组件（Datepicker, Resizable），需要单独引入：
+---
-```javascript
-// Datepicker
-import 'flatpickr/dist/flatpickr.css';
-import '@basecoat/ultra/datepicker-css';
-import '@basecoat/ultra/datepicker';
-// Resizable
-import '@basecoat/ultra/resizable-css';
-import '@basecoat/ultra/resizable';
+## 🌐 CDN 用法 (无构建工具)
+如果您不使用打包工具，可以直接通过 CDN (jsDelivr) 引入。这里我们使用编译好的 `.cdn.css` 版本（已包含 Tailwind 样式）。
+### CSS
+```html
+<!-- Basecoat 核心 (包含 Tailwind 样式) -->
+<link href="https://cdn.jsdelivr.net/npm/@lanrenbang/basecoat-ultra@latest/dist/css/basecoat.cdn.min.css" rel="stylesheet">
+<!-- 外部扩展 (可选) -->
+<link href="https://cdn.jsdelivr.net/npm/@lanrenbang/basecoat-ultra@latest/dist/css/datepicker.min.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/@lanrenbang/basecoat-ultra@latest/dist/css/resizable.min.css" rel="stylesheet">
+<!-- 主题 (可选) -->
+<link href="https://cdn.jsdelivr.net/npm/@lanrenbang/basecoat-ultra@latest/dist/theme/catppuccin/index.min.css" rel="stylesheet">
 ```
-## 🛠️ 开发与贡献 (Development)
+### JavaScript
+```html
+<!-- 核心与常用组件 -->
+<script src="https://cdn.jsdelivr.net/npm/@lanrenbang/basecoat-ultra@latest/dist/js/all.min.js" defer></script>
+<!-- 外部扩展 (可选) -->
+<script src="https://cdn.jsdelivr.net/npm/@lanrenbang/basecoat-ultra@latest/dist/js/datepicker.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@lanrenbang/basecoat-ultra@latest/dist/js/resizable.min.js" defer></script>
+```
+## 🛠️ 开发指南
 本项目使用 [Bun](https://bun.sh) 作为包管理器和运行时，使用 [Vite](https://vitejs.dev) 进行构建。
-### 环境搭建
+### 启动项目
 ```bash
 # 1. 克隆项目
@@ -130,9 +156,9 @@ bun install
 bun run dev
 ```
-### 主题防闪烁 (Anti-flash Script)
+### 防闪烁脚本 (Anti-flash)
-为了在使用 Catppuccin 主题切换器时防止页面刷新出现闪烁（FOUC），请将以下脚本放在 HTML 的 `<head>` 标签顶部：
+为了防止在使用 Catppuccin 主题切换器时刷新页面出现闪烁 (FOUC)，请将以下脚本放在 HTML `<head>` 标签的顶部：
 ```html
 <script>
@@ -142,12 +168,12 @@ bun run dev
     const a = localStorage.getItem('catppuccin-accent');
     const m = localStorage.getItem('basecoat-mode');
     const r = document.documentElement;
-    // 优先加载主题配置
+    // 优先使用主题配置
     if (t && a) {
       r.classList.add(`theme-${t}`, `accent-${a}`);
       if(['frappe','macchiato','mocha'].includes(t)) r.classList.add('dark');
     } else if (m) {
-      // 只有明暗模式偏好
+      // 仅夜间/日间模式偏好
       r.classList.toggle('dark', m === 'dark');
     } else {
       // 跟随系统
@@ -158,29 +184,19 @@ bun run dev
 </script>
 ```
-### 发布到 JSR
-如果你是维护者，按照以下步骤发布新版本：
-1.  登录 JSR (仅需一次):
-    ```bash
-    bunx jsr login
-    ```
-2.  发布:
-    ```bash
-    bunx jsr publish
-    ```
-## ❤️ 鸣谢 (Credits)
+## ❤️ 致谢
 本项目站在巨人的肩膀上：
-*   **[Basecoat](https://basecoatui.com)**: 原创者 [hunvreus](https://github.com/hunvreus)。本项目的大部分基础代码归原作者所有。
-*   **[Catppuccin](https://github.com/catppuccin/palette)**: 提供了美妙的配色方案。
-*   **[puikinsh/login-forms](https://github.com/puikinsh/login-forms/tree/main/forms/neumorphism)**: Neumorphism 光照与 3D 效果的灵感来源。
+*   **[Basecoat](https://basecoatui.com)**: 原作者 [hunvreus](https://github.com/hunvreus)。大部分基础代码归原作者所有。
+*   **[Catppuccin](https://github.com/catppuccin/palette)**: 提供了精美的配色方案。
+*   **[puikinsh/login-forms](https://github.com/puikinsh/login-forms/tree/main/forms/neumorphism)**: 拟态光照和 3D 效果的灵感来源。
 *   **[Flatpickr](https://flatpickr.js.org/)** & **[Split.js](https://split.js.org/)**: 优秀的第三方库支持。
-## 📄 许可 (License)
+## 通过捐赠支持我
+[![BuyMeACoffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://buymeacoffee.com/bobbynona) [![Ko-Fi](https://img.shields.io/badge/Ko--fi-F16061?style=for-the-badge&logo=ko-fi&logoColor=white)](https://ko-fi.com/bobbynona) [![USDT(TRC20)/Tether](https://img.shields.io/badge/Tether-168363?style=for-the-badge&logo=tether&logoColor=white)](https://github.com/Lanrenbang/.github/blob/5b06b0b2d0b8e4ce532c1c37c72115dd98d7d849/custom/USDT-TRC20.md) [![Litecoin](https://img.shields.io/badge/Litecoin-A6A9AA?style=for-the-badge&logo=litecoin&logoColor=white)](https://github.com/Lanrenbang/.github/blob/5b06b0b2d0b8e4ce532c1c37c72115dd98d7d849/custom/Litecoin.md)
+## 📄 许可证
-本项目遵循 [MIT License](LICENSE.md)。
-Basecoat 原始内容版权归属于 hunvreus。
+本项目基于 [MIT License](LICENSE.md) 开源。
+原 Basecoat 内容版权归 hunvreus 所有。

package/README.md CHANGED Viewed

@@ -41,62 +41,102 @@ Integrated excellent third-party libraries to bridge gaps in pure CSS/Vanilla JS
 ## 📦 Installation
-This project is published to the [JSR (JavaScript Registry)](https://jsr.io/).
-### 1. Install Dependencies
+Recommended using `bun`, but `npm` or `pnpm` are also supported:
 ```bash
-# Using npm
-npx jsr add @lanrenbang/basecoat-ultra
+bun add @lanrenbang/basecoat-ultra
+# or
+npm install @lanrenbang/basecoat-ultra
+```
-# Using bun
-bunx jsr add @lanrenbang/basecoat-ultra
+## 🚀 Setup (Bundlers)
-# Using deno
-deno add @lanrenbang/basecoat-ultra
-```
+For projects using Vite, Webpack, or other bundlers with Tailwind CSS v4 configured.
+### 1. Import CSS
-### 2. Import Styles
+In your CSS entry file (e.g., `style.css`).
-In your CSS file (Tailwind CSS v4 configuration required):
+**Note**: Import the raw CSS (`/css`), letting your Tailwind config handle the styles. Do NOT use the `.cdn.css` version here.
 ```css
 @import "tailwindcss";
-/* Import core styles */
-@import "@lanrenbang/basecoat-ultra/css/basecoat.css";
-/* Or use the CDN version (includes Tailwind utilities) */
-/* @import "@lanrenbang/basecoat-ultra/css/basecoat.cdn.css"; */
-/* Import Catppuccin Theme (Optional) */
-@import "@lanrenbang/basecoat-ultra/dist/theme/catppuccin/index.css";
+/* 1. Basecoat Core (Required) */
+@import "@lanrenbang/basecoat-ultra/css";
+/* 2. External Components (Optional) */
+/* Only import if you use these specific components */
+@import "@lanrenbang/basecoat-ultra/css/datepicker.css";
+@import "@lanrenbang/basecoat-ultra/css/resizable.css";
+/* 3. Theme (Optional, must be explicit) */
+/* We provide a Catppuccin theme suite, or you can build your own */
+@import "@lanrenbang/basecoat-ultra/theme/catppuccin/index.css";
 ```
-### 3. Import Logic
+### 2. Import JavaScript
-You can import everything or use on-demand imports:
+In your application entry point (e.g., `main.js` or `app.ts`).
+**Option A: Import All (Recommended)**
+Includes core logic and most standard components (excludes Datepicker/Resizable).
 ```javascript
-// Import all component logic
 import '@lanrenbang/basecoat-ultra';
+```
-// Or on-demand import
-import '@lanrenbang/basecoat-ultra/basecoat'; // Core
+**Option B: Cherry-pick**
+To reduce bundle size, import only what you need.
+**Important**: You MUST import the `basecoat` core module first, as other components rely on it for registration.
+```javascript
+// 1. Core first
+import '@lanrenbang/basecoat-ultra/basecoat';
+// 2. Then components
 import '@lanrenbang/basecoat-ultra/tabs';
-import '@lanrenbang/basecoat-ultra/sheet';
-// ...
+import '@lanrenbang/basecoat-ultra/select';
+import '@lanrenbang/basecoat-ultra/popover';
 ```
-For external components (Datepicker, Resizable), import them separately:
+**External Components (Must be imported separately)**
+Regardless of the option above, these components are not included in the main bundle due to size or dependencies:
 ```javascript
-// Datepicker
-import 'flatpickr/dist/flatpickr.css';
-import '@lanrenbang/basecoat-ultra/css/datepicker.css';
-import '@lanrenbang/basecoat-ultra/datepicker';
-// Resizable
-import '@lanrenbang/basecoat-ultra/css/resizable.css';
-import '@lanrenbang/basecoat-ultra/resizable';
+import '@lanrenbang/basecoat-ultra/datepicker'; // Uses flatpickr
+import '@lanrenbang/basecoat-ultra/resizable';  // Uses split.js
+```
+---
+## 🌐 CDN Usage (No Build Tool)
+If you are not using a bundler, you can use the pre-compiled versions via CDN (jsDelivr). These include the compiled Tailwind styles.
+### CSS
+```html
+<!-- Basecoat Core (includes Tailwind styles) -->
+<link href="https://cdn.jsdelivr.net/npm/@lanrenbang/basecoat-ultra@latest/dist/css/basecoat.cdn.min.css" rel="stylesheet">
+<!-- External Components (Optional) -->
+<link href="https://cdn.jsdelivr.net/npm/@lanrenbang/basecoat-ultra@latest/dist/css/datepicker.min.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/@lanrenbang/basecoat-ultra@latest/dist/css/resizable.min.css" rel="stylesheet">
+<!-- Theme (Optional) -->
+<link href="https://cdn.jsdelivr.net/npm/@lanrenbang/basecoat-ultra@latest/dist/theme/catppuccin/index.min.css" rel="stylesheet">
+```
+### JavaScript
+```html
+<!-- Core & Standard Components -->
+<script src="https://cdn.jsdelivr.net/npm/@lanrenbang/basecoat-ultra@latest/dist/js/all.min.js" defer></script>
+<!-- External Components (Optional) -->
+<script src="https://cdn.jsdelivr.net/npm/@lanrenbang/basecoat-ultra@latest/dist/js/datepicker.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@lanrenbang/basecoat-ultra@latest/dist/js/resizable.min.js" defer></script>
 ```
 ## 🛠️ Development
@@ -145,19 +185,6 @@ To prevent page flicker (FOUC) when using the Catppuccin Theme Switcher on refre
 </script>
 ```
-### Publishing to JSR
-If you are a maintainer, follow these steps to publish a new version:
-1.  Login to JSR (Once):
-    ```bash
-    bunx jsr login
-    ```
-2.  Publish:
-    ```bash
-    bunx jsr publish
-    ```
 ## ❤️ Credits
 This project stands on the shoulders of giants:
@@ -167,6 +194,9 @@ This project stands on the shoulders of giants:
 *   **[puikinsh/login-forms](https://github.com/puikinsh/login-forms/tree/main/forms/neumorphism)**: Inspiration for Neumorphism lighting and 3D effects.
 *   **[Flatpickr](https://flatpickr.js.org/)** & **[Split.js](https://split.js.org/)**: Excellent third-party library support.
+## Support Me
+[![BuyMeACoffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://buymeacoffee.com/bobbynona) [![Ko-Fi](https://img.shields.io/badge/Ko--fi-F16061?style=for-the-badge&logo=ko-fi&logoColor=white)](https://ko-fi.com/bobbynona) [![USDT(TRC20)/Tether](https://img.shields.io/badge/Tether-168363?style=for-the-badge&logo=tether&logoColor=white)](https://github.com/Lanrenbang/.github/blob/5b06b0b2d0b8e4ce532c1c37c72115dd98d7d849/custom/USDT-TRC20.md) [![Litecoin](https://img.shields.io/badge/Litecoin-A6A9AA?style=for-the-badge&logo=litecoin&logoColor=white)](https://github.com/Lanrenbang/.github/blob/5b06b0b2d0b8e4ce532c1c37c72115dd98d7d849/custom/Litecoin.md)
 ## 📄 License
 This project is licensed under the [MIT License](LICENSE.md).

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@lanrenbang/basecoat-ultra",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Basecoat UI - Ultra edition. A Tailwind-first component library.",
   "type": "module",
   "main": "./dist/js/all.js",
@@ -15,21 +15,31 @@
   ],
   "exports": {
     ".": "./dist/js/all.js",
-    ".//basecoat": "./dist/js/basecoat.js",
-    ".//command": "./dist/js/command.js",
-    ".//datepicker": "./dist/js/datepicker.js",
-    ".//dropdown-menu": "./dist/js/dropdown-menu.js",
-    ".//popover": "./dist/js/popover.js",
-    ".//resizable": "./dist/js/resizable.js",
-    ".//select": "./dist/js/select.js",
-    ".//sidebar": "./dist/js/sidebar.js",
-    ".//tabs": "./dist/js/tabs.js",
-    ".//toast": "./dist/js/toast.js",
-    ".//css/basecoat.css": "./dist/css/basecoat.css",
-    ".//css/basecoat.cdn.css": "./dist/css/basecoat.cdn.css",
-    ".//css/datepicker.css": "./dist/css/datepicker.css",
-    ".//css/resizable.css": "./dist/css/resizable.css",
-    ".//theme/catppuccin/index.css": "./dist/theme/catppuccin/index.css"
+    "./basecoat": "./dist/js/basecoat.js",
+    "./css": "./dist/css/basecoat.css",
+    "./accordion": "./dist/js/accordion.js",
+    "./carousel": "./dist/js/carousel.js",
+    "./catppuccin-theme-switcher": "./dist/js/catppuccin-theme-switcher.js",
+    "./command": "./dist/js/command.js",
+    "./datepicker": "./dist/js/datepicker.js",
+    "./dialog": "./dist/js/dialog.js",
+    "./dropdown-menu": "./dist/js/dropdown-menu.js",
+    "./input-otp": "./dist/js/input-otp.js",
+    "./lighting": "./dist/js/lighting.js",
+    "./popover": "./dist/js/popover.js",
+    "./resizable": "./dist/js/resizable.js",
+    "./select": "./dist/js/select.js",
+    "./sheet": "./dist/js/sheet.js",
+    "./sidebar": "./dist/js/sidebar.js",
+    "./slider": "./dist/js/slider.js",
+    "./tabs": "./dist/js/tabs.js",
+    "./toast": "./dist/js/toast.js",
+    "./toggle": "./dist/js/toggle.js",
+    "./css/basecoat.css": "./dist/css/basecoat.css",
+    "./css/basecoat.cdn.css": "./dist/css/basecoat.cdn.css",
+    "./css/datepicker.css": "./dist/css/datepicker.css",
+    "./css/resizable.css": "./dist/css/resizable.css",
+    "./theme/catppuccin/index.css": "./dist/theme/catppuccin/index.css"
   },
   "scripts": {
     "dev": "vite",
@@ -42,5 +52,13 @@
   "dependencies": {
     "flatpickr": "^4.6.13",
     "split.js": "^1.6.5"
+  },
+  "devDependencies": {
+    "@lanrenbang/basecoat-ultra": "^0.1.4",
+    "@tailwindcss/cli": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/bun": "latest",
+    "tailwindcss": "^4.1.18",
+    "vite": "^7.3.0"
   }
-}
+}