@lobehub/ui 5.36.4 → 5.37.0

package/es/base-ui/ActionIcon/ActionIcon.mjs

@@ -3,7 +3,7 @@ import Icon from "../../Icon/Icon.mjs";
 import { Tooltip } from "../Tooltip/Tooltip.mjs";
 import Button from "../Button/Button.mjs";
 import { variants } from "./style.mjs";
-import { calcSize } from "./utils.mjs";
+import { calcOutdent, calcSize } from "./utils.mjs";
 import { memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cx } from "antd-style";
@@ -18,7 +18,7 @@ const resolveButtonSize = (size) => {
 	if (size === "large") return "large";
 	return "middle";
 };
-const ActionIcon = memo(({ active, className, classNames, color, danger, disabled, fill, fillOpacity, fillRule, focusable, glass, icon, loading, onClick, ref, shadow, size = "middle", spin: iconSpinning, style, styles, title, tooltipProps, variant = "borderless", ...rest }) => {
+const ActionIconImpl = memo(({ active, className, classNames, color, danger, disabled, fill, fillOpacity, fillRule, focusable, glass, icon, loading, onClick, outdent, ref, shadow, size = "middle", spin: iconSpinning, style, styles: slotStyles, title, tooltipProps, variant = "borderless", ...rest }) => {
 	const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);
 	const popupTriggerAria = rest;
 	const isPopupTrigger = popupTriggerAria["aria-haspopup"] !== void 0 || popupTriggerAria["aria-expanded"] !== void 0;
@@ -38,9 +38,11 @@ const ActionIcon = memo(({ active, className, classNames, color, danger, disable
 		spin: iconSpinning,
 		style: {
 			pointerEvents: "none",
-			...styles?.icon
+			...slotStyles?.icon
 		}
 	}) : void 0;
+	const outdentAmount = variant === "borderless" && outdent ? calcOutdent(size) : void 0;
+	const outdentMargin = outdentAmount ? outdent === "end" ? { marginInlineEnd: `-${outdentAmount}` } : { marginInlineStart: `-${outdentAmount}` } : void 0;
 	const node = /* @__PURE__ */ jsx(Button, {
 		...rest,
 		"aria-label": popupTriggerLabel,
@@ -60,10 +62,11 @@ const ActionIcon = memo(({ active, className, classNames, color, danger, disable
 		tabIndex: disabled ? -1 : 0,
 		type: resolveButtonType(variant),
 		style: {
+			...outdentMargin,
 			borderRadius,
 			height: blockSize,
 			width: blockSize,
-			...styles?.root,
+			...slotStyles?.root,
 			...style
 		},
 		onClick: handleClick
@@ -82,7 +85,8 @@ const ActionIcon = memo(({ active, className, classNames, color, danger, disable
 		children: node
 	});
 });
-ActionIcon.displayName = "BaseActionIcon";
+ActionIconImpl.displayName = "BaseActionIcon";
+const ActionIcon = ActionIconImpl;
 //#endregion
 export { ActionIcon as default };
 

package/es/base-ui/ActionIcon/ActionIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionIcon.mjs","names":[],"sources":["../../../src/base-ui/ActionIcon/ActionIcon.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { MouseEvent, Ref } from 'react';\nimport { memo, useMemo } from 'react';\n\nimport type { ButtonProps } from '@/base-ui/Button';\nimport Button from '@/base-ui/Button';\nimport Tooltip from '@/base-ui/Tooltip';\nimport Icon from '@/Icon';\n\nimport { variants } from './style';\nimport { type ActionIconProps } from './type';\nimport { calcSize } from './utils';\n\nconst resolveButtonType = (variant: ActionIconProps['variant']) => {\n  if (variant === 'filled') return 'fill' as const;\n  if (variant === 'outlined') return 'default' as const;\n  return 'text' as const;\n};\n\nconst resolveButtonSize = (size: ActionIconProps['size']) => {\n  if (size === 'small') return 'small' as const;\n  if (size === 'large') return 'large' as const;\n  return 'middle' as const;\n};\n\nconst ActionIcon = memo<ActionIconProps>(\n  ({\n    active,\n    className,\n    classNames,\n    color,\n    danger,\n    disabled,\n    fill,\n    fillOpacity,\n    fillRule,\n    focusable,\n    glass,\n    icon,\n    loading,\n    onClick,\n    ref,\n    shadow,\n    size = 'middle',\n    spin: iconSpinning,\n    style,\n    styles,\n    title,\n    tooltipProps,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);\n    const popupTriggerAria = rest as {\n      'aria-expanded'?: unknown;\n      'aria-haspopup'?: unknown;\n      'aria-label'?: string;\n    };\n    const isPopupTrigger =\n      popupTriggerAria['aria-haspopup'] !== undefined ||\n      popupTriggerAria['aria-expanded'] !== undefined;\n    const popupTriggerLabel =\n      popupTriggerAria['aria-label'] ??\n      (isPopupTrigger && typeof title === 'string' ? title : undefined);\n\n    const handleClick: ButtonProps['onClick'] = (event) => {\n      onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n    };\n\n    const iconNode = icon ? (\n      <Icon\n        className={classNames?.icon}\n        color={color}\n        fill={fill}\n        fillOpacity={fillOpacity}\n        fillRule={fillRule}\n        focusable={focusable}\n        icon={icon}\n        size={size}\n        spin={iconSpinning}\n        style={{ pointerEvents: 'none', ...styles?.icon }}\n      />\n    ) : undefined;\n\n    const node = (\n      <Button\n        {...(rest as unknown as ButtonProps)}\n        aria-label={popupTriggerLabel}\n        className={cx(variants({ active, danger, glass, shadow }), classNames?.root, className)}\n        danger={danger}\n        disabled={disabled}\n        htmlType=\"button\"\n        icon={iconNode}\n        loading={loading}\n        ref={ref as unknown as Ref<HTMLButtonElement>}\n        size={resolveButtonSize(size)}\n        tabIndex={disabled ? -1 : 0}\n        type={resolveButtonType(variant)}\n        style={{\n          borderRadius,\n          height: blockSize,\n          width: blockSize,\n          ...styles?.root,\n          ...style,\n        }}\n        onClick={handleClick}\n      />\n    );\n\n    if (!title) return node;\n\n    return (\n      <Tooltip\n        title={title}\n        {...tooltipProps}\n        styles={{\n          ...tooltipProps?.styles,\n          container: { pointerEvents: 'none', ...tooltipProps?.styles?.container },\n        }}\n      >\n        {node}\n      </Tooltip>\n    );\n  },\n);\n\nActionIcon.displayName = 'BaseActionIcon';\n\nexport default ActionIcon;\n"],"mappings":";;;;;;;;;;AAeA,MAAM,qBAAqB,YAAwC;CACjE,IAAI,YAAY,UAAU,OAAO;CACjC,IAAI,YAAY,YAAY,OAAO;CACnC,OAAO;AACT;AAEA,MAAM,qBAAqB,SAAkC;CAC3D,IAAI,SAAS,SAAS,OAAO;CAC7B,IAAI,SAAS,SAAS,OAAO;CAC7B,OAAO;AACT;AAEA,MAAM,aAAa,MAChB,EACC,QACA,WACA,YACA,OACA,QACA,UACA,MACA,aACA,UACA,WACA,OACA,MACA,SACA,SACA,KACA,QACA,OAAO,UACP,MAAM,cACN,OACA,QACA,OACA,cACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,iBAAiB,cAAc,SAAS,IAAI,GAAG,CAAC,IAAI,CAAC;CACxE,MAAM,mBAAmB;CAKzB,MAAM,iBACJ,iBAAiB,qBAAqB,KAAA,KACtC,iBAAiB,qBAAqB,KAAA;CACxC,MAAM,oBACJ,iBAAiB,kBAChB,kBAAkB,OAAO,UAAU,WAAW,QAAQ,KAAA;CAEzD,MAAM,eAAuC,UAAU;EACrD,UAAU,KAA8C;CAC1D;CAEA,MAAM,WAAW,OACf,oBAAC,MAAD;EACE,WAAW,YAAY;EAChB;EACD;EACO;EACH;EACC;EACL;EACA;EACN,MAAM;EACN,OAAO;GAAE,eAAe;GAAQ,GAAG,QAAQ;EAAK;CACjD,CAAA,IACC,KAAA;CAEJ,MAAM,OACJ,oBAAC,QAAD;EACE,GAAK;EACL,cAAY;EACZ,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAQ;GAAO;EAAO,CAAC,GAAG,YAAY,MAAM,SAAS;EAC9E;EACE;EACV,UAAS;EACT,MAAM;EACG;EACJ;EACL,MAAM,kBAAkB,IAAI;EAC5B,UAAU,WAAW,KAAK;EAC1B,MAAM,kBAAkB,OAAO;EAC/B,OAAO;GACL;GACA,QAAQ;GACR,OAAO;GACP,GAAG,QAAQ;GACX,GAAG;EACL;EACA,SAAS;CACV,CAAA;CAGH,IAAI,CAAC,OAAO,OAAO;CAEnB,OACE,oBAAC,SAAD;EACS;EACP,GAAI;EACJ,QAAQ;GACN,GAAG,cAAc;GACjB,WAAW;IAAE,eAAe;IAAQ,GAAG,cAAc,QAAQ;GAAU;EACzE;EAEC,UAAA;CACM,CAAA;AAEb,CACF;AAEA,WAAW,cAAc"}
+{"version":3,"file":"ActionIcon.mjs","names":[],"sources":["../../../src/base-ui/ActionIcon/ActionIcon.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { MouseEvent, ReactElement, Ref } from 'react';\nimport { memo, useMemo } from 'react';\n\nimport type { ButtonProps } from '@/base-ui/Button';\nimport Button from '@/base-ui/Button';\nimport Tooltip from '@/base-ui/Tooltip';\nimport Icon from '@/Icon';\n\nimport { variants } from './style';\nimport type { ActionIconOutdent, ActionIconProps, ActionIconVariant } from './type';\nimport { calcOutdent, calcSize } from './utils';\n\nconst resolveButtonType = (variant: ActionIconProps['variant']) => {\n  if (variant === 'filled') return 'fill' as const;\n  if (variant === 'outlined') return 'default' as const;\n  return 'text' as const;\n};\n\nconst resolveButtonSize = (size: ActionIconProps['size']) => {\n  if (size === 'small') return 'small' as const;\n  if (size === 'large') return 'large' as const;\n  return 'middle' as const;\n};\n\ntype ActionIconImplProps = Omit<ActionIconProps, 'outdent' | 'variant'> & {\n  outdent?: ActionIconOutdent;\n  variant?: ActionIconVariant;\n};\n\nconst ActionIconImpl = memo<ActionIconImplProps>(\n  ({\n    active,\n    className,\n    classNames,\n    color,\n    danger,\n    disabled,\n    fill,\n    fillOpacity,\n    fillRule,\n    focusable,\n    glass,\n    icon,\n    loading,\n    onClick,\n    outdent,\n    ref,\n    shadow,\n    size = 'middle',\n    spin: iconSpinning,\n    style,\n    styles: slotStyles,\n    title,\n    tooltipProps,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);\n    const popupTriggerAria = rest as {\n      'aria-expanded'?: unknown;\n      'aria-haspopup'?: unknown;\n      'aria-label'?: string;\n    };\n    const isPopupTrigger =\n      popupTriggerAria['aria-haspopup'] !== undefined ||\n      popupTriggerAria['aria-expanded'] !== undefined;\n    const popupTriggerLabel =\n      popupTriggerAria['aria-label'] ??\n      (isPopupTrigger && typeof title === 'string' ? title : undefined);\n\n    const handleClick: ButtonProps['onClick'] = (event) => {\n      onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n    };\n\n    const iconNode = icon ? (\n      <Icon\n        className={classNames?.icon}\n        color={color}\n        fill={fill}\n        fillOpacity={fillOpacity}\n        fillRule={fillRule}\n        focusable={focusable}\n        icon={icon}\n        size={size}\n        spin={iconSpinning}\n        style={{ pointerEvents: 'none', ...slotStyles?.icon }}\n      />\n    ) : undefined;\n\n    const outdentAmount = variant === 'borderless' && outdent ? calcOutdent(size) : undefined;\n    const outdentMargin = outdentAmount\n      ? outdent === 'end'\n        ? { marginInlineEnd: `-${outdentAmount}` }\n        : { marginInlineStart: `-${outdentAmount}` }\n      : undefined;\n\n    const node = (\n      <Button\n        {...(rest as unknown as ButtonProps)}\n        aria-label={popupTriggerLabel}\n        className={cx(variants({ active, danger, glass, shadow }), classNames?.root, className)}\n        danger={danger}\n        disabled={disabled}\n        htmlType=\"button\"\n        icon={iconNode}\n        loading={loading}\n        ref={ref as unknown as Ref<HTMLButtonElement>}\n        size={resolveButtonSize(size)}\n        tabIndex={disabled ? -1 : 0}\n        type={resolveButtonType(variant)}\n        style={{\n          ...outdentMargin,\n          borderRadius,\n          height: blockSize,\n          width: blockSize,\n          ...slotStyles?.root,\n          ...style,\n        }}\n        onClick={handleClick}\n      />\n    );\n\n    if (!title) return node;\n\n    return (\n      <Tooltip\n        title={title}\n        {...tooltipProps}\n        styles={{\n          ...tooltipProps?.styles,\n          container: { pointerEvents: 'none', ...tooltipProps?.styles?.container },\n        }}\n      >\n        {node}\n      </Tooltip>\n    );\n  },\n);\n\nActionIconImpl.displayName = 'BaseActionIcon';\n\nconst ActionIcon = ActionIconImpl as unknown as <V extends ActionIconVariant = 'borderless'>(\n  props: ActionIconProps<V>,\n) => ReactElement;\n\nexport default ActionIcon;\n"],"mappings":";;;;;;;;;;AAeA,MAAM,qBAAqB,YAAwC;CACjE,IAAI,YAAY,UAAU,OAAO;CACjC,IAAI,YAAY,YAAY,OAAO;CACnC,OAAO;AACT;AAEA,MAAM,qBAAqB,SAAkC;CAC3D,IAAI,SAAS,SAAS,OAAO;CAC7B,IAAI,SAAS,SAAS,OAAO;CAC7B,OAAO;AACT;AAOA,MAAM,iBAAiB,MACpB,EACC,QACA,WACA,YACA,OACA,QACA,UACA,MACA,aACA,UACA,WACA,OACA,MACA,SACA,SACA,SACA,KACA,QACA,OAAO,UACP,MAAM,cACN,OACA,QAAQ,YACR,OACA,cACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,iBAAiB,cAAc,SAAS,IAAI,GAAG,CAAC,IAAI,CAAC;CACxE,MAAM,mBAAmB;CAKzB,MAAM,iBACJ,iBAAiB,qBAAqB,KAAA,KACtC,iBAAiB,qBAAqB,KAAA;CACxC,MAAM,oBACJ,iBAAiB,kBAChB,kBAAkB,OAAO,UAAU,WAAW,QAAQ,KAAA;CAEzD,MAAM,eAAuC,UAAU;EACrD,UAAU,KAA8C;CAC1D;CAEA,MAAM,WAAW,OACf,oBAAC,MAAD;EACE,WAAW,YAAY;EAChB;EACD;EACO;EACH;EACC;EACL;EACA;EACN,MAAM;EACN,OAAO;GAAE,eAAe;GAAQ,GAAG,YAAY;EAAK;CACrD,CAAA,IACC,KAAA;CAEJ,MAAM,gBAAgB,YAAY,gBAAgB,UAAU,YAAY,IAAI,IAAI,KAAA;CAChF,MAAM,gBAAgB,gBAClB,YAAY,QACV,EAAE,iBAAiB,IAAI,gBAAgB,IACvC,EAAE,mBAAmB,IAAI,gBAAgB,IAC3C,KAAA;CAEJ,MAAM,OACJ,oBAAC,QAAD;EACE,GAAK;EACL,cAAY;EACZ,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAQ;GAAO;EAAO,CAAC,GAAG,YAAY,MAAM,SAAS;EAC9E;EACE;EACV,UAAS;EACT,MAAM;EACG;EACJ;EACL,MAAM,kBAAkB,IAAI;EAC5B,UAAU,WAAW,KAAK;EAC1B,MAAM,kBAAkB,OAAO;EAC/B,OAAO;GACL,GAAG;GACH;GACA,QAAQ;GACR,OAAO;GACP,GAAG,YAAY;GACf,GAAG;EACL;EACA,SAAS;CACV,CAAA;CAGH,IAAI,CAAC,OAAO,OAAO;CAEnB,OACE,oBAAC,SAAD;EACS;EACP,GAAI;EACJ,QAAQ;GACN,GAAG,cAAc;GACjB,WAAW;IAAE,eAAe;IAAQ,GAAG,cAAc,QAAQ;GAAU;EACzE;EAEC,UAAA;CACM,CAAA;AAEb,CACF;AAEA,eAAe,cAAc;AAE7B,MAAM,aAAa"}

package/es/base-ui/ActionIcon/index.d.mts

@@ -1,4 +1,4 @@
-import { ActionIconClassNames, ActionIconProps, ActionIconSize, ActionIconStyles } from "./type.mjs";
+import { ActionIconClassNames, ActionIconOutdent, ActionIconProps, ActionIconSize, ActionIconStyles, ActionIconVariant } from "./type.mjs";
 import ActionIcon from "./ActionIcon.mjs";
 import { styles } from "./style.mjs";
-export { type ActionIconClassNames, type ActionIconProps, type ActionIconSize, type ActionIconStyles, styles as actionIconStyles, ActionIcon as default };
+export { type ActionIconClassNames, type ActionIconOutdent, type ActionIconProps, type ActionIconSize, type ActionIconStyles, type ActionIconVariant, styles as actionIconStyles, ActionIcon as default };

package/es/base-ui/ActionIcon/type.d.mts

@@ -11,6 +11,8 @@ interface ActionIconSizeConfig extends IconSizeConfig {
   borderRadius?: number | string;
 }
 type ActionIconSize = number | IconSizeType | ActionIconSizeConfig;
+type ActionIconVariant = 'borderless' | 'filled' | 'outlined';
+type ActionIconOutdent = boolean | 'start' | 'end';
 interface ActionIconClassNames {
   icon?: string;
   root?: string;
@@ -19,7 +21,7 @@ interface ActionIconStyles {
   icon?: CSSProperties;
   root?: CSSProperties;
 }
-interface ActionIconProps extends Partial<LucideIconProps>, Omit<CenterProps, 'title' | 'children'> {
+interface BaseActionIconOwnProps extends Partial<LucideIconProps>, Omit<CenterProps, 'title' | 'children'> {
   active?: boolean;
   classNames?: ActionIconClassNames;
   danger?: boolean;
@@ -34,8 +36,20 @@ interface ActionIconProps extends Partial<LucideIconProps>, Omit<CenterProps, 't
   styles?: ActionIconStyles;
   title?: TooltipProps['title'];
   tooltipProps?: Omit<TooltipProps, 'children' | 'title'>;
-  variant?: 'borderless' | 'filled' | 'outlined';
 }
+type BorderlessOutdentProps<V extends ActionIconVariant> = [V] extends ['borderless'] ? {
+  /**
+   * Cancels this size's icon inset (half of block − glyph) with a negative
+   * margin so a borderless ActionIcon lines up with adjacent copy. `true` /
+   * `'start'` outdent the start edge; `'end'` outdents the end edge.
+   */
+  outdent?: ActionIconOutdent;
+  variant?: V;
+} : {
+  outdent?: never;
+  variant?: V;
+};
+type ActionIconProps<V extends ActionIconVariant = ActionIconVariant> = BaseActionIconOwnProps & BorderlessOutdentProps<V>;
 //#endregion
-export { ActionIconClassNames, ActionIconProps, ActionIconSize, ActionIconStyles };
+export { ActionIconClassNames, ActionIconOutdent, ActionIconProps, ActionIconSize, ActionIconStyles, ActionIconVariant };
 //# sourceMappingURL=type.d.mts.map

package/es/base-ui/ActionIcon/utils.mjs

@@ -1,5 +1,11 @@
 import { isNumber } from "es-toolkit/compat";
 //#region src/base-ui/ActionIcon/utils.ts
+const actionIconOutdent = {
+	large: 10,
+	middle: 8,
+	small: 5
+};
+const toCss = (value) => isNumber(value) ? `${value}px` : value;
 const calcSize = (iconSize) => {
 	let blockSize;
 	let borderRadius;
@@ -36,7 +42,23 @@ const calcSize = (iconSize) => {
 		borderRadius
 	};
 };
+const calcOutdent = (iconSize) => {
+	if (isNumber(iconSize)) return `${iconSize * .4}px`;
+	switch (iconSize) {
+		case "large": return `${actionIconOutdent.large}px`;
+		case "middle": return `${actionIconOutdent.middle}px`;
+		case "small": return `${actionIconOutdent.small}px`;
+		default:
+			if (iconSize) {
+				const { blockSize } = calcSize(iconSize);
+				const glyph = iconSize.size ?? 24;
+				if (isNumber(blockSize) && isNumber(glyph)) return `${Math.max(0, (blockSize - glyph) / 2)}px`;
+				return `calc((${toCss(blockSize)} - ${toCss(glyph)}) / 2)`;
+			}
+			return "0.4em";
+	}
+};
 //#endregion
-export { calcSize };
+export { actionIconOutdent, calcOutdent, calcSize };
 
 //# sourceMappingURL=utils.mjs.map

package/es/base-ui/ActionIcon/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/base-ui/ActionIcon/utils.ts"],"sourcesContent":["import { isNumber } from 'es-toolkit/compat';\n\nimport type { ActionIconSize } from './type';\n\nexport const calcSize = (iconSize?: ActionIconSize) => {\n  let blockSize: number | string;\n  let borderRadius: number | string;\n\n  if (isNumber(iconSize)) {\n    const blockSize = iconSize * 1.8;\n    return {\n      blockSize,\n      borderRadius: Math.floor(blockSize / 6),\n    };\n  }\n\n  switch (iconSize) {\n    case 'large': {\n      blockSize = 44;\n      borderRadius = 8;\n      break;\n    }\n    case 'middle': {\n      blockSize = 36;\n      borderRadius = 6;\n      break;\n    }\n    case 'small': {\n      blockSize = 24;\n      borderRadius = 4;\n      break;\n    }\n    default: {\n      if (iconSize) {\n        blockSize = iconSize?.blockSize || 36;\n        borderRadius = iconSize?.borderRadius || 6;\n      } else {\n        blockSize = '1.8em';\n        borderRadius = '0.3em';\n      }\n\n      break;\n    }\n  }\n\n  return {\n    blockSize,\n    borderRadius,\n  };\n};\n"],"mappings":";;AAIA,MAAa,YAAY,aAA8B;CACrD,IAAI;CACJ,IAAI;CAEJ,IAAI,SAAS,QAAQ,GAAG;EACtB,MAAM,YAAY,WAAW;EAC7B,OAAO;GACL;GACA,cAAc,KAAK,MAAM,YAAY,CAAC;EACxC;CACF;CAEA,QAAQ,UAAR;EACE,KAAK;GACH,YAAY;GACZ,eAAe;GACf;EAEF,KAAK;GACH,YAAY;GACZ,eAAe;GACf;EAEF,KAAK;GACH,YAAY;GACZ,eAAe;GACf;EAEF,SACE,IAAI,UAAU;GACZ,YAAY,UAAU,aAAa;GACnC,eAAe,UAAU,gBAAgB;EAC3C,OAAO;GACL,YAAY;GACZ,eAAe;EACjB;CAIJ;CAEA,OAAO;EACL;EACA;CACF;AACF"}
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/base-ui/ActionIcon/utils.ts"],"sourcesContent":["import { isNumber } from 'es-toolkit/compat';\n\nimport type { ActionIconSize } from './type';\n\nexport const actionIconOutdent = {\n  large: 10,\n  middle: 8,\n  small: 5,\n} as const;\n\nconst toCss = (value: number | string) => (isNumber(value) ? `${value}px` : value);\n\nexport const calcSize = (iconSize?: ActionIconSize) => {\n  let blockSize: number | string;\n  let borderRadius: number | string;\n\n  if (isNumber(iconSize)) {\n    const blockSize = iconSize * 1.8;\n    return {\n      blockSize,\n      borderRadius: Math.floor(blockSize / 6),\n    };\n  }\n\n  switch (iconSize) {\n    case 'large': {\n      blockSize = 44;\n      borderRadius = 8;\n      break;\n    }\n    case 'middle': {\n      blockSize = 36;\n      borderRadius = 6;\n      break;\n    }\n    case 'small': {\n      blockSize = 24;\n      borderRadius = 4;\n      break;\n    }\n    default: {\n      if (iconSize) {\n        blockSize = iconSize?.blockSize || 36;\n        borderRadius = iconSize?.borderRadius || 6;\n      } else {\n        blockSize = '1.8em';\n        borderRadius = '0.3em';\n      }\n\n      break;\n    }\n  }\n\n  return {\n    blockSize,\n    borderRadius,\n  };\n};\n\nexport const calcOutdent = (iconSize?: ActionIconSize) => {\n  if (isNumber(iconSize)) {\n    return `${iconSize * 0.4}px`;\n  }\n\n  switch (iconSize) {\n    case 'large': {\n      return `${actionIconOutdent.large}px`;\n    }\n    case 'middle': {\n      return `${actionIconOutdent.middle}px`;\n    }\n    case 'small': {\n      return `${actionIconOutdent.small}px`;\n    }\n    default: {\n      if (iconSize) {\n        const { blockSize } = calcSize(iconSize);\n        const glyph = iconSize.size ?? 24;\n        if (isNumber(blockSize) && isNumber(glyph)) {\n          return `${Math.max(0, (blockSize - glyph) / 2)}px`;\n        }\n        return `calc((${toCss(blockSize)} - ${toCss(glyph)}) / 2)`;\n      }\n      return '0.4em';\n    }\n  }\n};\n"],"mappings":";;AAIA,MAAa,oBAAoB;CAC/B,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,SAAS,UAA4B,SAAS,KAAK,IAAI,GAAG,MAAM,MAAM;AAE5E,MAAa,YAAY,aAA8B;CACrD,IAAI;CACJ,IAAI;CAEJ,IAAI,SAAS,QAAQ,GAAG;EACtB,MAAM,YAAY,WAAW;EAC7B,OAAO;GACL;GACA,cAAc,KAAK,MAAM,YAAY,CAAC;EACxC;CACF;CAEA,QAAQ,UAAR;EACE,KAAK;GACH,YAAY;GACZ,eAAe;GACf;EAEF,KAAK;GACH,YAAY;GACZ,eAAe;GACf;EAEF,KAAK;GACH,YAAY;GACZ,eAAe;GACf;EAEF,SACE,IAAI,UAAU;GACZ,YAAY,UAAU,aAAa;GACnC,eAAe,UAAU,gBAAgB;EAC3C,OAAO;GACL,YAAY;GACZ,eAAe;EACjB;CAIJ;CAEA,OAAO;EACL;EACA;CACF;AACF;AAEA,MAAa,eAAe,aAA8B;CACxD,IAAI,SAAS,QAAQ,GACnB,OAAO,GAAG,WAAW,GAAI;CAG3B,QAAQ,UAAR;EACE,KAAK,SACH,OAAO,GAAG,kBAAkB,MAAM;EAEpC,KAAK,UACH,OAAO,GAAG,kBAAkB,OAAO;EAErC,KAAK,SACH,OAAO,GAAG,kBAAkB,MAAM;EAEpC;GACE,IAAI,UAAU;IACZ,MAAM,EAAE,cAAc,SAAS,QAAQ;IACvC,MAAM,QAAQ,SAAS,QAAQ;IAC/B,IAAI,SAAS,SAAS,KAAK,SAAS,KAAK,GACvC,OAAO,GAAG,KAAK,IAAI,IAAI,YAAY,SAAS,CAAC,EAAE;IAEjD,OAAO,SAAS,MAAM,SAAS,EAAE,KAAK,MAAM,KAAK,EAAE;GACrD;GACA,OAAO;CAEX;AACF"}

package/es/base-ui/Button/Button.d.mts

@@ -1,9 +1,7 @@
-import { ButtonProps } from "./type.mjs";
+import { ButtonProps, ButtonType } from "./type.mjs";
+import { ReactElement } from "react";
 //#region src/base-ui/Button/Button.d.ts
-declare const Button: {
-  ({ block, children, className, classNames, danger, disabled, ghost, href, htmlType, icon, iconPosition, loading, onClick, ref, shape, size, styles: userStyles, target, type, ...rest }: ButtonProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Button: <T extends ButtonType = "default">(props: ButtonProps<T>) => ReactElement;
 //#endregion
 export { Button as default };
 //# sourceMappingURL=Button.d.mts.map

package/es/base-ui/Button/Button.mjs

@@ -46,7 +46,7 @@ const motionTransition = {
 	stiffness: 600,
 	type: "spring"
 };
-const Button = ({ block, children, className, classNames, danger = false, disabled, ghost = false, href, htmlType = "button", icon, iconPosition = "start", loading, onClick, ref, shape = "default", size = "middle", styles: userStyles, target, type = "default", ...rest }) => {
+const ButtonImpl = ({ block, children, className, classNames, danger = false, disabled, outdent, ghost = false, href, htmlType = "button", icon, iconPosition = "start", loading, onClick, ref, shape = "default", size = "middle", styles: userStyles, target, type = "default", ...rest }) => {
 	const Motion = useMotionComponent();
 	const isInteractionDisabled = disabled || loading;
 	const sizeCls = resolveSizeCls(size);
@@ -57,7 +57,8 @@ const Button = ({ block, children, className, classNames, danger = false, disabl
 	});
 	const shapeCls = shape === "circle" ? styles.shapeCircle : shape === "round" ? styles.shapeRound : void 0;
 	const iconOnlySizeCls = !(children !== void 0 && children !== null && children !== false && children !== "") && !!(loading || icon) ? resolveIconOnlySizeCls(size) : void 0;
-	const composedClassName = cx(styles.base, sizeCls, variantCls, shapeCls, block && styles.block, iconPosition === "end" && styles.iconEnd, iconOnlySizeCls, className);
+	const outdentCls = type === "text" && outdent ? outdent === "end" ? styles.outdentEnd : styles.outdentStart : void 0;
+	const composedClassName = cx(styles.base, sizeCls, variantCls, shapeCls, block && styles.block, iconPosition === "end" && styles.iconEnd, iconOnlySizeCls, outdentCls, className);
 	const spinnerNode = /* @__PURE__ */ jsx("span", {
 		"aria-hidden": !loading,
 		style: userStyles?.icon,
@@ -119,7 +120,8 @@ const Button = ({ block, children, className, classNames, danger = false, disabl
 		children: inner
 	});
 };
-Button.displayName = "BaseButton";
+ButtonImpl.displayName = "BaseButton";
+const Button = ButtonImpl;
 //#endregion
 export { Button as default };
 

package/es/base-ui/Button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":[],"sources":["../../../src/base-ui/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { isValidElement, type MouseEvent, type ReactNode, type Ref } from 'react';\n\nimport Icon, { type IconProps } from '@/Icon';\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { styles } from './style';\nimport type { ButtonProps } from './type';\n\nconst resolveIconNode = (node: ReactNode | IconProps['icon'] | undefined | null) => {\n  if (node === undefined || node === null) return null;\n  if (isValidElement(node) || typeof node === 'string' || typeof node === 'number') {\n    return node;\n  }\n  return <Icon icon={node as any} size={'small'} />;\n};\n\nconst resolveSizeCls = (size: ButtonProps['size']) => {\n  if (size === 'small') return styles.sizeSmall;\n  if (size === 'large') return styles.sizeLarge;\n  return styles.sizeMiddle;\n};\n\nconst resolveIconOnlySizeCls = (size: ButtonProps['size']) => {\n  if (size === 'small') return styles.iconOnlySmall;\n  if (size === 'large') return styles.iconOnlyLarge;\n  return styles.iconOnlyMiddle;\n};\n\nconst resolveVariantCls = ({\n  danger,\n  ghost,\n  type,\n}: {\n  danger: boolean;\n  ghost: boolean;\n  type: NonNullable<ButtonProps['type']>;\n}): string => {\n  // `text` and `link` already drop the surface, so `ghost` there would only cost them\n  // their own traits (link's zero inline padding).\n  if (ghost && type !== 'text' && type !== 'link') {\n    if (danger) return styles.ghostDanger;\n    if (type === 'primary') return styles.ghostPrimary;\n    return styles.ghostDefault;\n  }\n\n  switch (type) {\n    case 'primary': {\n      return danger ? styles.dangerSolid : styles.variantPrimary;\n    }\n    case 'dashed': {\n      return danger ? cx(styles.variantDashed, styles.dangerOutlined) : styles.variantDashed;\n    }\n    case 'fill': {\n      return danger ? styles.dangerFill : styles.variantFill;\n    }\n    case 'text': {\n      return danger ? cx(styles.variantText, styles.dangerInline) : styles.variantText;\n    }\n    case 'link': {\n      return danger ? cx(styles.variantLink, styles.dangerInline) : styles.variantLink;\n    }\n    default: {\n      return danger ? cx(styles.variantDefault, styles.dangerOutlined) : styles.variantDefault;\n    }\n  }\n};\n\nconst tapAnim = { scale: 0.98 };\nconst motionTransition = {\n  damping: 26,\n  mass: 0.6,\n  stiffness: 600,\n  type: 'spring' as const,\n};\n\nconst Button = ({\n  block,\n  children,\n  className,\n  classNames,\n  danger = false,\n  disabled,\n  ghost = false,\n  href,\n  htmlType = 'button',\n  icon,\n  iconPosition = 'start',\n  loading,\n  onClick,\n  ref,\n  shape = 'default',\n  size = 'middle',\n  styles: userStyles,\n  target,\n  type = 'default',\n  ...rest\n}: ButtonProps) => {\n  const Motion = useMotionComponent();\n  const isInteractionDisabled = disabled || loading;\n  const sizeCls = resolveSizeCls(size);\n  const variantCls = resolveVariantCls({ danger, ghost, type });\n  const shapeCls =\n    shape === 'circle' ? styles.shapeCircle : shape === 'round' ? styles.shapeRound : undefined;\n\n  const hasChildren =\n    children !== undefined && children !== null && children !== false && children !== '';\n  const renderIcon = loading || icon;\n  const iconOnly = !hasChildren && !!renderIcon;\n  const iconOnlySizeCls = iconOnly ? resolveIconOnlySizeCls(size) : undefined;\n\n  const composedClassName = cx(\n    styles.base,\n    sizeCls,\n    variantCls,\n    shapeCls,\n    block && styles.block,\n    iconPosition === 'end' && styles.iconEnd,\n    iconOnlySizeCls,\n    className,\n  );\n\n  const spinnerNode = (\n    <span\n      aria-hidden={!loading}\n      style={userStyles?.icon}\n      className={cx(\n        styles.iconBox,\n        styles.spinnerSlot,\n        loading && styles.spinnerSlotShow,\n        iconPosition === 'end' && styles.spinnerSlotEnd,\n        classNames?.icon,\n      )}\n    >\n      <span className={styles.spinner} />\n    </span>\n  );\n\n  const iconNode =\n    icon && !loading ? (\n      <span className={cx(styles.iconBox, classNames?.icon)} style={userStyles?.icon}>\n        {resolveIconNode(icon)}\n      </span>\n    ) : null;\n\n  const inner = (\n    <>\n      {spinnerNode}\n      {iconNode}\n      {children}\n    </>\n  );\n\n  const motionGestures = isInteractionDisabled\n    ? {}\n    : { transition: motionTransition, whileTap: tapAnim };\n\n  if (href !== undefined) {\n    const handleAnchorClick = (e: MouseEvent<HTMLAnchorElement>) => {\n      if (isInteractionDisabled) {\n        e.preventDefault();\n        return;\n      }\n      onClick?.(e as unknown as MouseEvent<HTMLButtonElement>);\n    };\n\n    return (\n      <Motion.a\n        aria-busy={loading || undefined}\n        aria-disabled={isInteractionDisabled || undefined}\n        href={disabled ? undefined : href}\n        target={target}\n        {...(rest as any)}\n        className={composedClassName}\n        ref={ref as Ref<HTMLAnchorElement>}\n        onClick={handleAnchorClick}\n        {...motionGestures}\n      >\n        {inner}\n      </Motion.a>\n    );\n  }\n\n  const handleButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n    if (isInteractionDisabled) {\n      e.preventDefault();\n      return;\n    }\n    onClick?.(e);\n  };\n\n  return (\n    <Motion.button\n      type={htmlType}\n      {...(rest as any)}\n      aria-busy={loading || undefined}\n      aria-disabled={isInteractionDisabled || undefined}\n      className={composedClassName}\n      disabled={disabled}\n      ref={ref as Ref<HTMLButtonElement>}\n      onClick={handleButtonClick}\n      {...motionGestures}\n    >\n      {inner}\n    </Motion.button>\n  );\n};\n\nButton.displayName = 'BaseButton';\n\nexport default Button;\n"],"mappings":"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"}
+{"version":3,"file":"Button.mjs","names":[],"sources":["../../../src/base-ui/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport {\n  isValidElement,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport Icon, { type IconProps } from '@/Icon';\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { styles } from './style';\nimport type { ButtonOutdent, ButtonProps, ButtonType } from './type';\n\nconst resolveIconNode = (node: ReactNode | IconProps['icon'] | undefined | null) => {\n  if (node === undefined || node === null) return null;\n  if (isValidElement(node) || typeof node === 'string' || typeof node === 'number') {\n    return node;\n  }\n  return <Icon icon={node as any} size={'small'} />;\n};\n\nconst resolveSizeCls = (size: ButtonProps['size']) => {\n  if (size === 'small') return styles.sizeSmall;\n  if (size === 'large') return styles.sizeLarge;\n  return styles.sizeMiddle;\n};\n\nconst resolveIconOnlySizeCls = (size: ButtonProps['size']) => {\n  if (size === 'small') return styles.iconOnlySmall;\n  if (size === 'large') return styles.iconOnlyLarge;\n  return styles.iconOnlyMiddle;\n};\n\nconst resolveVariantCls = ({\n  danger,\n  ghost,\n  type,\n}: {\n  danger: boolean;\n  ghost: boolean;\n  type: NonNullable<ButtonProps['type']>;\n}): string => {\n  // `text` and `link` already drop the surface, so `ghost` there would only cost them\n  // their own traits (link's zero inline padding).\n  if (ghost && type !== 'text' && type !== 'link') {\n    if (danger) return styles.ghostDanger;\n    if (type === 'primary') return styles.ghostPrimary;\n    return styles.ghostDefault;\n  }\n\n  switch (type) {\n    case 'primary': {\n      return danger ? styles.dangerSolid : styles.variantPrimary;\n    }\n    case 'dashed': {\n      return danger ? cx(styles.variantDashed, styles.dangerOutlined) : styles.variantDashed;\n    }\n    case 'fill': {\n      return danger ? styles.dangerFill : styles.variantFill;\n    }\n    case 'text': {\n      return danger ? cx(styles.variantText, styles.dangerInline) : styles.variantText;\n    }\n    case 'link': {\n      return danger ? cx(styles.variantLink, styles.dangerInline) : styles.variantLink;\n    }\n    default: {\n      return danger ? cx(styles.variantDefault, styles.dangerOutlined) : styles.variantDefault;\n    }\n  }\n};\n\nconst tapAnim = { scale: 0.98 };\nconst motionTransition = {\n  damping: 26,\n  mass: 0.6,\n  stiffness: 600,\n  type: 'spring' as const,\n};\n\ntype ButtonImplProps = Omit<ButtonProps, 'outdent' | 'type'> & {\n  outdent?: ButtonOutdent;\n  type?: ButtonType;\n};\n\nconst ButtonImpl = ({\n  block,\n  children,\n  className,\n  classNames,\n  danger = false,\n  disabled,\n  outdent,\n  ghost = false,\n  href,\n  htmlType = 'button',\n  icon,\n  iconPosition = 'start',\n  loading,\n  onClick,\n  ref,\n  shape = 'default',\n  size = 'middle',\n  styles: userStyles,\n  target,\n  type = 'default',\n  ...rest\n}: ButtonImplProps) => {\n  const Motion = useMotionComponent();\n  const isInteractionDisabled = disabled || loading;\n  const sizeCls = resolveSizeCls(size);\n  const variantCls = resolveVariantCls({ danger, ghost, type });\n  const shapeCls =\n    shape === 'circle' ? styles.shapeCircle : shape === 'round' ? styles.shapeRound : undefined;\n\n  const hasChildren =\n    children !== undefined && children !== null && children !== false && children !== '';\n  const renderIcon = loading || icon;\n  const iconOnly = !hasChildren && !!renderIcon;\n  const iconOnlySizeCls = iconOnly ? resolveIconOnlySizeCls(size) : undefined;\n\n  const outdentCls =\n    type === 'text' && outdent\n      ? outdent === 'end'\n        ? styles.outdentEnd\n        : styles.outdentStart\n      : undefined;\n\n  const composedClassName = cx(\n    styles.base,\n    sizeCls,\n    variantCls,\n    shapeCls,\n    block && styles.block,\n    iconPosition === 'end' && styles.iconEnd,\n    iconOnlySizeCls,\n    outdentCls,\n    className,\n  );\n\n  const spinnerNode = (\n    <span\n      aria-hidden={!loading}\n      style={userStyles?.icon}\n      className={cx(\n        styles.iconBox,\n        styles.spinnerSlot,\n        loading && styles.spinnerSlotShow,\n        iconPosition === 'end' && styles.spinnerSlotEnd,\n        classNames?.icon,\n      )}\n    >\n      <span className={styles.spinner} />\n    </span>\n  );\n\n  const iconNode =\n    icon && !loading ? (\n      <span className={cx(styles.iconBox, classNames?.icon)} style={userStyles?.icon}>\n        {resolveIconNode(icon)}\n      </span>\n    ) : null;\n\n  const inner = (\n    <>\n      {spinnerNode}\n      {iconNode}\n      {children}\n    </>\n  );\n\n  const motionGestures = isInteractionDisabled\n    ? {}\n    : { transition: motionTransition, whileTap: tapAnim };\n\n  if (href !== undefined) {\n    const handleAnchorClick = (e: MouseEvent<HTMLAnchorElement>) => {\n      if (isInteractionDisabled) {\n        e.preventDefault();\n        return;\n      }\n      onClick?.(e as unknown as MouseEvent<HTMLButtonElement>);\n    };\n\n    return (\n      <Motion.a\n        aria-busy={loading || undefined}\n        aria-disabled={isInteractionDisabled || undefined}\n        href={disabled ? undefined : href}\n        target={target}\n        {...(rest as any)}\n        className={composedClassName}\n        ref={ref as Ref<HTMLAnchorElement>}\n        onClick={handleAnchorClick}\n        {...motionGestures}\n      >\n        {inner}\n      </Motion.a>\n    );\n  }\n\n  const handleButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n    if (isInteractionDisabled) {\n      e.preventDefault();\n      return;\n    }\n    onClick?.(e);\n  };\n\n  return (\n    <Motion.button\n      type={htmlType}\n      {...(rest as any)}\n      aria-busy={loading || undefined}\n      aria-disabled={isInteractionDisabled || undefined}\n      className={composedClassName}\n      disabled={disabled}\n      ref={ref as Ref<HTMLButtonElement>}\n      onClick={handleButtonClick}\n      {...motionGestures}\n    >\n      {inner}\n    </Motion.button>\n  );\n};\n\nButtonImpl.displayName = 'BaseButton';\n\nconst Button = ButtonImpl as <T extends ButtonType = 'default'>(\n  props: ButtonProps<T>,\n) => ReactElement;\n\nexport default Button;\n"],"mappings":"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"}

package/es/base-ui/Button/index.d.mts

@@ -1,5 +1,5 @@
-import { ButtonIconPosition, ButtonProps, ButtonShape, ButtonSize, ButtonType } from "./type.mjs";
+import { ButtonIconPosition, ButtonOutdent, ButtonProps, ButtonShape, ButtonSize, ButtonType } from "./type.mjs";
 import Button from "./Button.mjs";
 import _default, { SplitButtonMenuProps, SplitButtonProps } from "./SplitButton.mjs";
-import { styles } from "./style.mjs";
-export { type ButtonIconPosition, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonType, _default as SplitButton, type SplitButtonMenuProps, type SplitButtonProps, styles as buttonStyles, Button as default };
+import { buttonPaddingInline, styles } from "./style.mjs";
+export { type ButtonIconPosition, type ButtonOutdent, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonType, _default as SplitButton, type SplitButtonMenuProps, type SplitButtonProps, buttonPaddingInline, styles as buttonStyles, Button as default };

package/es/base-ui/Button/style.d.mts

@@ -1,9 +1,16 @@
 //#region src/base-ui/Button/style.d.ts
+declare const buttonPaddingInline: {
+  readonly large: 16;
+  readonly middle: 14;
+  readonly small: 8;
+};
 declare const styles: {
   base: string;
   sizeSmall: string;
   sizeMiddle: string;
   sizeLarge: string;
+  outdentStart: string;
+  outdentEnd: string;
   shapeCircle: string;
   shapeRound: string;
   block: string;
@@ -31,5 +38,5 @@ declare const styles: {
   spinner: string;
 };
 //#endregion
-export { styles };
+export { buttonPaddingInline, styles };
 //# sourceMappingURL=style.d.mts.map

package/es/base-ui/Button/style.mjs

@@ -1,6 +1,11 @@
 import { controlHeight } from "../controlSize.mjs";
 import { createStaticStyles } from "antd-style";
 //#region src/base-ui/Button/style.ts
+const buttonPaddingInline = {
+	large: 16,
+	middle: 14,
+	small: 8
+};
 const styles = createStaticStyles(({ css, cssVar }) => ({
 	base: css`
     cursor: pointer;
@@ -39,22 +44,34 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `,
 	sizeSmall: css`
+    --button-padding-inline: ${buttonPaddingInline.small}px;
+
     height: ${controlHeight.small}px;
-    padding-inline: 8px;
+    padding-inline: var(--button-padding-inline);
     border-radius: ${cssVar.borderRadiusSM};
     font-size: 12px;
   `,
 	sizeMiddle: css`
+    --button-padding-inline: ${buttonPaddingInline.middle}px;
+
     height: ${controlHeight.middle}px;
-    padding-inline: 14px;
+    padding-inline: var(--button-padding-inline);
     border-radius: ${cssVar.borderRadiusSM};
     font-size: 13px;
   `,
 	sizeLarge: css`
+    --button-padding-inline: ${buttonPaddingInline.large}px;
+
     height: ${controlHeight.large}px;
-    padding-inline: 16px;
+    padding-inline: var(--button-padding-inline);
     border-radius: ${cssVar.borderRadius};
     font-size: 14px;
+  `,
+	outdentStart: css`
+    margin-inline-start: calc(var(--button-padding-inline) * -1);
+  `,
+	outdentEnd: css`
+    margin-inline-end: calc(var(--button-padding-inline) * -1);
   `,
 	shapeCircle: css`
     padding-inline: 0;
@@ -70,14 +87,20 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     flex-direction: row-reverse;
   `,
 	iconOnlySmall: css`
+    --button-padding-inline: 0px;
+
     width: 24px;
     padding-inline: 0;
   `,
 	iconOnlyMiddle: css`
+    --button-padding-inline: 0px;
+
     width: 32px;
     padding-inline: 0;
   `,
 	iconOnlyLarge: css`
+    --button-padding-inline: 0px;
+
     width: 40px;
     padding-inline: 0;
   `,
@@ -344,6 +367,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   `
 }));
 //#endregion
-export { styles };
+export { buttonPaddingInline, styles };
 
 //# sourceMappingURL=style.mjs.map

package/es/base-ui/Button/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Button/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { controlHeight } from '@/base-ui/controlSize';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  base: css`\n    cursor: pointer;\n\n    position: relative;\n\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 1px solid ${cssVar.colorBorder};\n\n    font-weight: 500;\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n\n    transition:\n      color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      background 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n    }\n\n    &:disabled,\n    &[aria-disabled='true'] {\n      pointer-events: none;\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n\n  sizeSmall: css`\n    height: ${controlHeight.small}px;\n    padding-inline: 8px;\n    border-radius: ${cssVar.borderRadiusSM};\n    font-size: 12px;\n  `,\n\n  sizeMiddle: css`\n    height: ${controlHeight.middle}px;\n    padding-inline: 14px;\n    border-radius: ${cssVar.borderRadiusSM};\n    font-size: 13px;\n  `,\n\n  sizeLarge: css`\n    height: ${controlHeight.large}px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n\n  shapeCircle: css`\n    padding-inline: 0;\n    border-radius: 50%;\n  `,\n\n  shapeRound: css`\n    border-radius: 999px;\n  `,\n\n  block: css`\n    width: 100%;\n  `,\n\n  iconEnd: css`\n    flex-direction: row-reverse;\n  `,\n\n  iconOnlySmall: css`\n    width: 24px;\n    padding-inline: 0;\n  `,\n\n  iconOnlyMiddle: css`\n    width: 32px;\n    padding-inline: 0;\n  `,\n\n  iconOnlyLarge: css`\n    width: 40px;\n    padding-inline: 0;\n  `,\n\n  iconBox: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  spinnerSlot: css`\n    overflow: hidden;\n\n    width: 0;\n    margin-inline-end: -6px;\n\n    opacity: 0;\n\n    transition:\n      width 380ms cubic-bezier(0.22, 1, 0.36, 1),\n      margin 380ms cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);\n  `,\n\n  spinnerSlotEnd: css`\n    margin-inline: -6px 0;\n  `,\n\n  spinnerSlotShow: css`\n    width: 12px;\n    margin-inline: 0;\n    opacity: 1;\n  `,\n\n  variantDefault: css`\n    background: ${cssVar.colorBgContainer};\n\n    /* &:hover/&:active included so the anchor form outranks antd's global a:hover/a:active link color */\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryBorder};\n      color: ${cssVar.colorPrimaryText};\n    }\n  `,\n\n  variantPrimary: css`\n    border-color: ${cssVar.colorPrimary};\n    background: ${cssVar.colorPrimary};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorBgLayout};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryHover};\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryActive};\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  variantDashed: css`\n    border-style: dashed;\n    background: ${cssVar.colorBgContainer};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryBorder};\n      color: ${cssVar.colorPrimaryText};\n    }\n  `,\n\n  variantFill: css`\n    border-color: transparent;\n    background: ${cssVar.colorFillTertiary};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  variantText: css`\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  variantLink: css`\n    padding-inline: 0;\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorPrimaryHover};\n      background: transparent;\n    }\n  `,\n\n  dangerOutlined: css`\n    border-color: ${cssVar.colorError};\n    background: ${cssVar.colorBgContainer};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorError};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorHover};\n      color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n\n  dangerSolid: css`\n    border-color: ${cssVar.colorError};\n    background: ${cssVar.colorError};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorBgLayout};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorErrorActive};\n    }\n  `,\n\n  dangerFill: css`\n    border-color: transparent;\n    color: ${cssVar.colorError};\n    background: ${cssVar.colorErrorBg};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorErrorBgHover};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorErrorBgHover};\n    }\n  `,\n\n  dangerInline: css`\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorError};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorHover};\n    }\n  `,\n\n  ghostDefault: css`\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  ghostPrimary: css`\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorPrimaryHover};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorPrimaryActive};\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  ghostDanger: css`\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorError};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  spinner: css`\n    @keyframes base-button-spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    display: inline-block;\n\n    width: 12px;\n    height: 12px;\n    border: 1.5px solid currentcolor;\n    border-block-start-color: transparent;\n    border-radius: 50%;\n\n    animation: base-button-spin 0.6s linear infinite;\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;wBAWa,OAAO,YAAY;;;;;;;;;;;;;;;8BAeb,OAAO,mBAAmB;;;;;;;;;;CAWtD,WAAW,GAAG;cACF,cAAc,MAAM;;qBAEb,OAAO,eAAe;;;CAIzC,YAAY,GAAG;cACH,cAAc,OAAO;;qBAEd,OAAO,eAAe;;;CAIzC,WAAW,GAAG;cACF,cAAc,MAAM;;qBAEb,OAAO,aAAa;;;CAIvC,aAAa,GAAG;;;;CAKhB,YAAY,GAAG;;;CAIf,OAAO,GAAG;;;CAIV,SAAS,GAAG;;;CAIZ,eAAe,GAAG;;;;CAKlB,gBAAgB,GAAG;;;;CAKnB,eAAe,GAAG;;;;CAKlB,SAAS,GAAG;;;;;CAMZ,aAAa,GAAG;;;;;;;;;;;;;CAchB,gBAAgB,GAAG;;;CAInB,iBAAiB,GAAG;;;;;CAMpB,gBAAgB,GAAG;kBACH,OAAO,iBAAiB;;;;;;eAM3B,OAAO,UAAU;;;;sBAIV,OAAO,mBAAmB;eACjC,OAAO,iBAAiB;;;CAIrC,gBAAgB,GAAG;oBACD,OAAO,aAAa;kBACtB,OAAO,aAAa;;;;;eAKvB,OAAO,cAAc;;;;sBAId,OAAO,kBAAkB;oBAC3B,OAAO,kBAAkB;;;;sBAIvB,OAAO,mBAAmB;oBAC5B,OAAO,mBAAmB;;;CAI5C,eAAe,GAAG;;kBAEF,OAAO,iBAAiB;;;;;eAK3B,OAAO,UAAU;;;;sBAIV,OAAO,mBAAmB;eACjC,OAAO,iBAAiB;;;CAIrC,aAAa,GAAG;;kBAEA,OAAO,kBAAkB;;;;;eAK5B,OAAO,UAAU;;;;oBAIZ,OAAO,mBAAmB;;;;oBAI1B,OAAO,UAAU;;;CAInC,aAAa,GAAG;;;;;;;eAOH,OAAO,UAAU;;;;oBAIZ,OAAO,mBAAmB;;;CAI5C,aAAa,GAAG;;;;;;;;eAQH,OAAO,aAAa;;;;eAIpB,OAAO,kBAAkB;;;;CAKtC,gBAAgB,GAAG;oBACD,OAAO,WAAW;kBACpB,OAAO,iBAAiB;;;;;eAK3B,OAAO,WAAW;;;;sBAIX,OAAO,gBAAgB;eAC9B,OAAO,gBAAgB;oBAClB,OAAO,iBAAiB;;;CAI1C,aAAa,GAAG;oBACE,OAAO,WAAW;kBACpB,OAAO,WAAW;;;;;eAKrB,OAAO,cAAc;;;;sBAId,OAAO,gBAAgB;oBACzB,OAAO,gBAAgB;;;;sBAIrB,OAAO,iBAAiB;oBAC1B,OAAO,iBAAiB;;;CAI1C,YAAY,GAAG;;aAEJ,OAAO,WAAW;kBACb,OAAO,aAAa;;;eAGvB,OAAO,gBAAgB;oBAClB,OAAO,kBAAkB;;;;eAI9B,OAAO,iBAAiB;oBACnB,OAAO,kBAAkB;;;CAI3C,cAAc,GAAG;;;;eAIJ,OAAO,WAAW;;;;eAIlB,OAAO,gBAAgB;;;CAIpC,cAAc,GAAG;;;;;;;eAOJ,OAAO,UAAU;;;;oBAIZ,OAAO,mBAAmB;;;;oBAI1B,OAAO,UAAU;;;CAInC,cAAc,GAAG;;;;;;;eAOJ,OAAO,aAAa;;;;eAIpB,OAAO,kBAAkB;oBACpB,OAAO,mBAAmB;;;;eAI/B,OAAO,mBAAmB;oBACrB,OAAO,UAAU;;;CAInC,aAAa,GAAG;;;;;;;eAOH,OAAO,WAAW;;;;eAIlB,OAAO,gBAAgB;oBAClB,OAAO,mBAAmB;;;;eAI/B,OAAO,iBAAiB;oBACnB,OAAO,UAAU;;;CAInC,SAAS,GAAG;;;;;;;;;;;;;;;;;AAiBd,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Button/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { controlHeight } from '@/base-ui/controlSize';\n\nexport const buttonPaddingInline = {\n  large: 16,\n  middle: 14,\n  small: 8,\n} as const;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  base: css`\n    cursor: pointer;\n\n    position: relative;\n\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 1px solid ${cssVar.colorBorder};\n\n    font-weight: 500;\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n\n    transition:\n      color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      background 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n    }\n\n    &:disabled,\n    &[aria-disabled='true'] {\n      pointer-events: none;\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n\n  sizeSmall: css`\n    --button-padding-inline: ${buttonPaddingInline.small}px;\n\n    height: ${controlHeight.small}px;\n    padding-inline: var(--button-padding-inline);\n    border-radius: ${cssVar.borderRadiusSM};\n    font-size: 12px;\n  `,\n\n  sizeMiddle: css`\n    --button-padding-inline: ${buttonPaddingInline.middle}px;\n\n    height: ${controlHeight.middle}px;\n    padding-inline: var(--button-padding-inline);\n    border-radius: ${cssVar.borderRadiusSM};\n    font-size: 13px;\n  `,\n\n  sizeLarge: css`\n    --button-padding-inline: ${buttonPaddingInline.large}px;\n\n    height: ${controlHeight.large}px;\n    padding-inline: var(--button-padding-inline);\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n\n  outdentStart: css`\n    margin-inline-start: calc(var(--button-padding-inline) * -1);\n  `,\n\n  outdentEnd: css`\n    margin-inline-end: calc(var(--button-padding-inline) * -1);\n  `,\n\n  shapeCircle: css`\n    padding-inline: 0;\n    border-radius: 50%;\n  `,\n\n  shapeRound: css`\n    border-radius: 999px;\n  `,\n\n  block: css`\n    width: 100%;\n  `,\n\n  iconEnd: css`\n    flex-direction: row-reverse;\n  `,\n\n  iconOnlySmall: css`\n    --button-padding-inline: 0px;\n\n    width: 24px;\n    padding-inline: 0;\n  `,\n\n  iconOnlyMiddle: css`\n    --button-padding-inline: 0px;\n\n    width: 32px;\n    padding-inline: 0;\n  `,\n\n  iconOnlyLarge: css`\n    --button-padding-inline: 0px;\n\n    width: 40px;\n    padding-inline: 0;\n  `,\n\n  iconBox: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  spinnerSlot: css`\n    overflow: hidden;\n\n    width: 0;\n    margin-inline-end: -6px;\n\n    opacity: 0;\n\n    transition:\n      width 380ms cubic-bezier(0.22, 1, 0.36, 1),\n      margin 380ms cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);\n  `,\n\n  spinnerSlotEnd: css`\n    margin-inline: -6px 0;\n  `,\n\n  spinnerSlotShow: css`\n    width: 12px;\n    margin-inline: 0;\n    opacity: 1;\n  `,\n\n  variantDefault: css`\n    background: ${cssVar.colorBgContainer};\n\n    /* &:hover/&:active included so the anchor form outranks antd's global a:hover/a:active link color */\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryBorder};\n      color: ${cssVar.colorPrimaryText};\n    }\n  `,\n\n  variantPrimary: css`\n    border-color: ${cssVar.colorPrimary};\n    background: ${cssVar.colorPrimary};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorBgLayout};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryHover};\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryActive};\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  variantDashed: css`\n    border-style: dashed;\n    background: ${cssVar.colorBgContainer};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryBorder};\n      color: ${cssVar.colorPrimaryText};\n    }\n  `,\n\n  variantFill: css`\n    border-color: transparent;\n    background: ${cssVar.colorFillTertiary};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  variantText: css`\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  variantLink: css`\n    padding-inline: 0;\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorPrimaryHover};\n      background: transparent;\n    }\n  `,\n\n  dangerOutlined: css`\n    border-color: ${cssVar.colorError};\n    background: ${cssVar.colorBgContainer};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorError};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorHover};\n      color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n\n  dangerSolid: css`\n    border-color: ${cssVar.colorError};\n    background: ${cssVar.colorError};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorBgLayout};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorErrorActive};\n    }\n  `,\n\n  dangerFill: css`\n    border-color: transparent;\n    color: ${cssVar.colorError};\n    background: ${cssVar.colorErrorBg};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorErrorBgHover};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorErrorBgHover};\n    }\n  `,\n\n  dangerInline: css`\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorError};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorHover};\n    }\n  `,\n\n  ghostDefault: css`\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  ghostPrimary: css`\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorPrimaryHover};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorPrimaryActive};\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  ghostDanger: css`\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorError};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  spinner: css`\n    @keyframes base-button-spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    display: inline-block;\n\n    width: 12px;\n    height: 12px;\n    border: 1.5px solid currentcolor;\n    border-block-start-color: transparent;\n    border-radius: 50%;\n\n    animation: base-button-spin 0.6s linear infinite;\n  `,\n}));\n"],"mappings":"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"}

