@1d1s/design-system 1.2.9 → 1.3.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/dist/components/AchievementBadge/AchievementBadge.d.ts +3 -1
- package/dist/components/StatCard/StatCard.d.ts +3 -1
- package/dist/components/Streak/Streak.d.ts +3 -1
- package/dist/components/Stripe/Stripe.d.ts +3 -1
- package/dist/index.es.js +76 -76
- package/package.json +1 -1
- package/src/styles/animation.css +30 -0
|
@@ -10,6 +10,8 @@ export interface AchievementBadgeProps extends Omit<React.HTMLAttributes<HTMLDiv
|
|
|
10
10
|
emoji: React.ReactNode;
|
|
11
11
|
/** 배지 라벨 */
|
|
12
12
|
label: React.ReactNode;
|
|
13
|
+
/** 새로 해금된 순간 1회 pop 연출 (해금 모먼트용) */
|
|
14
|
+
justUnlocked?: boolean;
|
|
13
15
|
}
|
|
14
16
|
/**
|
|
15
17
|
* AchievementBadge
|
|
@@ -25,5 +27,5 @@ export interface AchievementBadgeProps extends Omit<React.HTMLAttributes<HTMLDiv
|
|
|
25
27
|
* <AchievementBadge emoji="🏆" label="첫 완주" tone="peach" layout="horizontal" />
|
|
26
28
|
* ```
|
|
27
29
|
*/
|
|
28
|
-
export declare function AchievementBadge({ emoji, label, tone, layout, size, className, ...props }: AchievementBadgeProps): React.ReactElement;
|
|
30
|
+
export declare function AchievementBadge({ emoji, label, tone, layout, size, justUnlocked, className, ...props }: AchievementBadgeProps): React.ReactElement;
|
|
29
31
|
export {};
|
|
@@ -11,6 +11,8 @@ export interface StatCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
11
11
|
value: React.ReactNode;
|
|
12
12
|
/** 보조 텍스트 (값 아래 소형 메타) */
|
|
13
13
|
helper?: React.ReactNode;
|
|
14
|
+
/** value가 바뀔 때 숫자에 pop 애니메이션 (최초 마운트 시엔 미동작) */
|
|
15
|
+
animateOnChange?: boolean;
|
|
14
16
|
}
|
|
15
17
|
/**
|
|
16
18
|
* StatCard
|
|
@@ -25,5 +27,5 @@ export interface StatCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
25
27
|
* <StatCard label="작성한 일지" value="48" helper="이번 달 +12" />
|
|
26
28
|
* ```
|
|
27
29
|
*/
|
|
28
|
-
export declare function StatCard({ label, value, helper, tone, size, className, ...props }: StatCardProps): React.ReactElement;
|
|
30
|
+
export declare function StatCard({ label, value, helper, tone, size, animateOnChange, className, ...props }: StatCardProps): React.ReactElement;
|
|
29
31
|
export {};
|
|
@@ -19,6 +19,8 @@ export interface StreakProps {
|
|
|
19
19
|
* 버튼, 링크 등 인터랙티브 요소를 넣을 수 있습니다.
|
|
20
20
|
*/
|
|
21
21
|
renderCellActions?: (item: StreakData) => React.ReactNode;
|
|
22
|
+
/** 마지막(오늘) 셀에 펄스 링으로 주의 환기 (default false) */
|
|
23
|
+
highlightLast?: boolean;
|
|
22
24
|
}
|
|
23
25
|
/**
|
|
24
26
|
* Streak
|
|
@@ -28,4 +30,4 @@ export interface StreakProps {
|
|
|
28
30
|
* - 데스크탑: hover 시 날짜/활동 정보 팝오버 표시
|
|
29
31
|
* - 모바일: 클릭 시 테두리 + 정보 팝오버 표시, renderCellActions로 액션 영역 추가 가능
|
|
30
32
|
*/
|
|
31
|
-
export declare function Streak({ data, size, gap, className, renderCellActions, }: StreakProps): React.ReactElement;
|
|
33
|
+
export declare function Streak({ data, size, gap, className, renderCellActions, highlightLast, }: StreakProps): React.ReactElement;
|
|
@@ -11,6 +11,8 @@ export interface StripeProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
11
11
|
radius?: number | string;
|
|
12
12
|
/** 높이 (default `100%` — 부모를 채움) */
|
|
13
13
|
height?: number | string;
|
|
14
|
+
/** 사선 줄무늬가 흐르는 shimmer 애니메이션 (로딩 표시용, default false) */
|
|
15
|
+
animated?: boolean;
|
|
14
16
|
}
|
|
15
17
|
/**
|
|
16
18
|
* Stripe (Placeholder)
|
|
@@ -26,4 +28,4 @@ export interface StripeProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
26
28
|
* <Stripe tone="#c8f4e1" />
|
|
27
29
|
* ```
|
|
28
30
|
*/
|
|
29
|
-
export declare function Stripe({ tone, label, radius, height, className, style, ...props }: StripeProps): React.ReactElement;
|
|
31
|
+
export declare function Stripe({ tone, label, radius, height, animated, className, style, ...props }: StripeProps): React.ReactElement;
|