@conscience-technology/ctds 0.4.1 → 0.4.2
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.
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/* Hint ──────────────────────────────────────────────────────
|
|
2
|
+
흐름 속 참고 한 줄~두 줄. 배경·테두리 없음, muted 텍스트 하나.
|
|
3
|
+
아이콘은 line-box 안에 흘려넣어 첫 줄 캡 하이트 중앙에 자동 정렬 —
|
|
4
|
+
line-height 바뀌어도 어긋나지 않도록 flex align 트릭 쓰지 않음. */
|
|
5
|
+
.root {
|
|
6
|
+
display: inline;
|
|
7
|
+
color: var(--fg-muted);
|
|
8
|
+
font-family: var(--font-sans);
|
|
9
|
+
line-height: 1.6;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* 아이콘은 inline-flex 작은 박스로 띄우되,
|
|
13
|
+
vertical-align: text-bottom으로 line-box 하단에 맞춰 캡 하이트 가운데에 걸치게 함.
|
|
14
|
+
margin-inline-end는 공백 역할. */
|
|
15
|
+
.icon {
|
|
16
|
+
display: inline-flex;
|
|
17
|
+
align-items: center;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
vertical-align: text-bottom;
|
|
20
|
+
color: var(--fg-muted);
|
|
21
|
+
margin-inline-end: var(--space-1_5);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Size ─────────────────────────────────────────────────────── */
|
|
25
|
+
.sm {
|
|
26
|
+
font-size: var(--text-sm);
|
|
27
|
+
}
|
|
28
|
+
.sm .icon > svg {
|
|
29
|
+
width: var(--icon-size-sm);
|
|
30
|
+
height: var(--icon-size-sm);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.md {
|
|
34
|
+
font-size: var(--text-base);
|
|
35
|
+
}
|
|
36
|
+
.md .icon > svg {
|
|
37
|
+
width: var(--icon-size-md);
|
|
38
|
+
height: var(--icon-size-md);
|
|
39
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
|
|
4
|
+
|
|
5
|
+
import { Icon, type IconName } from "../Icon";
|
|
6
|
+
|
|
7
|
+
import styles from "./Hint.module.css";
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Hint — 흐름 속에 스며드는 참고 한 줄~두 줄.
|
|
11
|
+
* 아이콘 하나 + muted 텍스트. tone·variant 축 없음. 액션·배경·테두리 전부 없음.
|
|
12
|
+
*
|
|
13
|
+
* 아이콘 수직 정렬은 flex가 아니라 line-box에 흘려넣는다
|
|
14
|
+
* (display: inline + vertical-align) — hint.md "구현 노트" 참고.
|
|
15
|
+
*/
|
|
16
|
+
export type HintSize = "sm" | "md";
|
|
17
|
+
|
|
18
|
+
export interface HintProps extends HTMLAttributes<HTMLSpanElement> {
|
|
19
|
+
icon?: IconName;
|
|
20
|
+
size?: HintSize;
|
|
21
|
+
children?: ReactNode;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const sizeClass: Record<HintSize, string> = {
|
|
25
|
+
sm: styles.sm,
|
|
26
|
+
md: styles.md,
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const Hint = forwardRef<HTMLSpanElement, HintProps>(
|
|
30
|
+
({ className, icon = "info", size = "sm", children, ...rest }, ref) => {
|
|
31
|
+
const rootClass = [styles.root, sizeClass[size], className ?? ""]
|
|
32
|
+
.filter(Boolean)
|
|
33
|
+
.join(" ");
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<span ref={ref} className={rootClass} {...rest}>
|
|
37
|
+
<span className={styles.icon} aria-hidden>
|
|
38
|
+
<Icon name={icon} />
|
|
39
|
+
</span>
|
|
40
|
+
{children}
|
|
41
|
+
</span>
|
|
42
|
+
);
|
|
43
|
+
},
|
|
44
|
+
);
|
|
45
|
+
|
|
46
|
+
Hint.displayName = "Hint";
|
|
47
|
+
|
|
48
|
+
export { Hint };
|