@sxo/ui 0.0.0

package/README.md

@@ -0,0 +1,35 @@
+# @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`）之间的桥梁。它确保了不同框架下的组件在样式表现和属性接口上的一致性。

package/dist/components/Accordion.d.ts

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,9 @@
+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

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

package/dist/components/Badge.d.ts

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,11 @@
+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

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

package/dist/components/Steps.d.ts

@@ -0,0 +1,22 @@
+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

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

package/dist/components/Table.d.ts

@@ -0,0 +1,19 @@
+export interface TableOptions {
+    size?: 'sm' | 'md' | 'lg';
+    hover?: boolean;
+    striped?: boolean;
+    border?: boolean;
+}
+export declare function getTableClasses(options?: TableOptions): {
+    container: string;
+    table: string;
+    thead: string;
+    th: string;
+    tr: string;
+    trSelected: string;
+    trStriped: string;
+    td: string;
+    pagination: string;
+    empty: string;
+    loading: string;
+};

package/dist/components/Tabs.d.ts

@@ -0,0 +1,9 @@
+export interface TabsOptions {
+    variant?: 'line' | 'pill';
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function getTabsClasses(options?: TabsOptions): {
+    list: string;
+    tab: (isActive: boolean) => string;
+    panel: string;
+};

package/dist/components/Tag.d.ts

@@ -0,0 +1,11 @@
+export interface TagOptions {
+    variant?: 'solid' | 'outline' | 'subtle';
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral';
+    rounded?: 'none' | 'sm' | 'md' | 'full';
+    size?: 'sm' | 'md' | 'lg';
+    closable?: boolean;
+}
+export declare function getTagClasses(options?: TagOptions): {
+    base: string;
+    closeIcon: string;
+};

package/dist/components/Timeline.d.ts

@@ -0,0 +1,13 @@
+export interface TimelineOptions {
+    mode?: 'left' | 'alternate' | 'right';
+}
+export declare function getTimelineClasses(options?: TimelineOptions): {
+    container: string;
+    item: string;
+    tail: string;
+    dot: string;
+    content: string;
+    label: string;
+    title: string;
+    description: string;
+};

package/dist/components/Toast.d.ts

@@ -0,0 +1,13 @@
+export interface ToastStylesOptions {
+    type?: 'info' | 'success' | 'warning' | 'error';
+    position?: 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+export declare function getToastClasses(options?: ToastStylesOptions): {
+    container: string;
+    item: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: string;
+    close: string;
+};

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,7 @@
+export interface TooltipOptions {
+    variant?: 'dark' | 'light';
+}
+export declare function getTooltipClasses(options?: TooltipOptions): {
+    content: string;
+    arrow: string;
+};

package/dist/components/Transfer.d.ts

@@ -0,0 +1,20 @@
+export interface TransferOptions {
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function getTransferClasses(options?: TransferOptions): {
+    container: string;
+    list: string;
+    header: string;
+    headerTitle: string;
+    headerCount: string;
+    search: string;
+    body: string;
+    item: string;
+    itemSelected: string;
+    itemDisabled: string;
+    itemLabel: string;
+    actions: string;
+    actionButton: string;
+    footer: string;
+    empty: string;
+};

package/dist/components/Tree.d.ts

@@ -0,0 +1,11 @@
+export declare function getTreeClasses(): {
+    container: string;
+    node: string;
+    content: string;
+    contentActive: string;
+    expandIcon: string;
+    expandIconOpen: string;
+    label: string;
+    children: string;
+    empty: string;
+};

package/dist/components/TreeSelect.d.ts

@@ -0,0 +1,13 @@
+export interface TreeSelectOptions {
+    size?: 'sm' | 'md' | 'lg';
+    rounded?: boolean;
+}
+export declare function getTreeSelectClasses(options?: TreeSelectOptions): {
+    container: string;
+    input: string;
+    icon: string;
+    iconOpen: string;
+    dropdown: string;
+    treeContainer: string;
+    empty: string;
+};