@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.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, CSSProperties, ElementType } from 'react';
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, vars } from '@liner-fe/design-token';
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<SystemKeys, string>>;
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-container-mid': string;
456
- 'neutral-container-lowest': string;
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-container-mid': string;
463
- 'neutral-container-lowest': string;
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-container-mid': string;
470
- 'neutral-container-lowest': string;
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-container-mid' | 'neutral-container-lowest'>;
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-label-primary' | 'neutral-label-primary' | 'neutral-label-static-primary' | 'inverse-label-primary' | 'inverse-label-static-primary' | 'neutral-label-secondary' | 'inverse-label-secondary';
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-label-secondary`.
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
- /** padding prop 스케일. `component-*`(컴포넌트 내부 여백) / `section-*`(섹션 여백) 계열. */
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 };