This commit is contained in:
2026-03-23 03:30:31 +08:00
parent 5c6d8c6b92
commit ef6fe2e16c
6 changed files with 55 additions and 120 deletions

View File

@@ -115,7 +115,7 @@ function generateIndexFile(dirPath: string): void {
// 生成索引文件内容(模板字符串格式化)
const indexContent = `
import './index.scss';
import './index.css';
${exportStatements.join("\n")}
`;

View File

@@ -1,3 +1,4 @@
import { mergeProps } from "@base-ui/react";
import * as React from "react";
import { cn } from "tailwind-variants";
@@ -6,43 +7,25 @@ export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
}
export const Slot = React.forwardRef<HTMLElement, SlotProps>(
(
{
children,
onClick: externalOnClick,
style: styleProp,
className: classNameProp,
...props
},
ref,
) => {
if (!React.isValidElement(children)) return null;
({ children, className: externalClassName, ...restProps }, ref) => {
if (!React.isValidElement(children)) {
return null;
}
const child = children as React.ReactElement<Record<string, unknown>>;
const childProps = child.props || {};
const mergedClassName = cn(child.props.className as string, classNameProp);
const mergedClassName = cn(
childProps.className as string | undefined,
externalClassName,
);
const mergedStyle = {
...(child.props.style ?? {}),
...(styleProp ?? {}),
} as React.CSSProperties;
const childOnClick = child.props.onClick as
| ((e: React.MouseEvent<HTMLElement>) => void)
| undefined;
const mergedOnClick = (e: React.MouseEvent<HTMLElement>) => {
childOnClick?.(e);
externalOnClick?.(e);
};
const otherMergedProps = mergeProps(childProps, restProps);
return React.cloneElement(child, {
...child.props,
...props,
ref,
style: mergedStyle,
...otherMergedProps,
className: mergedClassName,
onClick: mergedOnClick,
ref,
});
},
);

View File

@@ -6,6 +6,7 @@ import { itemRootRecipe } from "@/styles/recipe/ItemRoot.recipe";
import { variantRecipe } from "@/styles/recipe/variant.recipe";
import type { ReactNode } from "react";
import { inlineRootRecipe } from "@/styles/recipe/IinlineRoot.recipe";
import { Slot } from "@/common/Slot";
type ButtonProps = CommonProps & {
size?: "md" | "lg" | "xl";
@@ -26,7 +27,7 @@ export const Button = (props: ButtonProps) => {
disabled,
icon,
iconOnly,
hideIcon,
hideIcon = false,
} = props;
const buttonCls = cn(
@@ -39,6 +40,12 @@ export const Button = (props: ButtonProps) => {
return (
<BUI.Button className={buttonCls} disabled={loading || disabled}>
{!hideIcon &&
(iconOnly ? (
<span className={iconCls}></span>
) : (
<Slot className={iconCls}>{icon}</Slot>
))}
{children}
</BUI.Button>
);

View File

@@ -3,12 +3,10 @@
@import './styles/theme/theme-variant.css';
@import './styles/utility/brand.css';
@import './styles/utility/gap.css';
@import './styles/utility/height-inline.css';
@import './styles/utility/height.css';
@import './styles/utility/loading.css';
@import './styles/utility/margin-right.css';
@import './styles/utility/margin.css';
@import './styles/utility/padding.css';
@import './styles/utility/skin.css';
@import './styles/utility/variant.css';
@import './styles/utility/width-inline.css';
@import './styles/utility/width.css';

View File

@@ -1,52 +1,34 @@
import './index.scss';
import './index.css';
export * from './assets/svg/CheckIndicatorOutlineSvg.tsx';
export * from './assets/svg/CheckIndicatorSvg.tsx';
export * from './assets/svg/ChevronRightSvg.tsx';
export * from './assets/svg/CutSvg.tsx';
export * from './assets/svg/DownloadSvg.tsx';
export * from './assets/svg/FileSvg.tsx';
export * from './assets/svg/KeySvg.tsx';
export * from './assets/svg/MoonSvg.tsx';
export * from './assets/svg/PasteSvg.tsx';
export * from './assets/svg/RadioIndicatorOutlineSvg.tsx';
export * from './assets/svg/RadioIndicatorSvg.tsx';
export * from './assets/svg/SearchSvg.tsx';
export * from './assets/svg/SettingSvg.tsx';
export * from './assets/svg/SpinnerSvg.tsx';
export * from './assets/svg/SunSvg.tsx';
export * from './assets/svg/UserSvg.tsx';
export * from './assets/svg/VolumeHighSvg.tsx';
export * from './assets/svg/VolumeLowSvg.tsx';
export * from './assets/svg/VolumeMediumSvg.tsx';
export * from './assets/svg/VolumeMuteSvg.tsx';
export * from './common/CommonProps.ts';
export * from './common/Box.tsx';
export * from './lv1-fundamental/Slot/Slot.tsx';
export * from './common/ThemeProvider/ThemeContext.ts';
export * from './common/ThemeProvider/ThemeProvider.tsx';
export * from './common/ThemeProvider/useThemeContext.ts';
export * from './lv2-sized/Root/RootInline.recipe';
export * from './lv2-sized/Root/RootInline.ts';
export * from './styles/recipe/ItemRoot.recipe.ts';
export * from './lv2-sized/ItemRoot/ItemRoot.tsx';
export * from './lv2-sized/Section/Section.recipe.ts';
export * from './lv2-sized/Section/Section.tsx';
export * from './lv3-partial/Icon/Icon.recipe.ts';
export * from './lv3-partial/Icon/Icon.tsx';
export * from './lv3-partial/Indicator/Indicator.recipe.ts';
export * from './lv3-partial/Indicator/Indicator.tsx';
export * from './lv3-partial/Label/Label.style.ts';
export * from './lv3-partial/Label/Label.tsx';
export * from './lv3-partial/Tooltip/Tooltip.tsx';
export * from './lv4-normal/Button/Button.recipe.ts';
export * from './lv4-normal/Button/Button.tsx';
export * from './lv4-normal/Checkbox/Checkbox.recipe.ts';
export * from './lv4-normal/Checkbox/Checkbox.tsx';
export * from './lv4-normal/Radio/Radio.recipe.ts';
export * from './lv4-normal/Radio/Radio.tsx';
export * from './lv4-normal/Radio/RadioGroup.recipe.ts';
export * from './lv4-normal/Radio/RadioGroup.tsx';
export * from './lv4-normal/Radio/RadioGroupContext.ts';
export * from './assets/svg/CheckIndicatorOutlineSvg';
export * from './assets/svg/CheckIndicatorSvg';
export * from './assets/svg/ChevronRightSvg';
export * from './assets/svg/CutSvg';
export * from './assets/svg/DownloadSvg';
export * from './assets/svg/FileSvg';
export * from './assets/svg/KeySvg';
export * from './assets/svg/MoonSvg';
export * from './assets/svg/PasteSvg';
export * from './assets/svg/RadioIndicatorOutlineSvg';
export * from './assets/svg/RadioIndicatorSvg';
export * from './assets/svg/SearchSvg';
export * from './assets/svg/SettingSvg';
export * from './assets/svg/SpinnerSvg';
export * from './assets/svg/SunSvg';
export * from './assets/svg/UserSvg';
export * from './assets/svg/VolumeHighSvg';
export * from './assets/svg/VolumeLowSvg';
export * from './assets/svg/VolumeMediumSvg';
export * from './assets/svg/VolumeMuteSvg';
export * from './common/Box';
export * from './common/CommonProps';
export * from './common/Slot';
export * from './common/ThemeProvider/ThemeContext';
export * from './common/ThemeProvider/ThemeProvider';
export * from './common/ThemeProvider/useThemeContext';
export * from './component/button/Button';
export * from './styles/recipe/IinlineRoot.recipe';
export * from './styles/recipe/ItemRoot.recipe';
export * from './styles/recipe/variant.recipe';