import * as antd_style from 'antd-style';

/**
 * 通用 antd-style 样式工厂
 *
 * 基于 antd token 系统，提供页面容器、卡片、表格、表单、操作栏，
 * 以及文字、Flex 布局、间距、颜色、溢出处理、面板、统计等通用工具类。
 *
 * 样式定义按关注点拆分为三个子文件:
 * - common-layout.ts: 页面容器、Flex、面板、列表项、定位等布局样式
 * - common-typography.ts: 文字颜色、字号、字重、标题、统计数字等排版样式
 * - common-utilities.ts: 间距、宽度、颜色、背景、边框、溢出、交互等工具类
 */
/**
 * 创建通用样式
 *
 * @example
 * ```tsx
 * const useCommonStyles = createCommonStyles();
 *
 * function MyPage() {
 *   const { styles } = useCommonStyles();
 *   return (
 *     <div className={styles.pageContainer}>
 *       <div className={styles.cardWrapper}>
 *         <ProTable className={styles.tableWrapper} />
 *       </div>
 *     </div>
 *   );
 * }
 * ```
 */
declare function createCommonStyles(): (props?: unknown) => antd_style.ReturnStyles<{
    actionsRight: string;
    marginLeftSm: string;
    marginTopSm: string;
    marginBottomSm: string;
    marginBottomMd: string;
    marginBottomLg: string;
    marginTopMd: string;
    marginTopLg: string;
    marginLeftMd: string;
    marginRightMd: string;
    paddingSm: string;
    paddingMd: string;
    paddingLg: string;
    paddingHorizontalLg: string;
    paddingVerticalMd: string;
    fullWidth: string;
    width150: string;
    width200: string;
    width400: string;
    maxWidthMd: string;
    maxWidthLg: string;
    wordBreak: string;
    colorPrimary: string;
    colorSuccess: string;
    colorWarning: string;
    colorError: string;
    colorTextSecondary: string;
    colorTextTertiary: string;
    borderRadiusSm: string;
    borderRadiusBase: string;
    borderRadiusLg: string;
    borderBottom: string;
    borderLeftActive: string;
    bgContainer: string;
    bgLayout: string;
    bgPrimaryLight: string;
    ellipsis: string;
    ellipsis2: string;
    overflowHidden: string;
    overflowAuto: string;
    cursorPointer: string;
    cursorDefault: string;
    disabled: string;
    dividerHorizontal: string;
    iconSize16: string;
    iconSize20: string;
    iconSize24: string;
    helpText: string;
    primaryText: string;
    secondaryText: string;
    tertiaryText: string;
    boldText: string;
    smallText: string;
    linkText: string;
    codeText: string;
    sectionTitle: string;
    pageTitle: string;
    fontSizeSm: string;
    fontSizeBase: string;
    fontSizeLg: string;
    fontSize12: string;
    fontSize13: string;
    fontSize14: string;
    fontSize16: string;
    fontSize20: string;
    fontSize32: string;
    fontWeight500: string;
    fontWeight600: string;
    fontMono: string;
    statNumber: string;
    statLabel: string;
    statCardPadding: string;
    pageContainer: string;
    cardWrapper: string;
    tableWrapper: string;
    formWrapper: string;
    detailHeader: string;
    actionBar: string;
    filterBar: string;
    statCard: string;
    emptyState: string;
    loadingContainer: string;
    grayContainer: string;
    scrollableGrayContainer: string;
    avatarSmall: string;
    avatarPlaceholder: string;
    avatarLarge: string;
    avatarLargePlaceholder: string;
    twoColumnRow: string;
    columnItem: string;
    flexCenter: string;
    flexCenterColumn: string;
    flexCenterBoth: string;
    flexBetween: string;
    fullHeightFlex: string;
    fullViewFlex: string;
    stickyHeader: string;
    pageHeaderBar: string;
    contentCentered: string;
    contentCard: string;
    detailContentSection: string;
    detailContentBox: string;
    listItem: string;
    listItemActive: string;
    listItemInactive: string;
    sidePanel: string;
    panelHeader: string;
    panelContent: string;
    positionRelative: string;
    positionAbsolute: string;
    positionFixed: string;
    loadingContainerFullscreen: string;
}>;

/**
 * 页面级通用样式
 */
/**
 * 创建列表页/详情页通用样式
 *
 * @example
 * ```tsx
 * const usePageStyles = createPageStyles();
 *
 * function UserListPage() {
 *   const { styles } = usePageStyles();
 *   return (
 *     <div className={styles.listPage}>
 *       <div className={styles.listHeader}>
 *         <h2>用户列表</h2>
 *         <Button type="primary">新增</Button>
 *       </div>
 *       <ProTable />
 *     </div>
 *   );
 * }
 * ```
 */
declare function createPageStyles(): (props?: unknown) => antd_style.ReturnStyles<{
    /** 列表页 */
    listPage: antd_style.SerializedStyles;
    /** 列表页头部 */
    listHeader: antd_style.SerializedStyles;
    /** 详情页 */
    detailPage: antd_style.SerializedStyles;
    /** 详情页头部 (带返回按钮) */
    detailPageHeader: antd_style.SerializedStyles;
    /** 详情内容区域 */
    detailContent: antd_style.SerializedStyles;
    /** 表单页 */
    formPage: antd_style.SerializedStyles;
    /** 表单区块 */
    formSection: antd_style.SerializedStyles;
    /** 表单底部操作栏 */
    formFooter: antd_style.SerializedStyles;
    /** 标签页内容区 */
    tabContent: antd_style.SerializedStyles;
    /** 描述列表区域 */
    descriptionSection: antd_style.SerializedStyles;
}>;

/**
 * 响应式样式工具
 */
/**
 * 创建响应式辅助样式
 *
 * 提供在不同断点下显示/隐藏元素的辅助类名。
 *
 * @example
 * ```tsx
 * const useResponsiveStyles = createResponsiveStyles();
 *
 * function MyComponent() {
 *   const { styles } = useResponsiveStyles();
 *   return (
 *     <>
 *       <div className={styles.hiddenOnMobile}>桌面端内容</div>
 *       <div className={styles.visibleOnMobile}>移动端内容</div>
 *     </>
 *   );
 * }
 * ```
 */
declare function createResponsiveStyles(): (props?: unknown) => antd_style.ReturnStyles<{
    /** 移动端隐藏 (宽度 < 768px 时隐藏) */
    hiddenOnMobile: antd_style.SerializedStyles;
    /** 仅移动端可见 (宽度 < 768px 时显示) */
    visibleOnMobile: antd_style.SerializedStyles;
    /** 平板及以下隐藏 (宽度 < 992px 时隐藏) */
    hiddenOnTablet: antd_style.SerializedStyles;
    /** 仅平板及以下可见 */
    visibleOnTablet: antd_style.SerializedStyles;
    /** 响应式容器: 移动端全宽，桌面端限制最大宽度 */
    responsiveContainer: antd_style.SerializedStyles;
    /** 响应式网格: 移动端单列，平板双列，桌面端三列 */
    responsiveGrid: antd_style.SerializedStyles;
    /** 响应式 Flex: 移动端垂直，桌面端水平 */
    responsiveFlex: antd_style.SerializedStyles;
}>;

export { createCommonStyles, createPageStyles, createResponsiveStyles };