@liner-fe/prism 3.6.3 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.css +939 -970
- package/lib/index.d.ts +14 -288
- package/lib/index.js +439 -790
- package/package.json +5 -4
package/lib/index.d.ts
CHANGED
|
@@ -1,21 +1,22 @@
|
|
|
1
1
|
import { SystemKeys, TypographyCaptionPrefix, TypographyParagraphPrefix, TypographyHeadingPrefix, TypographyTitlePrefix, TypographyDisplayPrefix, BasicColorType } from '@liner-fe/design-token-primitive';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import react__default, { ButtonHTMLAttributes, HTMLAttributes, JSX, ReactNode, ComponentPropsWithoutRef, InputHTMLAttributes, MouseEventHandler, ReactElement
|
|
3
|
+
import react__default, { ButtonHTMLAttributes, HTMLAttributes, JSX, ReactNode, ComponentPropsWithoutRef, InputHTMLAttributes, MouseEventHandler, ReactElement } from 'react';
|
|
4
4
|
import * as cva from 'cva';
|
|
5
5
|
import { VariantProps } from 'cva';
|
|
6
6
|
import { IconProps, IconComponentType } from '@liner-fe/icon';
|
|
7
7
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
8
8
|
import * as _artsy_fresnel_dist_Media from '@artsy/fresnel/dist/Media';
|
|
9
|
-
import { breakpointOrigin
|
|
9
|
+
import { breakpointOrigin } from '@liner-fe/design-token';
|
|
10
10
|
import { Popover as Popover$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, RadioGroup, Select as Select$1, Label as Label$1, Avatar as Avatar$1, AlertDialog as AlertDialog$1, Dialog as Dialog$1 } from 'radix-ui';
|
|
11
11
|
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
12
12
|
import { PopoverProps, PopoverPortalProps } from '@radix-ui/react-popover';
|
|
13
13
|
import { Drawer } from 'vaul';
|
|
14
|
+
export { Box, BoxProps, Container, ContainerProps, Flex, FlexProps, Grid, GridProps, Section, SectionProps } from '@radix-ui/themes';
|
|
14
15
|
|
|
15
16
|
declare const objectToArray: <T extends Record<string, unknown>>(obj: T) => [keyof T, T[keyof T]][];
|
|
16
17
|
declare const arrayToStyleObject: <T extends SystemKeys>(colorKeys: T[], style: {
|
|
17
18
|
readonly [key: string]: string;
|
|
18
|
-
}, prefix?: string) => Partial<Record<
|
|
19
|
+
}, prefix?: string) => Partial<Record<"surface-neutral-lowest" | "surface-neutral-lowest-hover" | "surface-neutral-low" | "surface-neutral-low-hover" | "surface-neutral-mid" | "surface-neutral-mid-hover" | "surface-neutral-high" | "surface-neutral-high-hover" | "surface-neutral-highest" | "surface-neutral-static-lowest" | "surface-neutral-static-lowest-hover" | "surface-neutral-variation-lowest" | "control-fill-neutral-lowest" | "control-fill-neutral-lowest-hover" | "control-fill-neutral-low" | "control-fill-neutral-low-hover" | "control-fill-neutral-mid" | "control-fill-neutral-mid-hover" | "control-fill-neutral-high" | "control-fill-neutral-high-hover" | "control-fill-neutral-highest" | "label-neutral-base" | "label-neutral-secondary" | "label-neutral-tertiary" | "label-neutral-quaternary" | "label-neutral-static" | "border-neutral-alpha-strong" | "border-neutral-alpha-normal" | "border-neutral-alpha-subtle" | "border-neutral-alpha-hint" | "border-neutral-strong" | "border-neutral-normal" | "border-neutral-subtle" | "surface-inverse-lowest" | "surface-inverse-lowest-hover" | "surface-inverse-low" | "surface-inverse-low-hover" | "surface-inverse-mid" | "surface-inverse-mid-hover" | "surface-inverse-high" | "surface-inverse-high-hover" | "surface-inverse-static-high" | "surface-inverse-static-high-hover" | "surface-inverse-highest" | "label-on-inverse-base" | "label-on-inverse-secondary" | "label-on-inverse-tertiary" | "label-on-inverse-quaternary" | "label-on-inverse-static-base" | "label-on-inverse-static-secondary" | "border-on-inverse-alpha-strong" | "border-on-inverse-alpha-normal" | "border-on-inverse-alpha-subtle" | "border-on-inverse-alpha-hint" | "border-on-inverse-strong" | "border-on-inverse-normal" | "border-on-inverse-subtle" | "control-fill-brand" | "control-fill-brand-hover" | "control-fill-brand-strong" | "control-fill-brand-faint" | "control-fill-brand-faint-hover" | "label-brand-base" | "label-brand-secondary" | "border-brand-normal" | "border-brand-strong" | "label-on-brand" | "brandinverse-fill-static-low" | "brandinverse-fill-static-low-hover" | "accent-label-base" | "accent-label-yellow" | "accent-label-mint" | "accent-label-cyan" | "accent-label-purple" | "accent-label-pink" | "accent-control-fill-base" | "positive-strong" | "negative-strong" | "negative-strong-hover" | "caution" | "highlight" | "control-fill-selected" | "control-fill-drag" | "positive-faint" | "negative-faint" | "positive-base" | "negative-base" | "link" | "overlay-dim" | "background-default" | "background-subtle" | "control-fill-neutral-opaque-lowest" | "control-fill-neutral-opaque-lowest-hover" | "control-fill-neutral-opaque-low" | "control-fill-neutral-opaque-low-hover" | "control-fill-neutral-opaque-static-lowest" | "control-fill-neutral-lowest-pressed" | "control-fill-neutral-low-pressed" | "control-fill-neutral-mid-pressed" | "control-fill-neutral-high-pressed" | "control-fill-brand-pressed" | "control-fill-brand-faint-pressed" | "surface-neutral-lowest-pressed" | "surface-neutral-low-pressed" | "surface-neutral-mid-pressed" | "surface-neutral-static-lowest-pressed" | "surface-inverse-lowest-pressed" | "surface-inverse-low-pressed" | "surface-inverse-mid-pressed" | "surface-inverse-high-pressed" | "negative-strong-pressed" | "focus", string>>;
|
|
19
20
|
declare const isEmptyObject: (obj: object) => boolean;
|
|
20
21
|
|
|
21
22
|
declare const DEFAULT_LEVEL_OPTIONS: readonly ["primary", "secondary", "tertiary", "quaternary", "quinary", "negative", "static", "inverse-static"];
|
|
@@ -253,23 +254,14 @@ type TypographyType = (props: Partial<Record<BreakPointsKey, TypoSet>> & {
|
|
|
253
254
|
}) => JSX.Element;
|
|
254
255
|
declare const Typography: TypographyType;
|
|
255
256
|
|
|
256
|
-
/**
|
|
257
|
-
* PopoverRoot
|
|
258
|
-
*/
|
|
259
257
|
interface PopoverRootProps {
|
|
260
258
|
isOpen?: boolean;
|
|
261
259
|
children?: react.ReactNode;
|
|
262
260
|
onChange?: (isOpen: boolean) => void;
|
|
263
261
|
}
|
|
264
|
-
/**
|
|
265
|
-
* PopoverTrigger
|
|
266
|
-
*/
|
|
267
262
|
interface PopoverTriggerProps {
|
|
268
263
|
by?: ReactNode;
|
|
269
264
|
}
|
|
270
|
-
/**
|
|
271
|
-
* PopoverContent
|
|
272
|
-
*/
|
|
273
265
|
interface PopoverContentProps extends HTMLAttributes<HTMLDivElement>, Popover$1.PopoverContentProps {
|
|
274
266
|
level?: 'primary' | 'secondary';
|
|
275
267
|
tag?: string;
|
|
@@ -452,22 +444,22 @@ declare const defaultTextfieldVariants: cva.CVAComponent<Omit<{
|
|
|
452
444
|
base: string;
|
|
453
445
|
variants: {
|
|
454
446
|
color: {
|
|
455
|
-
'neutral-
|
|
456
|
-
'neutral-
|
|
447
|
+
'surface-neutral-mid': string;
|
|
448
|
+
'surface-neutral-lowest': string;
|
|
457
449
|
};
|
|
458
450
|
};
|
|
459
451
|
}, "defaultVariants"> & {
|
|
460
452
|
variants: {
|
|
461
453
|
color: {
|
|
462
|
-
'neutral-
|
|
463
|
-
'neutral-
|
|
454
|
+
'surface-neutral-mid': string;
|
|
455
|
+
'surface-neutral-lowest': string;
|
|
464
456
|
};
|
|
465
457
|
};
|
|
466
458
|
defaultVariants: Omit<{}, never>;
|
|
467
459
|
}, {
|
|
468
460
|
color: {
|
|
469
|
-
'neutral-
|
|
470
|
-
'neutral-
|
|
461
|
+
'surface-neutral-mid': string;
|
|
462
|
+
'surface-neutral-lowest': string;
|
|
471
463
|
};
|
|
472
464
|
}>;
|
|
473
465
|
type TextfieldButtonProps = Omit<DefaultButtonProps, 'size'>;
|
|
@@ -483,7 +475,7 @@ interface TextfieldProps extends InputHTMLAttributes<HTMLInputElement>, VariantP
|
|
|
483
475
|
error?: string;
|
|
484
476
|
disabled?: boolean;
|
|
485
477
|
button?: TextfieldButtonProps;
|
|
486
|
-
color?: Extract<BasicColorType, 'neutral-
|
|
478
|
+
color?: Extract<BasicColorType, 'surface-neutral-mid' | 'surface-neutral-lowest'>;
|
|
487
479
|
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
488
480
|
onClear?: () => void;
|
|
489
481
|
}
|
|
@@ -846,7 +838,7 @@ interface TextButtonProps extends CommonButtonProps, VariantProps<typeof textBut
|
|
|
846
838
|
declare const TextButton: react.ForwardRefExoticComponent<TextButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
847
839
|
|
|
848
840
|
type LoadingSizeType = 'xl' | 'l' | 'm' | 's' | 'xs';
|
|
849
|
-
type LoadingLevelType = 'brand-
|
|
841
|
+
type LoadingLevelType = 'label-brand-base' | 'label-neutral-base' | 'label-neutral-static' | 'label-on-inverse-base' | 'label-on-inverse-static-base' | 'label-neutral-secondary' | 'label-on-inverse-secondary';
|
|
850
842
|
interface LoadingProps extends HTMLAttributes<HTMLSpanElement> {
|
|
851
843
|
size?: LoadingSizeType;
|
|
852
844
|
level?: LoadingLevelType;
|
|
@@ -895,7 +887,7 @@ interface LogoProps {
|
|
|
895
887
|
*/
|
|
896
888
|
height?: number;
|
|
897
889
|
/**
|
|
898
|
-
* 단색(테마 적응) 로고의 색 토큰. 기본 `brand-
|
|
890
|
+
* 단색(테마 적응) 로고의 색 토큰. 기본 `label-brand-secondary`.
|
|
899
891
|
* 고정색 로고(badge 등)에는 무시된다.
|
|
900
892
|
*/
|
|
901
893
|
fill?: BasicColorType;
|
|
@@ -1057,44 +1049,22 @@ declare const Avatar: react.ForwardRefExoticComponent<Omit<Avatar$1.AvatarProps
|
|
|
1057
1049
|
onLoadingStatusChange?: (status: AvatarLoadingStatus) => void;
|
|
1058
1050
|
} & react.RefAttributes<HTMLSpanElement>>;
|
|
1059
1051
|
|
|
1060
|
-
/**
|
|
1061
|
-
* AlertDialogRoot
|
|
1062
|
-
*
|
|
1063
|
-
* ESC·Overlay 클릭으로 닫히지 않는다. dismiss/confirm 액션이 유일한 탈출구다.
|
|
1064
|
-
*/
|
|
1065
1052
|
type AlertDialogRootProps = react.ComponentProps<typeof AlertDialog$1.Root>;
|
|
1066
|
-
/**
|
|
1067
|
-
* AlertDialogTrigger
|
|
1068
|
-
*/
|
|
1069
1053
|
interface AlertDialogTriggerProps {
|
|
1070
1054
|
by?: react.ReactNode;
|
|
1071
1055
|
}
|
|
1072
|
-
/**
|
|
1073
|
-
* AlertDialog의 액션 정의
|
|
1074
|
-
*/
|
|
1075
1056
|
interface AlertDialogAction {
|
|
1076
|
-
/** 버튼에 표시할 텍스트 */
|
|
1077
1057
|
label: string;
|
|
1078
|
-
/** 버튼 클릭 시 실행할 함수. 실행 후 dialog가 닫힌다. */
|
|
1079
1058
|
onClick?: () => void;
|
|
1080
1059
|
}
|
|
1081
1060
|
type AlertDialogConfirmAction = AlertDialogAction & {
|
|
1082
|
-
/** confirm 버튼의 레벨. 복구 비용이 큰(파괴적인) 액션은 negative를 사용한다. */
|
|
1083
1061
|
level?: 'primary' | 'negative';
|
|
1084
1062
|
};
|
|
1085
|
-
/**
|
|
1086
|
-
* AlertDialogContent
|
|
1087
|
-
*/
|
|
1088
1063
|
interface AlertDialogContentProps extends react.HTMLAttributes<HTMLDivElement> {
|
|
1089
|
-
/** 제목 (선택). 넘기면 표시되고, 없으면 렌더하지 않는다. aria-labelledby로 연결된다. */
|
|
1090
1064
|
title?: string;
|
|
1091
|
-
/** 본문. aria-describedby로 연결된다. (필수) */
|
|
1092
1065
|
description: react.ReactNode;
|
|
1093
|
-
/** 닫기(취소) 액션 (필수) */
|
|
1094
1066
|
dismiss: AlertDialogAction;
|
|
1095
|
-
/** 확인(주요 처리) 액션 (필수) */
|
|
1096
1067
|
confirm: AlertDialogConfirmAction;
|
|
1097
|
-
/** Portal이 렌더링될 컨테이너 */
|
|
1098
1068
|
container?: HTMLElement;
|
|
1099
1069
|
}
|
|
1100
1070
|
declare const AlertDialog: ((props: AlertDialogRootProps) => react_jsx_runtime.JSX.Element) & {
|
|
@@ -1104,53 +1074,25 @@ declare const AlertDialog: ((props: AlertDialogRootProps) => react_jsx_runtime.J
|
|
|
1104
1074
|
}) => react_jsx_runtime.JSX.Element;
|
|
1105
1075
|
};
|
|
1106
1076
|
|
|
1107
|
-
/**
|
|
1108
|
-
* DialogRoot
|
|
1109
|
-
*
|
|
1110
|
-
* AlertDialog와 달리 ESC·Overlay 클릭으로 닫힌다.
|
|
1111
|
-
*/
|
|
1112
1077
|
type DialogRootProps = react.ComponentProps<typeof Dialog$1.Root>;
|
|
1113
|
-
/**
|
|
1114
|
-
* DialogTrigger
|
|
1115
|
-
*/
|
|
1116
1078
|
interface DialogTriggerProps {
|
|
1117
1079
|
by?: react.ReactNode;
|
|
1118
1080
|
}
|
|
1119
|
-
/**
|
|
1120
|
-
* Dialog의 액션 정의
|
|
1121
|
-
*/
|
|
1122
1081
|
interface DialogAction {
|
|
1123
|
-
/** 버튼에 표시할 텍스트 */
|
|
1124
1082
|
label: string;
|
|
1125
|
-
/** 버튼 클릭 시 실행할 함수. 실행 후 dialog가 닫힌다. */
|
|
1126
1083
|
onClick?: () => void;
|
|
1127
1084
|
}
|
|
1128
1085
|
type DialogConfirmAction = DialogAction & {
|
|
1129
|
-
/** confirm 버튼의 레벨. 복구 비용이 큰(파괴적인) 액션은 negative를 사용한다. */
|
|
1130
1086
|
level?: 'primary' | 'negative';
|
|
1131
1087
|
};
|
|
1132
|
-
/**
|
|
1133
|
-
* DialogContent
|
|
1134
|
-
*/
|
|
1135
1088
|
interface DialogContentProps extends react.HTMLAttributes<HTMLDivElement> {
|
|
1136
|
-
/**
|
|
1137
|
-
* 상단 일러스트 슬롯 (선택). 일러스트를 넣는다. 없으면 렌더하지 않는다.
|
|
1138
|
-
* content 상단에 가운데 정렬로 노출된다. (full-bleed 아님)
|
|
1139
|
-
*/
|
|
1140
1089
|
illust?: react.ReactNode;
|
|
1141
|
-
/** 제목 (필수). aria-labelledby로 연결된다. */
|
|
1142
1090
|
title: string;
|
|
1143
|
-
/** 본문. aria-describedby로 연결된다. */
|
|
1144
1091
|
description?: react.ReactNode;
|
|
1145
|
-
/** 닫기(취소) 액션 (선택). 없으면 해당 버튼을 렌더하지 않는다. */
|
|
1146
1092
|
dismiss?: DialogAction;
|
|
1147
|
-
/** 확인(주요 처리) 액션 (선택). 없으면 해당 버튼을 렌더하지 않는다. */
|
|
1148
1093
|
confirm?: DialogConfirmAction;
|
|
1149
|
-
/** 보조 액션 (선택). primary/secondary 아래 가운데 정렬되는 텍스트 버튼. Figma `extra.items` 슬롯. */
|
|
1150
1094
|
extra?: DialogAction;
|
|
1151
|
-
/** 우상단 닫기(X) 버튼 노출 여부. 기본 true. */
|
|
1152
1095
|
showClose?: boolean;
|
|
1153
|
-
/** Portal이 렌더링될 컨테이너 */
|
|
1154
1096
|
container?: HTMLElement;
|
|
1155
1097
|
}
|
|
1156
1098
|
declare const Dialog: ((props: DialogRootProps) => react_jsx_runtime.JSX.Element) & {
|
|
@@ -1256,220 +1198,4 @@ interface RatioProps extends react.HTMLAttributes<HTMLDivElement> {
|
|
|
1256
1198
|
*/
|
|
1257
1199
|
declare const Ratio: react.ForwardRefExoticComponent<RatioProps & react.RefAttributes<HTMLDivElement>>;
|
|
1258
1200
|
|
|
1259
|
-
|
|
1260
|
-
type PaddingToken = keyof typeof vars.padding;
|
|
1261
|
-
/** gap prop 스케일. `positive-*` 계열(요소 사이 간격). */
|
|
1262
|
-
type GapToken = keyof typeof vars.gap;
|
|
1263
|
-
/** margin prop 스케일. 원시 size 스케일(`minus*`로 음수 마진 지원). */
|
|
1264
|
-
type MarginToken = keyof typeof vars.size;
|
|
1265
|
-
/** Section 세로 여백 스케일 — padding 토큰 중 `section-*` 계열만. */
|
|
1266
|
-
type SectionPaddingToken = Extract<PaddingToken, `section-${string}`>;
|
|
1267
|
-
type BoxDisplay = 'none' | 'inline' | 'inline-block' | 'block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'contents';
|
|
1268
|
-
interface PaddingProps {
|
|
1269
|
-
/** 전체 padding */
|
|
1270
|
-
p?: PaddingToken;
|
|
1271
|
-
/** 좌우 padding (padding-inline) */
|
|
1272
|
-
px?: PaddingToken;
|
|
1273
|
-
/** 상하 padding (padding-block) */
|
|
1274
|
-
py?: PaddingToken;
|
|
1275
|
-
/** padding-top */
|
|
1276
|
-
pt?: PaddingToken;
|
|
1277
|
-
/** padding-right */
|
|
1278
|
-
pr?: PaddingToken;
|
|
1279
|
-
/** padding-bottom */
|
|
1280
|
-
pb?: PaddingToken;
|
|
1281
|
-
/** padding-left */
|
|
1282
|
-
pl?: PaddingToken;
|
|
1283
|
-
}
|
|
1284
|
-
interface MarginProps {
|
|
1285
|
-
/** 전체 margin */
|
|
1286
|
-
m?: MarginToken;
|
|
1287
|
-
/** 좌우 margin (margin-inline) */
|
|
1288
|
-
mx?: MarginToken;
|
|
1289
|
-
/** 상하 margin (margin-block) */
|
|
1290
|
-
my?: MarginToken;
|
|
1291
|
-
/** margin-top */
|
|
1292
|
-
mt?: MarginToken;
|
|
1293
|
-
/** margin-right */
|
|
1294
|
-
mr?: MarginToken;
|
|
1295
|
-
/** margin-bottom */
|
|
1296
|
-
mb?: MarginToken;
|
|
1297
|
-
/** margin-left */
|
|
1298
|
-
ml?: MarginToken;
|
|
1299
|
-
}
|
|
1300
|
-
interface SizingProps {
|
|
1301
|
-
/** raw CSS 값. 예: `'100%'`, `'320px'` */
|
|
1302
|
-
width?: CSSProperties['width'];
|
|
1303
|
-
height?: CSSProperties['height'];
|
|
1304
|
-
minWidth?: CSSProperties['minWidth'];
|
|
1305
|
-
maxWidth?: CSSProperties['maxWidth'];
|
|
1306
|
-
minHeight?: CSSProperties['minHeight'];
|
|
1307
|
-
maxHeight?: CSSProperties['maxHeight'];
|
|
1308
|
-
}
|
|
1309
|
-
interface PositionProps {
|
|
1310
|
-
position?: CSSProperties['position'];
|
|
1311
|
-
inset?: CSSProperties['inset'];
|
|
1312
|
-
overflow?: CSSProperties['overflow'];
|
|
1313
|
-
}
|
|
1314
|
-
interface FlexItemProps {
|
|
1315
|
-
flexBasis?: CSSProperties['flexBasis'];
|
|
1316
|
-
flexGrow?: CSSProperties['flexGrow'];
|
|
1317
|
-
flexShrink?: CSSProperties['flexShrink'];
|
|
1318
|
-
}
|
|
1319
|
-
interface GridItemProps {
|
|
1320
|
-
gridColumn?: CSSProperties['gridColumn'];
|
|
1321
|
-
gridRow?: CSSProperties['gridRow'];
|
|
1322
|
-
gridArea?: CSSProperties['gridArea'];
|
|
1323
|
-
}
|
|
1324
|
-
/** Box가 소비하는 모든 레이아웃 prop의 합집합. Flex/Grid/Container/Section이 확장한다. */
|
|
1325
|
-
interface LayoutProps extends PaddingProps, MarginProps, SizingProps, PositionProps, FlexItemProps, GridItemProps {
|
|
1326
|
-
display?: BoxDisplay;
|
|
1327
|
-
}
|
|
1328
|
-
interface BoxProps extends LayoutProps, Omit<HTMLAttributes<HTMLElement>, 'color'> {
|
|
1329
|
-
/** 렌더할 엘리먼트. 기본 `div`. */
|
|
1330
|
-
as?: ElementType;
|
|
1331
|
-
/** true면 자식 엘리먼트에 props를 병합(radix Slot). `as`보다 우선. */
|
|
1332
|
-
asChild?: boolean;
|
|
1333
|
-
}
|
|
1334
|
-
declare const gapTok: (k?: GapToken) => string | undefined;
|
|
1335
|
-
/**
|
|
1336
|
-
* Box 레이아웃 prop들을 inline style로 해석한다.
|
|
1337
|
-
* 우선순위: 축약(p/px/py, m/mx/my) < 개별 변(pt/pr/pb/pl, mt/mr/mb/ml).
|
|
1338
|
-
*/
|
|
1339
|
-
declare function resolveLayoutStyle(props: LayoutProps): CSSProperties;
|
|
1340
|
-
/**
|
|
1341
|
-
* LayoutProps를 소비하고 나머지(HTML 속성)만 남긴다.
|
|
1342
|
-
* Flex/Grid/Container/Section이 Box에 위임할 때 자기 prop만 뽑고 나머지를 넘기기 위해 쓴다.
|
|
1343
|
-
*/
|
|
1344
|
-
declare function splitLayoutProps<T extends LayoutProps>(props: T): {
|
|
1345
|
-
layout: LayoutProps;
|
|
1346
|
-
rest: Omit<T, keyof LayoutProps>;
|
|
1347
|
-
};
|
|
1348
|
-
/** align/justify 문자열을 flexbox CSS 값으로 매핑. Flex에서 재사용. */
|
|
1349
|
-
declare const FLEX_ALIGN: {
|
|
1350
|
-
readonly start: "flex-start";
|
|
1351
|
-
readonly center: "center";
|
|
1352
|
-
readonly end: "flex-end";
|
|
1353
|
-
readonly baseline: "baseline";
|
|
1354
|
-
readonly stretch: "stretch";
|
|
1355
|
-
};
|
|
1356
|
-
declare const FLEX_JUSTIFY: {
|
|
1357
|
-
readonly start: "flex-start";
|
|
1358
|
-
readonly center: "center";
|
|
1359
|
-
readonly end: "flex-end";
|
|
1360
|
-
readonly between: "space-between";
|
|
1361
|
-
readonly around: "space-around";
|
|
1362
|
-
readonly evenly: "space-evenly";
|
|
1363
|
-
};
|
|
1364
|
-
|
|
1365
|
-
/**
|
|
1366
|
-
* 토큰 세이프한 spacing(padding/margin)·display·sizing prop을 붙인 범용 레이아웃 블록.
|
|
1367
|
-
* 너비 제약이나 정렬 의견이 없다(그건 Container/Flex의 역할). 기본 `div`로 렌더하며
|
|
1368
|
-
* `as`로 시맨틱 엘리먼트, `asChild`로 자식에 병합할 수 있다.
|
|
1369
|
-
*
|
|
1370
|
-
* ```tsx
|
|
1371
|
-
* <Box p="component-400" m="8" maxWidth="640px">…</Box>
|
|
1372
|
-
* ```
|
|
1373
|
-
*/
|
|
1374
|
-
declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLElement>>;
|
|
1375
|
-
|
|
1376
|
-
type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
|
|
1377
|
-
type FlexAlign = keyof typeof FLEX_ALIGN;
|
|
1378
|
-
type FlexJustify = keyof typeof FLEX_JUSTIFY;
|
|
1379
|
-
type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
|
|
1380
|
-
interface FlexProps extends BoxProps {
|
|
1381
|
-
/** true면 `inline-flex`로 렌더. */
|
|
1382
|
-
inline?: boolean;
|
|
1383
|
-
/** flex-direction. 기본 `row`. */
|
|
1384
|
-
direction?: FlexDirection;
|
|
1385
|
-
/** align-items. `start | center | end | baseline | stretch`. */
|
|
1386
|
-
align?: FlexAlign;
|
|
1387
|
-
/** justify-content. `start | center | end | between | around | evenly`. */
|
|
1388
|
-
justify?: FlexJustify;
|
|
1389
|
-
/** flex-wrap. 기본 `nowrap`. */
|
|
1390
|
-
wrap?: FlexWrap;
|
|
1391
|
-
/** 요소 사이 간격(gap 토큰). */
|
|
1392
|
-
gap?: GapToken;
|
|
1393
|
-
/** 가로 간격(column-gap). `gap`보다 우선. */
|
|
1394
|
-
gapX?: GapToken;
|
|
1395
|
-
/** 세로 간격(row-gap). `gap`보다 우선. */
|
|
1396
|
-
gapY?: GapToken;
|
|
1397
|
-
}
|
|
1398
|
-
/**
|
|
1399
|
-
* flexbox 컨테이너. Box 위에 flex 배치 prop(direction/align/justify/wrap/gap)을 얹는다.
|
|
1400
|
-
* 모든 Box prop(padding/margin/sizing/asChild 등)을 그대로 받는다.
|
|
1401
|
-
*
|
|
1402
|
-
* ```tsx
|
|
1403
|
-
* <Flex direction="column" gap="positive-300" align="center" p="component-400">…</Flex>
|
|
1404
|
-
* ```
|
|
1405
|
-
*/
|
|
1406
|
-
declare const Flex: react.ForwardRefExoticComponent<FlexProps & react.RefAttributes<HTMLElement>>;
|
|
1407
|
-
|
|
1408
|
-
type GridAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
|
|
1409
|
-
type GridJustify = 'start' | 'center' | 'end' | 'between';
|
|
1410
|
-
type GridFlow = 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense';
|
|
1411
|
-
interface GridProps extends BoxProps {
|
|
1412
|
-
/** true면 `inline-grid`로 렌더. */
|
|
1413
|
-
inline?: boolean;
|
|
1414
|
-
/** grid-template-columns. 숫자 N → `repeat(N, minmax(0, 1fr))`, 문자열 → 그대로. */
|
|
1415
|
-
columns?: number | string;
|
|
1416
|
-
/** grid-template-rows. 숫자 N → `repeat(N, minmax(0, 1fr))`, 문자열 → 그대로. */
|
|
1417
|
-
rows?: number | string;
|
|
1418
|
-
/** grid-auto-flow. */
|
|
1419
|
-
flow?: GridFlow;
|
|
1420
|
-
/** align-items. `start | center | end | baseline | stretch`. */
|
|
1421
|
-
align?: GridAlign;
|
|
1422
|
-
/** justify-content. `start | center | end | between`. */
|
|
1423
|
-
justify?: GridJustify;
|
|
1424
|
-
/** 셀 사이 간격(gap 토큰). */
|
|
1425
|
-
gap?: GapToken;
|
|
1426
|
-
/** 가로 간격(column-gap). `gap`보다 우선. */
|
|
1427
|
-
gapX?: GapToken;
|
|
1428
|
-
/** 세로 간격(row-gap). `gap`보다 우선. */
|
|
1429
|
-
gapY?: GapToken;
|
|
1430
|
-
}
|
|
1431
|
-
/**
|
|
1432
|
-
* CSS grid 컨테이너. Box 위에 grid 배치 prop(columns/rows/flow/align/justify/gap)을 얹는다.
|
|
1433
|
-
*
|
|
1434
|
-
* ```tsx
|
|
1435
|
-
* <Grid columns={3} gap="positive-200">…</Grid>
|
|
1436
|
-
* <Grid columns="1fr 2fr" rows="auto 1fr">…</Grid>
|
|
1437
|
-
* ```
|
|
1438
|
-
*/
|
|
1439
|
-
declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLElement>>;
|
|
1440
|
-
|
|
1441
|
-
/** Container 최대 너비 프리셋 — breakpoint 토큰 값을 재사용한다. */
|
|
1442
|
-
type ContainerSize = 's' | 'm' | 'l' | 'xl';
|
|
1443
|
-
interface ContainerProps extends BoxProps {
|
|
1444
|
-
/** 최대 너비 프리셋. 기본 `l`(1366px). `maxWidth`를 직접 주면 그 값이 우선한다. */
|
|
1445
|
-
size?: ContainerSize;
|
|
1446
|
-
}
|
|
1447
|
-
/**
|
|
1448
|
-
* 콘텐츠를 읽기 좋은 최대 너비로 제한하고 가로 중앙 정렬하는 페이지 레벨 래퍼다.
|
|
1449
|
-
* 와이드 스크린에서 본문이 화면 끝까지 늘어나지 않게 감쌀 때 쓴다.
|
|
1450
|
-
* (Box와 달리 `max-width` + 중앙정렬 의견을 가진 프리셋이다.)
|
|
1451
|
-
*
|
|
1452
|
-
* ```tsx
|
|
1453
|
-
* <Container size="l" px="component-400">…</Container>
|
|
1454
|
-
* ```
|
|
1455
|
-
*/
|
|
1456
|
-
declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLElement>>;
|
|
1457
|
-
|
|
1458
|
-
interface SectionProps extends BoxProps {
|
|
1459
|
-
/**
|
|
1460
|
-
* 세로 여백 프리셋(`section-*` 토큰). 기본 `section-400`.
|
|
1461
|
-
* `py`를 직접 주면 그 값이 우선한다.
|
|
1462
|
-
*/
|
|
1463
|
-
size?: SectionPaddingToken;
|
|
1464
|
-
}
|
|
1465
|
-
/**
|
|
1466
|
-
* 페이지를 세로로 나누는 구획이다. `section-*` 여백 스케일로 위아래 리듬을 준다.
|
|
1467
|
-
* 기본 시맨틱 엘리먼트는 `<section>`이며 `as`로 바꿀 수 있다.
|
|
1468
|
-
*
|
|
1469
|
-
* ```tsx
|
|
1470
|
-
* <Section size="section-500">…</Section>
|
|
1471
|
-
* ```
|
|
1472
|
-
*/
|
|
1473
|
-
declare const Section: react.ForwardRefExoticComponent<SectionProps & react.RefAttributes<HTMLElement>>;
|
|
1474
|
-
|
|
1475
|
-
export { AlertDialog, type AlertDialogAction, type AlertDialogConfirmAction, type AlertDialogContentProps, Avatar, type AvatarLoadingStatus, type AvatarProps, type AvatarSize, Badge, type BadgeColor, type BadgeIconProps, type BadgeProps, type BadgeSize, type BadgeVariant, BottomSheet, type BottomSheetAction, type BottomSheetConfirmAction, type BottomSheetContentProps, type BottomSheetMode, Box, type BoxDisplay, type BoxProps, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, type CompactCoachMarkContentProps, Container, type ContainerProps, type ContainerSize, DEFAULT_LEVEL_OPTIONS, DEFAULT_SIZE_OPTIONS, DefaultButton, type DefaultButtonProps, type DefaultLevelType, Dialog, type DialogAction, type DialogConfirmAction, type DialogContentProps, Display, FLEX_ALIGN, FLEX_JUSTIFY, Flex, type FlexAlign, type FlexDirection, type FlexItemProps, type FlexJustify, type FlexProps, type FlexWrap, type GapToken, Grid, type GridAlign, type GridFlow, type GridItemProps, type GridJustify, type GridProps, Heading, ICON_LEVEL_OPTIONS, ICON_SIZE_OPTIONS, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsNormalBold, type IPropsPost, type ITitleProps, IconButton, type IconButtonProps, LOGOS, Label, type LayoutProps, List, type ListGroupProps, ListItem, type ListItemProps, type ListProps, Loading, type LoadingLevelType, Logo, type LogoCategory, type LogoName, type LogoProps, type MarginProps, type MarginToken, Media, MediaContextProvider, type PaddingProps, type PaddingToken, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, type PositionProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, PrimitiveListItem, type PrimitiveListItemProps, type PromiseToastOptions, RATIO, Radio, Ratio, type RatioProps, Section, type SectionPaddingToken, type SectionProps, Select, type SelectButtonSize, type SelectContentProps, type SelectFieldSize, type SelectGroupProps, type SelectItemProps, type SelectPrimitiveItemProps, type SelectProps, type SelectTriggerProps, type SelectTriggerType, type SelectWidthOptions, type SizingProps, TEXT_LEVEL_OPTIONS, TEXT_SIZE_OPTIONS, Tag, TextButton, type TextButtonProps, type TextSizeType, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, type ToastOptions, type ToastType, Toaster, Tooltip, Typography, arrayToStyleObject, isEmptyObject, objectToArray, gapTok as resolveGapToken, resolveLayoutStyle, rootMediaStyle, splitLayoutProps, toast };
|
|
1201
|
+
export { AlertDialog, type AlertDialogAction, type AlertDialogConfirmAction, type AlertDialogContentProps, Avatar, type AvatarLoadingStatus, type AvatarProps, type AvatarSize, Badge, type BadgeColor, type BadgeIconProps, type BadgeProps, type BadgeSize, type BadgeVariant, BottomSheet, type BottomSheetAction, type BottomSheetConfirmAction, type BottomSheetContentProps, type BottomSheetMode, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, type CompactCoachMarkContentProps, DEFAULT_LEVEL_OPTIONS, DEFAULT_SIZE_OPTIONS, DefaultButton, type DefaultButtonProps, type DefaultLevelType, Dialog, type DialogAction, type DialogConfirmAction, type DialogContentProps, Display, Heading, ICON_LEVEL_OPTIONS, ICON_SIZE_OPTIONS, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsNormalBold, type IPropsPost, type ITitleProps, IconButton, type IconButtonProps, LOGOS, Label, List, type ListGroupProps, ListItem, type ListItemProps, type ListProps, Loading, type LoadingLevelType, Logo, type LogoCategory, type LogoName, type LogoProps, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, PrimitiveListItem, type PrimitiveListItemProps, type PromiseToastOptions, RATIO, Radio, Ratio, type RatioProps, Select, type SelectButtonSize, type SelectContentProps, type SelectFieldSize, type SelectGroupProps, type SelectItemProps, type SelectPrimitiveItemProps, type SelectProps, type SelectTriggerProps, type SelectTriggerType, type SelectWidthOptions, TEXT_LEVEL_OPTIONS, TEXT_SIZE_OPTIONS, Tag, TextButton, type TextButtonProps, type TextSizeType, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, type ToastOptions, type ToastType, Toaster, Tooltip, Typography, arrayToStyleObject, isEmptyObject, objectToArray, rootMediaStyle, toast };
|