@toss/tds-mobile 2.1.1 → 2.2.0

package/dist/esm/index.d.ts

@@ -19,6 +19,7 @@ import { FocusEventHandler } from 'react';
 import { FormEventHandler } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
+import { HTMLProps } from 'react';
 import { ImgHTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
 import type { Interpolation } from '@emotion/react';
@@ -5355,6 +5356,8 @@ declare type ExportedTextField = typeof PlainTextField & {
     format: typeof format;
 };
 
+declare type ExtendHTMLProps<Elem extends HTMLElement, T> = Omit<HTMLProps<Elem>, keyof T> & T;
+
 /**
  * @public tds
  * @name FadeIn
@@ -14940,6 +14943,39 @@ declare type SpaceProps = {
     height?: string;
 };
 
+/**
+ * @name Spacing
+ * @description Space를 주는 컴포넌트
+ *
+ * ```ts
+ * function Spacing(props: {
+ *   children?: never;
+ *   // default: 'vertical'
+ *   direction?: 'vertical' | 'horizontal';
+ *   size: string | number;
+ * }): JSX.Element;
+ * ```
+ *
+ * @example
+ * import { Spacing } from '@toss/tds-mobile';
+ *
+ * <Flex css={{ marginTop: -34 }} as="section" direction="column" align="center">
+ *   <Spacing size={40} />
+ *   <AS충족상태Header 전체조건충족={전체조건충족} />
+ *   <Spacing size={24} />
+ *   <무응답고객충족상태Details 전체조건충족={전체조건충족} noResponseInfo={exchangeStatusInfo.noResponseInfo} />
+ *   <Spacing size={16} />
+ *   <연결후24시간경과충족상태Details 전체조건충족={전체조건충족} after24Hour={exchangeStatusInfo.after24Hour} />
+ * </Flex>
+ */
+export declare const Spacing: NamedExoticComponent<SpacingProps>;
+
+declare type SpacingProps = ExtendHTMLProps<HTMLDivElement, {
+    children?: never;
+    direction?: 'vertical' | 'horizontal';
+    size: string | number;
+}>;
+
 declare const SPECIAL_KEY: {
     readonly dot: ".";
     readonly comma: ",";