analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
283 lines (280 loc) • 8.18 kB
JavaScript
"use client";
// src/components/Radio/Radio.tsx
import {
forwardRef,
useState,
useId
} from "react";
// src/components/Text/Text.tsx
import { jsx } from "react/jsx-runtime";
var Text = ({
children,
size = "md",
weight = "normal",
color = "text-text-950",
as,
className = "",
...props
}) => {
let sizeClasses = "";
let weightClasses = "";
const sizeClassMap = {
"2xs": "text-2xs",
xs: "text-xs",
sm: "text-sm",
md: "text-md",
lg: "text-lg",
xl: "text-xl",
"2xl": "text-2xl",
"3xl": "text-3xl",
"4xl": "text-4xl",
"5xl": "text-5xl",
"6xl": "text-6xl"
};
sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
const weightClassMap = {
hairline: "font-hairline",
light: "font-light",
normal: "font-normal",
medium: "font-medium",
semibold: "font-semibold",
bold: "font-bold",
extrabold: "font-extrabold",
black: "font-black"
};
weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
const baseClasses = "font-primary";
const Component = as ?? "p";
return /* @__PURE__ */ jsx(
Component,
{
className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
...props,
children
}
);
};
var Text_default = Text;
// src/components/Radio/Radio.tsx
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var SIZE_CLASSES = {
small: {
radio: "w-5 h-5",
// 20px x 20px
textSize: "sm",
spacing: "gap-1.5",
// 6px
borderWidth: "border-2",
dotSize: "w-1.5 h-1.5",
// 6px inner dot
labelHeight: "h-5"
},
medium: {
radio: "w-6 h-6",
// 24px x 24px
textSize: "md",
spacing: "gap-2",
// 8px
borderWidth: "border-2",
dotSize: "w-2 h-2",
// 8px inner dot
labelHeight: "h-6"
},
large: {
radio: "w-7 h-7",
// 28px x 28px
textSize: "lg",
spacing: "gap-2",
// 8px
borderWidth: "border-2",
// 2px border (consistent with others)
dotSize: "w-2.5 h-2.5",
// 10px inner dot
labelHeight: "h-7"
},
extraLarge: {
radio: "w-8 h-8",
// 32px x 32px (larger than large)
textSize: "xl",
spacing: "gap-3",
// 12px
borderWidth: "border-2",
// 2px border (consistent with others)
dotSize: "w-3 h-3",
// 12px inner dot
labelHeight: "h-8"
}
};
var BASE_RADIO_CLASSES = "rounded-full border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
var STATE_CLASSES = {
default: {
unchecked: "border-border-400 bg-background hover:border-border-500",
checked: "border-primary-950 bg-background hover:border-primary-800"
},
hovered: {
unchecked: "border-border-500 bg-background",
// #8C8D8D hover state for unchecked
checked: "border-info-700 bg-background"
// Adjust checked border for hover
},
focused: {
unchecked: "border-border-400 bg-background",
// #A5A3A3 for unchecked radio
checked: "border-primary-950 bg-background"
// #124393 for checked radio
},
invalid: {
unchecked: "border-border-400 bg-background",
// #A5A3A3 for unchecked radio
checked: "border-primary-950 bg-background"
// #124393 for checked radio
},
disabled: {
unchecked: "border-border-400 bg-background cursor-not-allowed",
// #A5A3A3 for unchecked radio
checked: "border-primary-950 bg-background cursor-not-allowed"
// #124393 for checked radio
}
};
var DOT_CLASSES = {
default: "bg-primary-950",
hovered: "bg-info-700",
// #1C61B2 hover state for checked dot
focused: "bg-primary-950",
// #124393 for focused checked dot
invalid: "bg-primary-950",
// #124393 for invalid checked dot
disabled: "bg-primary-950"
// #124393 for disabled checked dot
};
var Radio = forwardRef(
({
label,
size = "medium",
state = "default",
errorMessage,
helperText,
className = "",
labelClassName = "",
checked: checkedProp,
defaultChecked = false,
disabled,
id,
name,
value,
onChange,
...props
}, ref) => {
const generatedId = useId();
const inputId = id ?? `radio-${generatedId}`;
const [internalChecked, setInternalChecked] = useState(defaultChecked);
const isControlled = checkedProp !== void 0;
const checked = isControlled ? checkedProp : internalChecked;
const handleChange = (event) => {
const newChecked = event.target.checked;
if (!isControlled) {
setInternalChecked(newChecked);
}
onChange?.(event);
};
const currentState = disabled ? "disabled" : state;
const sizeClasses = SIZE_CLASSES[size];
const actualRadioSize = sizeClasses.radio;
const actualDotSize = sizeClasses.dotSize;
const radioVariant = checked ? "checked" : "unchecked";
const stylingClasses = STATE_CLASSES[currentState][radioVariant];
const getBorderWidth = () => {
if (currentState === "focused") {
return "border-2";
}
return sizeClasses.borderWidth;
};
const borderWidthClass = getBorderWidth();
const radioClasses = `${BASE_RADIO_CLASSES} ${actualRadioSize} ${borderWidthClass} ${stylingClasses} ${className}`;
const dotClasses = `${actualDotSize} rounded-full ${DOT_CLASSES[currentState]} transition-all duration-200`;
const isWrapperNeeded = currentState === "focused" || currentState === "invalid";
const wrapperBorderColor = currentState === "focused" ? "border-indicator-info" : "border-indicator-error";
const getTextColor = () => {
if (currentState === "disabled") {
return checked ? "text-text-900" : "text-text-600";
}
if (currentState === "focused") {
return "text-text-900";
}
return checked ? "text-text-900" : "text-text-600";
};
const getCursorClass = () => {
return currentState === "disabled" ? "cursor-not-allowed" : "cursor-pointer";
};
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
/* @__PURE__ */ jsxs(
"div",
{
className: `flex flex-row items-center ${isWrapperNeeded ? `p-1 border-2 ${wrapperBorderColor} rounded-lg gap-1.5` : sizeClasses.spacing} ${disabled ? "opacity-40" : ""}`,
children: [
/* @__PURE__ */ jsx2(
"input",
{
ref,
type: "radio",
id: inputId,
checked,
disabled,
name,
value,
onChange: handleChange,
className: "sr-only",
...props
}
),
/* @__PURE__ */ jsx2("label", { htmlFor: inputId, className: radioClasses, children: checked && /* @__PURE__ */ jsx2("div", { className: dotClasses }) }),
label && /* @__PURE__ */ jsx2(
"div",
{
className: `flex flex-row items-center ${sizeClasses.labelHeight}`,
children: /* @__PURE__ */ jsx2(
Text_default,
{
as: "label",
htmlFor: inputId,
size: sizeClasses.textSize,
weight: "normal",
className: `${getCursorClass()} select-none leading-normal flex items-center font-roboto ${labelClassName}`,
color: getTextColor(),
children: label
}
)
}
)
]
}
),
errorMessage && /* @__PURE__ */ jsx2(
Text_default,
{
size: "sm",
weight: "normal",
className: "mt-1.5",
color: "text-error-600",
children: errorMessage
}
),
helperText && !errorMessage && /* @__PURE__ */ jsx2(
Text_default,
{
size: "sm",
weight: "normal",
className: "mt-1.5",
color: "text-text-500",
children: helperText
}
)
] });
}
);
Radio.displayName = "Radio";
var Radio_default = Radio;
export {
Radio_default as default
};
//# sourceMappingURL=index.mjs.map