@sxo/ui 0.0.0 → 0.1.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 sxo team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,35 +1,70 @@
-# @sxo/ui
-
-SXO 设计系统的 UI 组件定义层。
-
-## 安装
-
-```bash
-pnpm add @sxo/ui @sxo/engine @sxo/design
-```
-
-## 核心功能
-
-### 样式生成器 (Class Generators)
-提供跨框架通用的样式生成函数。
-
-```typescript
-import { getButtonClasses } from '@sxo/ui';
-
-// 生成按钮所需的原子类
-const classes = getButtonClasses({
-    variant: 'primary',
-    size: 'md'
-});
-// 返回: "inline-flex items-center justify-center bg-primary-DEFAULT ..."
-```
-
-### 类型定义
-定义所有组件的 Props 和接口规范。
-
-```typescript
-import type { ButtonProps } from '@sxo/ui';
-```
-
-## 为什么需要 @sxo/ui？
-`@sxo/ui` 是逻辑适配器（如 `vue-sxo`）和核心逻辑（如 `@sxo/design`）之间的桥梁。它确保了不同框架下的组件在样式表现和属性接口上的一致性。
+<div align="center">
+  <h1>@sxo/ui</h1>
+  <p><b>The style contract and layout layer for the SXO design system.</b></p>
+
+  <p>
+    <a href="https://www.npmjs.com/package/@sxo/ui"><img src="https://img.shields.io/npm/v/@sxo/ui.svg?style=flat-square" alt="npm version"></a>
+    <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="license">
+    <img src="https://img.shields.io/bundlephobia/minzip/@sxo/ui?style=flat-square" alt="bundle size">
+    <img src="https://img.shields.io/npm/dm/@sxo/ui.svg?style=flat-square" alt="downloads">
+  </p>
+</div>
+
+---
+
+`@sxo/ui` bridges the gap between **Headless Logic** and **Visual Design**. It provides the "Style Contract" that defines how components should look by translating design tokens and states into atomic CSS classes.
+
+## 🌉 Bridging the Gap
+
+While `@sxo/design` handles behavior, `@sxo/ui` handles the visual identity:
+
+1.  **Contract Definition**: Defines standard Props and interfaces for all framework adaptors.
+2.  **Style Generation**: Provides pure functions that map component states (e.g., `variant`, `size`, `isOpen`) to atomic CSS classes.
+3.  **Unopinionated Layout**: It doesn't render HTML directly, allowing adaptors to maintain their own rendering optimizations.
+
+## ✨ Key Features
+
+- 🎨 **Atomic Generators**: High-performance functions to generate utility-first classes.
+- 📐 **Strict Typing**: Full TypeScript interfaces for every component prop and state.
+- 🧩 **Framework Independent**: Use the same style logic in React, Vue, Solid, or even vanilla JS.
+- 🚀 **AOT Ready**: Designed for both runtime generation and ahead-of-time compilation.
+
+## 🚀 Quick Start
+
+### Installation
+
+```bash
+pnpm add @sxo/ui @sxo/engine
+```
+
+### Using Class Generators
+
+Generate atomic styles based on component state. This is how we keep the UI consistent while remaining headless at the logic level.
+
+```typescript
+import { getButtonClasses } from '@sxo/ui';
+
+// Map component state to atomic classes
+const classes = getButtonClasses({
+    variant: 'primary',
+    size: 'md',
+    loading: true
+});
+// Result: "inline-flex bg-primary-DEFAULT px-4 py-2 opacity-50 cursor-wait ..."
+```
+
+### Component Contracts
+
+Ensures that every framework implementation (React, Vue, etc.) adheres to the same API.
+
+```typescript
+import type { ButtonProps } from '@sxo/ui';
+```
+
+## 📖 Documentation
+
+For full documentation and examples, visit the [Components Index](https://sxo-engine.pages.dev/zh-CN/components/button.html).
+
+## 📄 License
+
+MIT License.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sxo/ui",
-  "version": "0.0.0",
+  "version": "0.1.1",
   "description": "Framework-agnostic UI component logic and style generators for SXO.",
   "keywords": [
     "sxo",
@@ -21,18 +21,20 @@
       "require": "./dist/index.cjs"
     }
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "files": [
     "dist"
   ],
   "devDependencies": {
-    "vite": "^5.0.0",
-    "vite-plugin-dts": "^4.0.0",
-    "typescript": "^5.0.0",
-    "vitest": "^3.0.0"
+    "tsup": "^8.3.6",
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@sxo/design": "0.0.0",
-    "@sxo/engine": "0.0.0"
+    "@sxo/design": "0.1.1",
+    "@sxo/engine": "0.1.1"
   },
   "repository": {
     "type": "git",
@@ -43,12 +45,9 @@
     "url": "https://github.com/doki-land/sxo-engine/issues"
   },
   "homepage": "https://github.com/doki-land/sxo-engine/tree/main/packages/sxo-ui#readme",
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
-    "build": "vite build",
-    "dev": "vite build --watch",
+    "build": "tsup src/index.ts --format cjs --format esm --dts",
+    "dev": "tsup src/index.ts --format cjs --format esm --dts --watch",
     "test": "vitest run"
   }
 }

