UI Field

1"use client";
2 
3import type { CSSProperties, ReactNode } from "react";
4import { type RemocnTheme, useRemocnTheme } from "@/lib/remocn-ui";
5 
6export interface FieldGroupProps {
7  children: ReactNode;
8  gap?: number;
9  style?: CSSProperties;
10}
11 
12export function FieldGroup({ children, gap = 16, style }: FieldGroupProps) {
13  return (
14    <div style={{ display: "flex", flexDirection: "column", gap, ...style }}>
15      {children}
16    </div>
17  );
18}
19 
20export interface FieldProps {
21  children: ReactNode;
22  gap?: number;
23  style?: CSSProperties;
24}
25 
26export function Field({ children, gap = 6, style }: FieldProps) {
27  return (
28    <div style={{ display: "flex", flexDirection: "column", gap, ...style }}>
29      {children}
30    </div>
31  );
32}
33 
34export interface FieldLabelProps {
35  children: ReactNode;
36  theme?: Partial<RemocnTheme>;
37  style?: CSSProperties;
38}
39 
40export function FieldLabel({ children, theme, style }: FieldLabelProps) {
41  const t = useRemocnTheme(theme, "light");
42  return (
43    <div
44      style={{
45        fontSize: 13,
46        lineHeight: "18px",
47        fontWeight: 500,
48        letterSpacing: "-0.01em",
49        color: t.foreground,
50        ...style,
51      }}
52    >
53      {children}
54    </div>
55  );
56}
57 
58export interface FieldDescriptionProps {
59  children: ReactNode;
60  align?: "start" | "center";
61  theme?: Partial<RemocnTheme>;
62  style?: CSSProperties;
63}
64 
65export function FieldDescription({
66  children,
67  align = "start",
68  theme,
69  style,
70}: FieldDescriptionProps) {
71  const t = useRemocnTheme(theme, "light");
72  return (
73    <div
74      style={{
75        fontSize: 12,
76        lineHeight: "16px",
77        color: t.mutedForeground,
78        textAlign: align === "center" ? "center" : "left",
79        ...style,
80      }}
81    >
82      {children}
83    </div>
84  );
85}
86 
87export interface FieldControlProps {
88  children: ReactNode;
89  height?: number;
90  style?: CSSProperties;
91}
92 
93export function FieldControl({
94  children,
95  height = 40,
96  style,
97}: FieldControlProps) {
98  return (
99    <div style={{ position: "relative", height, ...style }}>{children}</div>
100  );
101}