/* global React, PageShell, AGGIE_CATALOG, LucideIcon */
/*
* AggieFormCore.jsx — Batch 21 part 1:
* Text inputs · Select & combobox · Choice (radio + checkbox)
*
* Form primitives. Buttons + form controls remain Work Sans 700 uppercase
* regardless of style variant. Forms here are style-neutral — only the labels
* above them respond to default/bold/elegant rule treatment.
*
* Helper prefix: FC.
*/
const { useState: _fcUseState, useRef: _fcUseRef, useEffect: _fcUseEffect } = React;
// ════════════════════════════════════════════════════════════════════════
// Shared helpers (FC prefix)
// ════════════════════════════════════════════════════════════════════════
function FCBox({ label, children, padded = true }) {
return (
);
}
function FCSectionLabel({ children }) {
return {children}
;
}
function FCSpecRow({ children }) {
return {children}
;
}
function FCSpec({ label, value, note }) {
return (
{label}
{value}
{note &&
{note}
}
);
}
function FCIntro({ children }) {
return {children}
;
}
// Field label — uppercase Work Sans, with optional required asterisk
function FieldLabel({ children, required, htmlFor, hint }) {
return (
{children}
{required && * }
{hint && {hint} }
);
}
function HelpText({ children }) {
return {children}
;
}
function FieldGrid({ children, cols = 1 }) {
return {children}
;
}
// ════════════════════════════════════════════════════════════════════════
// Shared input shell — common border / focus / size / state styles
// ════════════════════════════════════════════════════════════════════════
const FIELD_HEIGHT = { sm: 32, md: 40 };
const FIELD_PADDING = { sm: "0 10px", md: "0 12px" };
const FIELD_FONT = { sm: "0.82rem", md: "0.92rem" };
function fieldShellStyle({ size = "md", state = "default", focused, disabled }) {
const base = {
height: FIELD_HEIGHT[size],
fontSize: FIELD_FONT[size],
fontFamily: "var(--font-body)",
padding: FIELD_PADDING[size],
border: "1px solid var(--surface-border)",
borderRadius: 3,
background: disabled ? "var(--surface-sunken)" : "var(--surface-page)",
color: disabled ? "var(--text-muted)" : "var(--text-primary)",
outline: "none",
transition: "border-color 0.12s ease, box-shadow 0.12s ease",
width: "100%",
boxSizing: "border-box",
};
if (state === "error") {
base.borderColor = "var(--color-danger)";
if (focused) base.boxShadow = "0 0 0 3px color-mix(in srgb, var(--color-danger) 18%, transparent)";
} else if (state === "success") {
base.borderColor = "var(--color-success)";
} else if (focused) {
base.borderColor = "var(--brand-primary)";
base.boxShadow = "0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent)";
}
return base;
}
// ════════════════════════════════════════════════════════════════════════
// 1 — Text input
// ════════════════════════════════════════════════════════════════════════
function TextField({
id, label, type = "text", value, onChange, placeholder, helpText,
size = "md", state = "default", required, disabled, hint,
leadingIcon, trailingIcon, prefix, suffix, error, success,
showCounter, maxLength,
...rest
}) {
const [focused, setFocused] = _fcUseState(false);
const realState = error ? "error" : success ? "success" : state;
const showStatus = error || success;
return (
{label &&
{label} }
{prefix && (
{prefix}
)}
{leadingIcon && (
)}
)}
{showStatus && (
)}
{suffix && (
{suffix}
)}
{(error || helpText || showCounter) && (
{error ? (
) : helpText ? (
{helpText}
) :
}
{showCounter && maxLength && (
maxLength * 0.9 ? "var(--color-warning)" : "var(--text-muted)", flexShrink: 0 }}>
{(value?.length || 0)} / {maxLength}
)}
)}
{label && {label} }