package/dist/components/Accordion.d.ts

@@ -1,11 +0,0 @@
-export interface AccordionOptions {
-    variant?: 'ghost' | 'bordered' | 'splitted';
-}
-export declare function getAccordionClasses(options?: AccordionOptions): {
-    root: string;
-    item: (isExpanded: boolean) => string;
-    trigger: string;
-    triggerText: string;
-    icon: (isExpanded: boolean) => string;
-    panel: string;
-};

package/dist/components/Alert.d.ts

@@ -1,12 +0,0 @@
-export interface AlertOptions {
-    type?: 'info' | 'success' | 'warning' | 'error';
-    variant?: 'subtle' | 'solid' | 'outline';
-}
-export declare function getAlertClasses(options?: AlertOptions): {
-    container: string;
-    icon: string;
-    content: string;
-    title: string;
-    description: string;
-    closeButton: string;
-};

package/dist/components/Avatar.d.ts

@@ -1,9 +0,0 @@
-export interface AvatarOptions {
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    shape?: 'circle' | 'square';
-}
-export declare function getAvatarClasses(options?: AvatarOptions): {
-    root: string;
-    image: string;
-    fallback: string;
-};

package/dist/components/BackTop.d.ts

@@ -1,4 +0,0 @@
-export declare function getBackTopClasses(): {
-    container: string;
-    icon: string;
-};

package/dist/components/Badge.d.ts

@@ -1,5 +0,0 @@
-export interface BadgeOptions {
-    variant?: 'primary' | 'secondary' | 'accent' | 'outline' | 'neon';
-    size?: 'sm' | 'md';
-}
-export declare function getBadgeClasses(options?: BadgeOptions): string;

package/dist/components/Breadcrumb.d.ts

@@ -1,10 +0,0 @@
-export interface BreadcrumbOptions {
-    separator?: string;
-}
-export declare function getBreadcrumbClasses(options?: BreadcrumbOptions): {
-    container: string;
-    item: string;
-    link: string;
-    current: string;
-    separator: string;
-};

package/dist/components/Button.d.ts

@@ -1,7 +0,0 @@
-export interface ButtonOptions {
-    variant?: 'primary' | 'secondary' | 'accent' | 'outline' | 'ghost';
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    disabled?: boolean;
-    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
-}
-export declare function getButtonClasses(options?: ButtonOptions): string;

package/dist/components/Calendar.d.ts

@@ -1,19 +0,0 @@
-export declare function getCalendarClasses(): {
-    container: string;
-    header: string;
-    headerTitle: string;
-    headerActions: string;
-    headerBtn: string;
-    body: string;
-    weekRow: string;
-    weekDay: string;
-    grid: string;
-    day: string;
-    dayCurrent: string;
-    dayToday: string;
-    daySelected: string;
-    dayOutside: string;
-    dayText: string;
-    dayDot: string;
-    dayDotToday: string;
-};