package/es/base-ui/Button/type.d.mts

@@ -6,6 +6,7 @@ type ButtonType = 'default' | 'primary' | 'dashed' | 'fill' | 'link' | 'text';
 type ButtonShape = 'default' | 'circle' | 'round';
 type ButtonSize = 'small' | 'middle' | 'large';
 type ButtonIconPosition = 'start' | 'end';
+type ButtonOutdent = boolean | 'start' | 'end';
 interface BaseButtonOwnProps {
   block?: boolean;
   children?: ReactNode;
@@ -32,11 +33,22 @@ interface BaseButtonOwnProps {
     icon?: CSSProperties;
   };
   target?: string;
-  type?: ButtonType;
 }
-type NativeButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseButtonOwnProps | 'type'>;
-type NativeAnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseButtonOwnProps | 'type'>;
-type ButtonProps = BaseButtonOwnProps & NativeButtonProps & Partial<NativeAnchorProps>;
+type TextOutdentProps<T extends ButtonType> = [T] extends ['text'] ? {
+  /**
+   * Cancels this size's `padding-inline` with a negative margin so a `text`
+   * button lines up with adjacent copy. `true` / `'start'` outdent the start
+   * edge; `'end'` outdents the end edge.
+   */
+  outdent?: ButtonOutdent;
+  type?: T;
+} : {
+  outdent?: never;
+  type?: T;
+};
+type NativeButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseButtonOwnProps | 'type' | 'outdent'>;
+type NativeAnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseButtonOwnProps | 'type' | 'outdent'>;
+type ButtonProps<T extends ButtonType = ButtonType> = BaseButtonOwnProps & NativeButtonProps & Partial<NativeAnchorProps> & TextOutdentProps<T>;
 //#endregion
