@t3q-ui/design-system 1.57.0 → 1.59.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/CHANGELOG.md +16 -0
- package/dist/{chunk-LEHEPAQO.js → chunk-GQFI5K5T.js} +6 -5
- package/dist/chunk-GQFI5K5T.js.map +1 -0
- package/dist/{chunk-Z2SHCDPP.cjs → chunk-KT6LEYWL.cjs} +6 -5
- package/dist/chunk-KT6LEYWL.cjs.map +1 -0
- package/dist/{index-ZIfOVixA.d.cts → index-CHnIxzU2.d.cts} +3 -2
- package/dist/{index-ZIfOVixA.d.ts → index-CHnIxzU2.d.ts} +3 -2
- package/dist/index.cjs +470 -458
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -4
- package/dist/index.d.ts +4 -4
- package/dist/index.js +15 -3
- package/dist/index.js.map +1 -1
- package/dist/patterns/index.cjs +69 -69
- package/dist/patterns/index.cjs.map +1 -1
- package/dist/patterns/index.d.cts +2 -2
- package/dist/patterns/index.d.ts +2 -2
- package/dist/patterns/index.js +1 -1
- package/dist/patterns/index.js.map +1 -1
- package/package.json +1 -1
- package/skills/tds/SKILL.md +9 -7
- package/skills/tds/examples/detail-page.tsx +13 -13
- package/skills/tds/examples/list-page.tsx +3 -2
- package/skills/tds/reference/components.md +7 -6
- package/dist/chunk-LEHEPAQO.js.map +0 -1
- package/dist/chunk-Z2SHCDPP.cjs.map +0 -1
|
@@ -23,7 +23,7 @@ declare const BADGE_OUTLINE_ACCENT: Record<BadgeTone, {
|
|
|
23
23
|
declare const badgeVariants: (props?: ({
|
|
24
24
|
size?: "small" | "medium" | null | undefined;
|
|
25
25
|
variant?: "primary" | "info" | "success" | "warning" | "danger" | "primaryBold" | "secondary" | "secondaryBold" | "dangerBold" | "warningBold" | "infoBold" | "etc" | "successBold" | "etcBold" | null | undefined;
|
|
26
|
-
rounded?: "full" | "
|
|
26
|
+
rounded?: "full" | "square" | null | undefined;
|
|
27
27
|
appearance?: "tint" | "outline" | null | undefined;
|
|
28
28
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
29
29
|
interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
@@ -33,6 +33,7 @@ interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<
|
|
|
33
33
|
*
|
|
34
34
|
* 언제 쓰나: 실행 중/중지/오류 같은 상태(`success`·`danger`·`warning`·`info`), 개수·등급 표시. 의미 variant 를 쓰고 색을 직접 바꾸지 않는다. `appearance='outline'` 은 흰 바탕 + 1px accent 테두리.
|
|
35
35
|
* 언제 안 쓰나: 사용자가 붙이고 뗄 수 있는 라벨(→ Tag), 클릭해 동작하는 것(→ Button), 지나가는 알림(→ Toast).
|
|
36
|
+
* 모양은 기본 pill — 상태·건수 뱃지와 빠른 필터 칩이 한 계열(2026-11-06). 4px 는 `rounded='square'`.
|
|
36
37
|
* 대신/함께: **상태 표시는 Badge 에 아이콘 + 글자** — `<Badge variant='success'><LucideIcon iconComponentName='circle-check' />완료</Badge>`(아이콘은 자식으로 바로, 16px·글자색). 별도 상태 컴포넌트는 없다(2026-10-30). 크기는 기본(`size` 를 주지 않는다). 상태값 → variant·아이콘 매핑은 소비 앱의 상수 한 곳에 둔다.
|
|
37
38
|
*/
|
|
38
39
|
declare function Badge({ className, variant, rounded, appearance, size, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
@@ -154,7 +155,7 @@ type PageHeaderState = {
|
|
|
154
155
|
/** 제목 아래 메타. 상세 화면의 핵심 정보는 여기 한 곳 — 여러 개면 `MetaGroup` + `MetaItem` — 가로로 흘려 다음 줄로(2026-10-30 사용자 결정: 메타 자리를 두 개로 나누지 않는다, 2026-11-06 격자 대신 흘림) */
|
|
155
156
|
meta?: ReactNode;
|
|
156
157
|
actions?: ReactNode;
|
|
157
|
-
/**
|
|
158
|
+
/** 제목 오른쪽 자리. 정보가 있는 작은 행동만 둔다(예: `PageHeaderRefreshButton`). 상태는 `status`·`meta` 에 두고, 장식 Tag·Badge·글자는 넣지 않는다(2026-11-06). */
|
|
158
159
|
titleRight?: ReactNode;
|
|
159
160
|
bottomLeft?: ReactNode;
|
|
160
161
|
bottomRight?: ReactNode;
|
|
@@ -23,7 +23,7 @@ declare const BADGE_OUTLINE_ACCENT: Record<BadgeTone, {
|
|
|
23
23
|
declare const badgeVariants: (props?: ({
|
|
24
24
|
size?: "small" | "medium" | null | undefined;
|
|
25
25
|
variant?: "primary" | "info" | "success" | "warning" | "danger" | "primaryBold" | "secondary" | "secondaryBold" | "dangerBold" | "warningBold" | "infoBold" | "etc" | "successBold" | "etcBold" | null | undefined;
|
|
26
|
-
rounded?: "full" | "
|
|
26
|
+
rounded?: "full" | "square" | null | undefined;
|
|
27
27
|
appearance?: "tint" | "outline" | null | undefined;
|
|
28
28
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
29
29
|
interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
@@ -33,6 +33,7 @@ interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<
|
|
|
33
33
|
*
|
|
34
34
|
* 언제 쓰나: 실행 중/중지/오류 같은 상태(`success`·`danger`·`warning`·`info`), 개수·등급 표시. 의미 variant 를 쓰고 색을 직접 바꾸지 않는다. `appearance='outline'` 은 흰 바탕 + 1px accent 테두리.
|
|
35
35
|
* 언제 안 쓰나: 사용자가 붙이고 뗄 수 있는 라벨(→ Tag), 클릭해 동작하는 것(→ Button), 지나가는 알림(→ Toast).
|
|
36
|
+
* 모양은 기본 pill — 상태·건수 뱃지와 빠른 필터 칩이 한 계열(2026-11-06). 4px 는 `rounded='square'`.
|
|
36
37
|
* 대신/함께: **상태 표시는 Badge 에 아이콘 + 글자** — `<Badge variant='success'><LucideIcon iconComponentName='circle-check' />완료</Badge>`(아이콘은 자식으로 바로, 16px·글자색). 별도 상태 컴포넌트는 없다(2026-10-30). 크기는 기본(`size` 를 주지 않는다). 상태값 → variant·아이콘 매핑은 소비 앱의 상수 한 곳에 둔다.
|
|
37
38
|
*/
|
|
38
39
|
declare function Badge({ className, variant, rounded, appearance, size, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
@@ -154,7 +155,7 @@ type PageHeaderState = {
|
|
|
154
155
|
/** 제목 아래 메타. 상세 화면의 핵심 정보는 여기 한 곳 — 여러 개면 `MetaGroup` + `MetaItem` — 가로로 흘려 다음 줄로(2026-10-30 사용자 결정: 메타 자리를 두 개로 나누지 않는다, 2026-11-06 격자 대신 흘림) */
|
|
155
156
|
meta?: ReactNode;
|
|
156
157
|
actions?: ReactNode;
|
|
157
|
-
/**
|
|
158
|
+
/** 제목 오른쪽 자리. 정보가 있는 작은 행동만 둔다(예: `PageHeaderRefreshButton`). 상태는 `status`·`meta` 에 두고, 장식 Tag·Badge·글자는 넣지 않는다(2026-11-06). */
|
|
158
159
|
titleRight?: ReactNode;
|
|
159
160
|
bottomLeft?: ReactNode;
|
|
160
161
|
bottomRight?: ReactNode;
|