package/dist/components/Card.d.ts

@@ -1,7 +0,0 @@
-export interface CardOptions {
-    variant?: 'outline' | 'elevated' | 'accent' | 'ghost';
-    padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
-    interactive?: boolean;
-}
-export declare function getCardClasses(options?: CardOptions): string;

package/dist/components/Cascader.d.ts

@@ -1,16 +0,0 @@
-export interface CascaderOptions {
-    size?: 'sm' | 'md' | 'lg';
-    rounded?: boolean;
-}
-export declare function getCascaderClasses(options?: CascaderOptions): {
-    container: string;
-    input: string;
-    icon: string;
-    iconOpen: string;
-    dropdown: string;
-    menu: string;
-    menuItem: string;
-    menuItemActive: string;
-    menuItemDisabled: string;
-    expandIcon: string;
-};

package/dist/components/Checkbox.d.ts

@@ -1,8 +0,0 @@
-export interface CheckboxOptions {
-    size?: 'sm' | 'md' | 'lg';
-    color?: 'primary' | 'success';
-}
-export declare function getCheckboxClasses(isChecked: boolean, options?: CheckboxOptions): {
-    root: string;
-    icon: string;
-};

package/dist/components/DatePicker.d.ts

@@ -1,21 +0,0 @@
-export interface DatePickerOptions {
-    size?: 'sm' | 'md' | 'lg';
-    variant?: 'outline' | 'ghost' | 'bottom-line';
-    rounded?: boolean;
-}
-export declare function getDatePickerClasses(options?: DatePickerOptions): {
-    container: string;
-    input: string;
-    icon: string;
-    panel: string;
-    header: string;
-    headerButton: string;
-    headerTitle: string;
-    grid: string;
-    weekday: string;
-    day: string;
-    dayToday: string;
-    daySelected: string;
-    dayOutside: string;
-    footer: string;
-};

package/dist/components/Descriptions.d.ts

@@ -1,10 +0,0 @@
-export declare function getDescriptionsClasses(): {
-    container: string;
-    header: string;
-    title: string;
-    extra: string;
-    body: string;
-    item: string;
-    label: string;
-    content: string;
-};

package/dist/components/Dialog.d.ts

@@ -1,17 +0,0 @@
-export interface DialogStylesOptions {
-    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
-    isCentered?: boolean;
-}
-/**
- * 获取对话框各部分的样式类名
- */
-export declare function getDialogClasses(options?: DialogStylesOptions): {
-    overlay: string;
-    container: string;
-    content: string;
-    header: string;
-    title: string;
-    description: string;
-    closeButton: string;
-    footer: string;
-};

package/dist/components/Divider.d.ts

@@ -1,18 +0,0 @@
-export interface DividerOptions {
-    direction?: 'horizontal' | 'vertical';
-    type?: 'solid' | 'dashed' | 'dotted';
-    contentPlacement?: 'left' | 'center' | 'right';
-}
-export declare function getDividerClasses(options?: DividerOptions): {
-    container: string;
-    text: string;
-    lineLeft?: undefined;
-    lineRight?: undefined;
-    line?: undefined;
-} | {
-    container: string;
-    lineLeft: string;
-    lineRight: string;
-    line: string;
-    text: string;
-};

package/dist/components/Drawer.d.ts

@@ -1,13 +0,0 @@
-export interface DrawerOptions {
-    placement?: 'left' | 'right' | 'top' | 'bottom';
-    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
-}
-export declare function getDrawerClasses(options?: DrawerOptions): {
-    overlay: string;
-    container: string;
-    header: string;
-    title: string;
-    content: string;
-    footer: string;
-    closeButton: string;
-};

package/dist/components/Dropdown.d.ts