-export { ButtonIconPosition, ButtonProps, ButtonShape, ButtonSize, ButtonType };
+export { ButtonIconPosition, ButtonOutdent, ButtonProps, ButtonShape, ButtonSize, ButtonType };
 //# sourceMappingURL=type.d.mts.map

package/es/base-ui/Skeleton/SkeletonAvatar.mjs

@@ -1,9 +1,12 @@
 "use client";
+import { styles } from "./style.mjs";
 import Skeleton from "./Skeleton.mjs";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 //#region src/base-ui/Skeleton/SkeletonAvatar.tsx
 const DEFAULT_SIZE = 40;
-const SkeletonAvatar = ({ shape = "square", size = DEFAULT_SIZE, width, height, ...rest }) => /* @__PURE__ */ jsx(Skeleton, {
+const SkeletonAvatar = ({ shape = "square", size = DEFAULT_SIZE, width, height, className, ...rest }) => /* @__PURE__ */ jsx(Skeleton, {
+	className: cx(styles.avatar, className),
 	height: height ?? size,
 	radius: shape === "circle" ? "50%" : void 0,
 	width: width ?? size,

package/es/base-ui/Skeleton/SkeletonAvatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonAvatar.mjs","names":[],"sources":["../../../src/base-ui/Skeleton/SkeletonAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport Skeleton from './Skeleton';\nimport type { SkeletonAvatarProps } from './type';\n\nconst DEFAULT_SIZE = 40;\n\nconst SkeletonAvatar: FC<SkeletonAvatarProps> = ({\n  shape = 'square',\n  size = DEFAULT_SIZE,\n  width,\n  height,\n  ...rest\n}) => (\n  <Skeleton\n    height={height ?? size}\n    radius={shape === 'circle' ? '50%' : undefined}\n    width={width ?? size}\n    {...rest}\n  />\n);\n\nSkeletonAvatar.displayName = 'SkeletonAvatar';\n\nexport default SkeletonAvatar;\n"],"mappings":";;;;AAOA,MAAM,eAAe;AAErB,MAAM,kBAA2C,EAC/C,QAAQ,UACR,OAAO,cACP,OACA,QACA,GAAG,WAEH,oBAAC,UAAD;CACE,QAAQ,UAAU;CAClB,QAAQ,UAAU,WAAW,QAAQ,KAAA;CACrC,OAAO,SAAS;CAChB,GAAI;AACL,CAAA;AAGH,eAAe,cAAc"}
+{"version":3,"file":"SkeletonAvatar.mjs","names":[],"sources":["../../../src/base-ui/Skeleton/SkeletonAvatar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport Skeleton from './Skeleton';\nimport { styles } from './style';\nimport type { SkeletonAvatarProps } from './type';\n\nconst DEFAULT_SIZE = 40;\n\nconst SkeletonAvatar: FC<SkeletonAvatarProps> = ({\n  shape = 'square',\n  size = DEFAULT_SIZE,\n  width,\n  height,\n  className,\n  ...rest\n}) => (\n  <Skeleton\n    className={cx(styles.avatar, className)}\n    height={height ?? size}\n    radius={shape === 'circle' ? '50%' : undefined}\n    width={width ?? size}\n    {...rest}\n  />\n);\n\nSkeletonAvatar.displayName = 'SkeletonAvatar';\n\nexport default SkeletonAvatar;\n"],"mappings":";;;;;;AASA,MAAM,eAAe;AAErB,MAAM,kBAA2C,EAC/C,QAAQ,UACR,OAAO,cACP,OACA,QACA,WACA,GAAG,WAEH,oBAAC,UAAD;CACE,WAAW,GAAG,OAAO,QAAQ,SAAS;CACtC,QAAQ,UAAU;CAClB,QAAQ,UAAU,WAAW,QAAQ,KAAA;CACrC,OAAO,SAAS;CAChB,GAAI;AACL,CAAA;AAGH,eAAe,cAAc"}

package/es/base-ui/Skeleton/style.mjs

@@ -21,13 +21,15 @@ const fade = keyframes`
 `;
 const styles = createStaticStyles(({ css, cssVar }) => {
 	return {
+		avatar: css`
+      flex: none;
+    `,
 		base: css`
       user-select: none;
 
       position: relative;
 
       overflow: hidden;
-      flex: none;
 
       border-radius: ${cssVar.borderRadius};
 

package/es/base-ui/Skeleton/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Skeleton/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\n\nconst sweep = keyframes`\n  0% {\n    translate: -100% 0;\n  }\n\n  100% {\n    translate: 100% 0;\n  }\n`;\n\nconst fade = keyframes`\n  0%,\n  100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: .5;\n  }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    base: css`\n      user-select: none;\n\n      position: relative;\n\n      overflow: hidden;\n      flex: none;\n\n      border-radius: ${cssVar.borderRadius};\n\n      background: ${cssVar.colorFillContent};\n\n      @media (prefers-reduced-motion: reduce) {\n        animation: none;\n\n        &::after {\n          display: none;\n        }\n      }\n    `,\n\n    fade: css`\n      will-change: opacity;\n      animation: ${fade} 1.6s ease-in-out infinite;\n    `,\n\n    sweep: css`\n      &::after {\n        pointer-events: none;\n        will-change: transform;\n        content: '';\n\n        position: absolute;\n        inset: 0;\n\n        background: linear-gradient(\n          90deg,\n          transparent 0%,\n          ${cssVar.colorFill} 50%,\n          transparent 100%\n        );\n\n        animation: ${sweep} 1.4s ease infinite;\n      }\n    `,\n\n    text: css`\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAM,QAAQ,SAAS;;;;;;;;;AAUvB,MAAM,OAAO,SAAS;;;;;;;;;;AAWtB,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,MAAM,GAAG;;;;;;;;uBAQU,OAAO,aAAa;;oBAEvB,OAAO,iBAAiB;;;;;;;;;;EAWxC,MAAM,GAAG;;mBAEM,KAAK;;EAGpB,OAAO,GAAG;;;;;;;;;;;;YAYF,OAAO,UAAU;;;;qBAIR,MAAM;;;EAIvB,MAAM,GAAG;;;;;CAKX;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Skeleton/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\n\nconst sweep = keyframes`\n  0% {\n    translate: -100% 0;\n  }\n\n  100% {\n    translate: 100% 0;\n  }\n`;\n\nconst fade = keyframes`\n  0%,\n  100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: .5;\n  }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    avatar: css`\n      flex: none;\n    `,\n\n    base: css`\n      user-select: none;\n\n      position: relative;\n\n      overflow: hidden;\n\n      border-radius: ${cssVar.borderRadius};\n\n      background: ${cssVar.colorFillContent};\n\n      @media (prefers-reduced-motion: reduce) {\n        animation: none;\n\n        &::after {\n          display: none;\n        }\n      }\n    `,\n\n    fade: css`\n      will-change: opacity;\n      animation: ${fade} 1.6s ease-in-out infinite;\n    `,\n\n    sweep: css`\n      &::after {\n        pointer-events: none;\n        will-change: transform;\n        content: '';\n\n        position: absolute;\n        inset: 0;\n\n        background: linear-gradient(\n          90deg,\n          transparent 0%,\n          ${cssVar.colorFill} 50%,\n          transparent 100%\n        );\n\n        animation: ${sweep} 1.4s ease infinite;\n      }\n    `,\n\n    text: css`\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAM,QAAQ,SAAS;;;;;;;;;AAUvB,MAAM,OAAO,SAAS;;;;;;;;;;AAWtB,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,QAAQ,GAAG;;;EAIX,MAAM,GAAG;;;;;;;uBAOU,OAAO,aAAa;;oBAEvB,OAAO,iBAAiB;;;;;;;;;;EAWxC,MAAM,GAAG;;mBAEM,KAAK;;EAGpB,OAAO,GAAG;;;;;;;;;;;;YAYF,OAAO,UAAU;;;;qBAIR,MAAM;;;EAIvB,MAAM,GAAG;;;;;CAKX;AACF,CAAC"}