"use client";
import type { Ref } from "react";
import { cx } from "../../utils";
export type FoxCheckIconSize = "lg" | "md";
export interface FoxCheckIconProps {
size?: FoxCheckIconSize;
/**
* 켜짐 상태를 클래스로 못박는다. `FoxCheckbox` 안에서는 넘기지 않는다 — 네이티브
* ``의 `:checked`가 스타일 훅을 겸하므로 비제어에서도 맞는다.
* 상태를 나란히 보여주는 예제처럼 단독으로 쓸 때만 쓴다.
*/
checked?: boolean;
/** 부분선택 상태를 클래스로 못박는다. `checked`와 같은 이유로 단독 사용 전용이다. */
indeterminate?: boolean;
/** 비활성 상태를 클래스로 못박는다. `checked`와 같은 이유로 단독 사용 전용이다. */
disabled?: boolean;
/** 배치 조정용. */
className?: string;
ref?: Ref;
}
const SIZE_CLASS: Record = {
lg: "fox-check-icon--lg",
md: "fox-check-icon--md",
};
/**
* @fox 체크박스의 네모 표시. 상태를 갖지 않는다.
*
* 자체로는 입력이 아니다 — 실제 켜짐은 `FoxCheckbox`가 감싸는 네이티브
* ``가 담당하고, 이 요소는 그 상태를 CSS로 비춘다.
*
* 체크와 부분선택 표시를 둘 다 그려 두고 CSS가 골라 보여 준다. 켜졌을 때만 넣으면 비제어
* 입력에서 React가 상태를 몰라 어긋난다.
*
* ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
* (또는 개별 파티셜)로 한 번 불러와야 한다.
*/
export function FoxCheckIcon({
size = "lg",
checked = false,
indeterminate = false,
disabled = false,
className,
ref,
}: FoxCheckIconProps) {
return (
);
}
// 시안 아이콘. `fill`을 시안의 흰색 리터럴 대신 `currentColor`로 두면 상자 규칙이 정한 색을
// 그대로 물려받는다 — 채워진 상자 위에서는 반전색, 비활성일 때는 흐린 색이 된다.
function CheckMark() {
return (
);
}
// 부분선택 표시. 가로 막대라 CSS로도 그릴 수 있지만, 시안 글리프를 쓰면 끝 모서리와 두께가
// 체크와 같은 손에서 나온 값이 된다.
function DashMark() {
return (
);
}