@@ -1,12 +0,0 @@
-export interface DropdownOptions {
-    placement?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
-}
-export declare function getDropdownClasses(options?: DropdownOptions): {
-    container: string;
-    menu: string;
-    item: string;
-    itemActive: string;
-    itemDisabled: string;
-    divider: string;
-    header: string;
-};

package/dist/components/Empty.d.ts

@@ -1,9 +0,0 @@
-export interface EmptyOptions {
-    size?: 'sm' | 'md' | 'lg';
-}
-export declare function getEmptyClasses(options?: EmptyOptions): {
-    container: string;
-    image: string;
-    description: string;
-    extra: string;
-};

package/dist/components/Feedback.d.ts

@@ -1,16 +0,0 @@
-export interface SpinnerOptions {
-    size?: 'sm' | 'md' | 'lg';
-    color?: 'primary' | 'secondary' | 'accent';
-}
-export declare function getSpinnerClasses(options?: SpinnerOptions): string;
-export interface ProgressOptions {
-    value: number;
-    max?: number;
-    color?: 'primary' | 'success' | 'warning' | 'error';
-    size?: 'sm' | 'md' | 'lg';
-}
-export declare function getProgressClasses(options: ProgressOptions): {
-    root: string;
-    bar: string;
-    percentage: number;
-};

package/dist/components/Form.d.ts

@@ -1,19 +0,0 @@
-export interface FormOptions {
-    layout?: 'vertical' | 'horizontal' | 'inline';
-    size?: 'sm' | 'md' | 'lg';
-}
-export declare function getFormClasses(options?: FormOptions): {
-    root: string;
-};
-export interface FormItemOptions {
-    layout?: 'vertical' | 'horizontal';
-    required?: boolean;
-    hasError?: boolean;
-}
-export declare function getFormItemClasses(options?: FormItemOptions): {
-    root: string;
-    label: string;
-    control: string;
-    error: string;
-    extra: string;
-};

package/dist/components/Input.d.ts

@@ -1,6 +0,0 @@
-export interface InputOptions {
-    variant?: 'outline' | 'bottom-line' | 'ghost';
-    size?: 'sm' | 'md' | 'lg';
-    invalid?: boolean;
-}
-export declare function getInputClasses(options?: InputOptions): string;

package/dist/components/Mentions.d.ts

@@ -1,12 +0,0 @@
-export interface MentionsOptions {
-    size?: 'sm' | 'md' | 'lg';
-    status?: 'error' | 'warning' | 'success';
-}
-export declare function getMentionsClasses(options?: MentionsOptions): {
-    container: string;
-    textarea: string;
-    dropdown: string;
-    item: string;
-    itemActive: string;
-    avatar: string;
-};

package/dist/components/Menu.d.ts

@@ -1,11 +0,0 @@
-export interface MenuOptions {
-    variant?: 'default' | 'compact';
-}
-export declare function getMenuClasses(options?: MenuOptions): {
-    container: string;
-    button: string;
-    items: string;
-    item: string;
-    itemActive: string;
-    section: string;
-};

package/dist/components/Pagination.d.ts

@@ -1,14 +0,0 @@
-export interface PaginationOptions {
-    size?: 'sm' | 'md' | 'lg';
-    variant?: 'outline' | 'ghost' | 'solid';
-    rounded?: boolean;
-}
-export declare function getPaginationClasses(options?: PaginationOptions): {
-    container: string;
-    item: string;
-    active: string;
-    disabled: string;
-    jumper: string;
-    total: string;
-    ellipsis: string;
-};

package/dist/components/Popconfirm.d.ts

@@ -1,10 +0,0 @@
-export interface PopconfirmOptions {
-    type?: 'info' | 'warning' | 'error';
-}
-export declare function getPopconfirmClasses(options?: PopconfirmOptions): {
-    container: string;
-    header: string;
-    icon: string;
-    title: string;
-    footer: string;
-};

package/dist/components/Popover.d.ts

@@ -1,10 +0,0 @@
-export interface PopoverOptions {
-    placement?: 'top' | 'bottom' | 'left' | 'right';
-}
-export declare function getPopoverClasses(options?: PopoverOptions): {
-    container: string;
-    content: string;
-    arrow: string;
-    title: string;
-    description: string;
-};

