UI Checkbox

1"use client";
2 
3import { type RemocnTheme, useRemocnTheme } from "@/lib/remocn-ui";
4 
5export type CheckboxState = "unchecked" | "checked";
6 
7type CheckboxSize = "sm" | "default" | "lg";
8 
9export interface CheckboxProps {
10  state?: CheckboxState;
11  style?: CheckboxStyle;
12  label?: string;
13  size?: CheckboxSize;
14  theme?: Partial<RemocnTheme>;
15  primary?: string;
16  align?: "start" | "center" | "end";
17  className?: string;
18}
19 
20function justify(align: "start" | "center" | "end"): string {
21  return align === "start"
22    ? "flex-start"
23    : align === "end"
24      ? "flex-end"
25      : "center";
26}
27 
28const CHECK_PATH_LENGTH = 14;
29 
30const SIZE_STYLES: Record<
31  CheckboxSize,
32  { box: number; fontSize: number; gap: number }
33> = {
34  sm: { box: 16, fontSize: 13, gap: 8 },
35  default: { box: 20, fontSize: 15, gap: 10 },
36  lg: { box: 24, fontSize: 17, gap: 12 },
37};
38 
39export interface CheckboxStyle {
40  boxBackground: string;
41  boxBorderColor: string;
42  checkOpacity: number;
43  checkScale: number;
44  checkDraw: number;
45}
46 
47export interface CheckboxStyleContext {
48  uncheckedBg: string;
49  checkedBg: string;
50  uncheckedBorder: string;
51  checkedBorder: string;
52  checkColor: string;
53}
54 
55export function checkboxStyleContext(theme: RemocnTheme): CheckboxStyleContext {
56  return {
57    uncheckedBg: theme.background,
58    checkedBg: theme.primary,
59    uncheckedBorder: theme.border,
60    checkedBorder: theme.primary,
61    checkColor: theme.primaryForeground,
62  };
63}
64 
65export function checkboxStyle(
66  state: CheckboxState,
67  ctx: CheckboxStyleContext,
68): CheckboxStyle {
69  switch (state) {
70    case "checked":
71      return {
72        boxBackground: ctx.checkedBg,
73        boxBorderColor: ctx.checkedBorder,
74        checkOpacity: 1,
75        checkScale: 1,
76        checkDraw: 1,
77      };
78    default:
79      return {
80        boxBackground: ctx.uncheckedBg,
81        boxBorderColor: ctx.uncheckedBorder,
82        checkOpacity: 0,
83        checkScale: 0.6,
84        checkDraw: 0,
85      };
86  }
87}
88 
89export function Checkbox({
90  state = "unchecked",
91  style,
92  label,
93  size = "default",
94  theme: themeOverride,
95  primary,
96  align = "center",
97  className,
98}: CheckboxProps) {
99  const theme = useRemocnTheme(
100    { ...themeOverride, ...(primary ? { primary } : {}) },
101    "light",
102  );
103 
104  const sizeStyle = SIZE_STYLES[size];
105  const ctx = checkboxStyleContext(theme);
106  const v = style ?? checkboxStyle(state, ctx);
107  const boxSize = sizeStyle.box;
108 
109  return (
110    <div
111      style={{
112        position: "absolute",
113        inset: 0,
114// … truncated