Code - nbnloper/edupay-admin

"use client"; import type { Ref } from "react"; import { cx } from "../../utils"; export type FoxCheckIconSize = "lg" | "md"; export interface FoxCheckIconProps { size?: FoxCheckIconSize; /** * 켜짐 상태를 클래스로 못박는다. `FoxCheckbox` 안에서는 넘기지 않는다 — 네이티브 * `<input type="checkbox">`의 `:checked`가 스타일 훅을 겸하므로 비제어에서도 맞는다. * 상태를 나란히 보여주는 예제처럼 단독으로 쓸 때만 쓴다. */ checked?: boolean; /** 부분선택 상태를 클래스로 못박는다. `checked`와 같은 이유로 단독 사용 전용이다. */ indeterminate?: boolean; /** 비활성 상태를 클래스로 못박는다. `checked`와 같은 이유로 단독 사용 전용이다. */ disabled?: boolean; /** 배치 조정용. */ className?: string; ref?: Ref<HTMLSpanElement>; } const SIZE_CLASS: Record<FoxCheckIconSize, string> = { lg: "fox-check-icon--lg", md: "fox-check-icon--md", }; /** * @fox 체크박스의 네모 표시. 상태를 갖지 않는다. * * 자체로는 입력이 아니다 — 실제 켜짐은 `FoxCheckbox`가 감싸는 네이티브 * `<input type="checkbox">`가 담당하고, 이 요소는 그 상태를 CSS로 비춘다. * * 체크와 부분선택 표시를 둘 다 그려 두고 CSS가 골라 보여 준다. 켜졌을 때만 넣으면 비제어 * 입력에서 React가 상태를 몰라 어긋난다. * * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"` * (또는 개별 파티셜)로 한 번 불러와야 한다. */ export function FoxCheckIcon({ size = "lg", checked = false, indeterminate = false, disabled = false, className, ref, }: FoxCheckIconProps) { return ( <span ref={ref} aria-hidden="true" className={cx( "fox-check-icon", SIZE_CLASS[size], checked && "fox-check-icon--checked", indeterminate && "fox-check-icon--indeterminate", disabled && "fox-check-icon--disabled", className )} > <CheckMark /> <DashMark /> </span> ); } // 시안 아이콘. `fill`을 시안의 흰색 리터럴 대신 `currentColor`로 두면 상자 규칙이 정한 색을 // 그대로 물려받는다 — 채워진 상자 위에서는 반전색, 비활성일 때는 흐린 색이 된다. function CheckMark() { return ( <svg className="fox-check-icon__check" viewBox="0 0 20 20" fill="none" aria-hidden="true"> <path d="M18.1633 6.28827L8.16328 16.2883C8.07618 16.3757 7.97269 16.445 7.85874 16.4923C7.74478 16.5397 7.62261 16.564 7.49922 16.564C7.37583 16.564 7.25366 16.5397 7.1397 16.4923C7.02575 16.445 6.92225 16.3757 6.83516 16.2883L2.46016 11.9133C2.37295 11.8261 2.30378 11.7225 2.25658 11.6086C2.20938 11.4947 2.18509 11.3725 2.18509 11.2492C2.18509 11.1259 2.20938 11.0038 2.25658 10.8898C2.30378 10.7759 2.37295 10.6724 2.46016 10.5851C2.54736 10.4979 2.65089 10.4288 2.76483 10.3816C2.87877 10.3344 3.00089 10.3101 3.12422 10.3101C3.24755 10.3101 3.36967 10.3344 3.48361 10.3816C3.59755 10.4288 3.70108 10.4979 3.78828 10.5851L7.5 14.2969L16.8367 4.96171C17.0128 4.78559 17.2517 4.68665 17.5008 4.68665C17.7499 4.68665 17.9887 4.78559 18.1648 4.96171C18.341 5.13783 18.4399 5.3767 18.4399 5.62577C18.4399 5.87484 18.341 6.11371 18.1648 6.28983L18.1633 6.28827Z" fill="currentColor" /> </svg> ); } // 부분선택 표시. 가로 막대라 CSS로도 그릴 수 있지만, 시안 글리프를 쓰면 끝 모서리와 두께가 // 체크와 같은 손에서 나온 값이 된다. function DashMark() { return ( <svg className="fox-check-icon__dash" viewBox="0 0 20 20" fill="none" aria-hidden="true"> <path d="M17.8125 10C17.8125 10.2486 17.7137 10.4871 17.5379 10.6629C17.3621 10.8387 17.1236 10.9375 16.875 10.9375H3.125C2.87636 10.9375 2.6379 10.8387 2.46209 10.6629C2.28627 10.4871 2.1875 10.2486 2.1875 10C2.1875 9.75136 2.28627 9.5129 2.46209 9.33709C2.6379 9.16127 2.87636 9.0625 3.125 9.0625H16.875C17.1236 9.0625 17.3621 9.16127 17.5379 9.33709C17.7137 9.5129 17.8125 9.75136 17.8125 10Z" fill="currentColor" /> </svg> ); }