package/dist/components/Radio.d.ts

@@ -1,8 +0,0 @@
-export interface RadioOptions {
-    size?: 'sm' | 'md' | 'lg';
-    color?: 'primary' | 'success';
-}
-export declare function getRadioClasses(isSelected: boolean, options?: RadioOptions): {
-    root: string;
-    inner: string;
-};

package/dist/components/Rate.d.ts

@@ -1,11 +0,0 @@
-export interface RateOptions {
-    disabled?: boolean;
-}
-export declare function getRateClasses(options?: RateOptions): {
-    container: string;
-    item: string;
-    icon: string;
-    iconActive: string;
-    iconInactive: string;
-    text: string;
-};

package/dist/components/Result.d.ts

@@ -1,10 +0,0 @@
-export interface ResultOptions {
-    status?: 'success' | 'error' | 'info' | 'warning' | '404' | '500' | '403';
-}
-export declare function getResultClasses(options?: ResultOptions): {
-    container: string;
-    icon: string;
-    title: string;
-    subTitle: string;
-    extra: string;
-};

package/dist/components/Search.d.ts

@@ -1,11 +0,0 @@
-export interface SearchOptions {
-    variant?: 'outline' | 'ghost' | 'bottom-line';
-    size?: 'sm' | 'md' | 'lg';
-    rounded?: boolean;
-}
-export declare function getSearchClasses(options?: SearchOptions): {
-    container: string;
-    input: string;
-    icon: string;
-    clearButton: string;
-};

package/dist/components/Select.d.ts

@@ -1,8 +0,0 @@
-export interface SelectOptions {
-    size?: 'sm' | 'md' | 'lg';
-}
-export declare function getSelectClasses(isOpen: boolean, options?: SelectOptions): {
-    trigger: string;
-    listbox: string;
-    option: string;
-};

package/dist/components/Skeleton.d.ts

@@ -1,16 +0,0 @@
-export interface SkeletonOptions {
-    active?: boolean;
-    rounded?: boolean;
-}
-export declare function getSkeletonClasses(options?: SkeletonOptions): {
-    root: string;
-    header: string;
-    avatar: string;
-    title: string;
-    paragraph: string;
-    line: string;
-    lineLast: string;
-    rect: string;
-    circle: string;
-    button: string;
-};

package/dist/components/Slider.d.ts

@@ -1,11 +0,0 @@
-export interface SliderOptions {
-    disabled?: boolean;
-}
-export declare function getSliderClasses(options?: SliderOptions): {
-    container: string;
-    track: string;
-    range: string;
-    handle: string;
-    marks: string;
-    markItem: string;
-};

package/dist/components/Statistic.d.ts

@@ -1,8 +0,0 @@
-export declare function getStatisticClasses(): {
-    container: string;
-    label: string;
-    content: string;
-    prefix: string;
-    value: string;
-    suffix: string;
-};

package/dist/components/Steps.d.ts

@@ -1,22 +0,0 @@
-export interface StepsOptions {
-    direction?: 'horizontal' | 'vertical';
-}
-export declare function getStepsClasses(options?: StepsOptions): {
-    container: string;
-    item: string;
-    head: string;
-    line: string;
-    linePending: string;
-    lineCompleted: string;
-    icon: string;
-    iconContainer: string;
-    iconPending: string;
-    iconProcess: string;
-    iconCompleted: string;
-    content: string;
-    title: string;
-    titlePending: string;
-    titleProcess: string;
-    titleCompleted: string;
-    description: string;
-};

package/dist/components/Switch.d.ts

@@ -1,8 +0,0 @@
-export interface SwitchOptions {
-    size?: 'sm' | 'md' | 'lg';
-    color?: 'primary' | 'success';
-}
-export declare function getSwitchClasses(isOn: boolean, options?: SwitchOptions): {
-    track: string;
-    thumb: string;
-};