analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1,320 lines (1,306 loc) • 108 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/Support/index.ts
var Support_exports = {};
__export(Support_exports, {
Support: () => Support_default,
TicketModal: () => TicketModal,
getCategoryIcon: () => getCategoryIcon,
supportSchema: () => supportSchema
});
module.exports = __toCommonJS(Support_exports);
// src/components/Support/Support.tsx
var import_react10 = require("react");
var import_react_hook_form = require("react-hook-form");
var import_zod2 = require("@hookform/resolvers/zod");
var import_react11 = require("@phosphor-icons/react");
var import_dayjs2 = __toESM(require("dayjs"));
// src/utils/utils.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}
// src/components/Text/Text.tsx
var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)(
Component,
{
className: cn(baseClasses, sizeClasses, weightClasses, color, className),
...props,
children
}
);
};
var Text_default = Text;
// src/components/SelectionButton/SelectionButton.tsx
var import_react = require("react");
var import_jsx_runtime2 = require("react/jsx-runtime");
var SelectionButton = (0, import_react.forwardRef)(
({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
const baseClasses = [
"inline-flex",
"items-center",
"justify-start",
"gap-2",
"p-4",
"rounded-xl",
"cursor-pointer",
"border",
"border-border-50",
"bg-background",
"text-sm",
"text-text-700",
"font-bold",
"shadow-soft-shadow-1",
"hover:bg-background-100",
"focus-visible:outline-none",
"focus-visible:ring-2",
"focus-visible:ring-indicator-info",
"focus-visible:ring-offset-0",
"focus-visible:shadow-none",
"active:ring-2",
"active:ring-primary-950",
"active:ring-offset-0",
"active:shadow-none",
"disabled:opacity-50",
"disabled:cursor-not-allowed"
];
const stateClasses = selected ? ["ring-primary-950", "ring-2", "ring-offset-0", "shadow-none"] : [];
const allClasses = [...baseClasses, ...stateClasses].join(" ");
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
"button",
{
ref,
type: "button",
className: cn(allClasses, className),
disabled,
"aria-pressed": selected,
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: label })
]
}
);
}
);
SelectionButton.displayName = "SelectionButton";
var SelectionButton_default = SelectionButton;
// src/components/Input/Input.tsx
var import_phosphor_react = require("phosphor-react");
var import_react2 = require("react");
var import_jsx_runtime3 = require("react/jsx-runtime");
var SIZE_CLASSES = {
small: "text-sm",
medium: "text-md",
large: "text-lg",
"extra-large": "text-xl"
};
var STATE_CLASSES = {
default: "border-border-300 placeholder:text-text-600 hover:border-border-400",
error: "border-2 border-indicator-error placeholder:text-text-600",
disabled: "border-border-300 placeholder:text-text-600 cursor-not-allowed opacity-40",
"read-only": "border-transparent !text-text-600 cursor-default focus:outline-none bg-transparent"
};
var VARIANT_CLASSES = {
outlined: "border rounded-lg",
underlined: "border-0 border-b rounded-none bg-transparent focus:outline-none focus:border-primary-950 focus:border-b-2",
rounded: "border rounded-full"
};
var getActualState = (disabled, readOnly, errorMessage, state) => {
if (disabled) return "disabled";
if (readOnly) return "read-only";
if (errorMessage) return "error";
return state || "default";
};
var getIconSize = (size) => {
const iconSizeClasses = {
small: "w-4 h-4",
medium: "w-5 h-5",
large: "w-6 h-6",
"extra-large": "w-7 h-7"
};
return iconSizeClasses[size] || iconSizeClasses.medium;
};
var getPasswordToggleConfig = (type, disabled, readOnly, showPassword, iconRight) => {
const isPasswordType = type === "password";
const shouldShowPasswordToggle = isPasswordType && !disabled && !readOnly;
let actualIconRight = iconRight;
let ariaLabel;
if (shouldShowPasswordToggle) {
actualIconRight = showPassword ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.EyeSlash, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.Eye, {});
ariaLabel = showPassword ? "Ocultar senha" : "Mostrar senha";
}
return { shouldShowPasswordToggle, actualIconRight, ariaLabel };
};
var getCombinedClasses = (actualState, variant) => {
const stateClasses = STATE_CLASSES[actualState];
const variantClasses = VARIANT_CLASSES[variant];
if (actualState === "error" && variant === "underlined") {
return "border-0 border-b-2 border-indicator-error rounded-none bg-transparent focus:outline-none focus:border-primary-950 placeholder:text-text-600";
}
if (actualState === "read-only" && variant === "underlined") {
return "border-0 border-b-0 rounded-none bg-transparent focus:outline-none !text-text-900 cursor-default";
}
return `${stateClasses} ${variantClasses}`;
};
var Input = (0, import_react2.forwardRef)(
({
label,
helperText,
errorMessage,
size = "medium",
variant = "outlined",
state = "default",
iconLeft,
iconRight,
className = "",
containerClassName = "",
disabled,
readOnly,
required,
id,
type = "text",
...props
}, ref) => {
const [showPassword, setShowPassword] = (0, import_react2.useState)(false);
const isPasswordType = type === "password";
const actualType = isPasswordType && showPassword ? "text" : type;
const actualState = getActualState(disabled, readOnly, errorMessage, state);
const sizeClasses = SIZE_CLASSES[size];
const combinedClasses = (0, import_react2.useMemo)(
() => getCombinedClasses(actualState, variant),
[actualState, variant]
);
const iconSize = getIconSize(size);
const baseClasses = `bg-background w-full py-2 ${actualState === "read-only" ? "px-0" : "px-3"} font-normal text-text-900 focus:outline-primary-950`;
const generatedId = (0, import_react2.useId)();
const inputId = id ?? `input-${generatedId}`;
const togglePasswordVisibility = () => setShowPassword(!showPassword);
const { shouldShowPasswordToggle, actualIconRight, ariaLabel } = getPasswordToggleConfig(
type,
disabled,
readOnly,
showPassword,
iconRight
);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `${containerClassName}`, children: [
label && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
"label",
{
htmlFor: inputId,
className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
children: [
label,
" ",
required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-indicator-error", children: "*" })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"span",
{
className: `${iconSize} text-text-400 flex items-center justify-center`,
children: iconLeft
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"input",
{
ref,
id: inputId,
type: actualType,
className: `${baseClasses} ${sizeClasses} ${combinedClasses} ${iconLeft ? "pl-10" : ""} ${actualIconRight ? "pr-10" : ""} ${className}`,
disabled,
readOnly,
required,
"aria-invalid": actualState === "error" ? "true" : void 0,
...props
}
),
actualIconRight && (shouldShowPasswordToggle ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"button",
{
type: "button",
className: "absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer border-0 bg-transparent p-0",
onClick: togglePasswordVisibility,
"aria-label": ariaLabel,
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"span",
{
className: `${iconSize} text-text-400 flex items-center justify-center hover:text-text-600 transition-colors`,
children: actualIconRight
}
)
}
) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"span",
{
className: `${iconSize} text-text-400 flex items-center justify-center`,
children: actualIconRight
}
) }))
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-1.5 gap-1.5", children: [
helperText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-text-500", children: helperText }),
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.WarningCircle, { size: 16 }),
" ",
errorMessage
] })
] })
] });
}
);
var Input_default = Input;
// src/components/TextArea/TextArea.tsx
var import_react3 = require("react");
var import_phosphor_react2 = require("phosphor-react");
var import_jsx_runtime4 = require("react/jsx-runtime");
var SIZE_CLASSES2 = {
small: {
textarea: "h-24 text-sm",
// 96px height, 14px font
textSize: "sm"
},
medium: {
textarea: "h-24 text-base",
// 96px height, 16px font
textSize: "md"
},
large: {
textarea: "h-24 text-lg",
// 96px height, 18px font
textSize: "lg"
},
extraLarge: {
textarea: "h-24 text-xl",
// 96px height, 20px font
textSize: "xl"
}
};
var BASE_TEXTAREA_CLASSES = "w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200";
var STATE_CLASSES2 = {
default: {
base: "border-border-300 bg-background text-text-600",
hover: "hover:border-border-400",
focus: "focus:border-border-500"
},
hovered: {
base: "border-border-400 bg-background text-text-600",
hover: "",
focus: "focus:border-border-500"
},
focused: {
base: "border-2 border-primary-950 bg-background text-text-900",
hover: "",
focus: ""
},
invalid: {
base: "border-2 border-red-700 bg-white text-gray-800",
hover: "hover:border-red-700",
focus: "focus:border-red-700"
},
disabled: {
base: "border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40",
hover: "",
focus: ""
}
};
var TextArea = (0, import_react3.forwardRef)(
({
label,
size = "medium",
state = "default",
errorMessage,
helperMessage,
className = "",
labelClassName = "",
disabled,
id,
onChange,
placeholder,
required,
showCharacterCount = false,
maxLength,
value,
...props
}, ref) => {
const generatedId = (0, import_react3.useId)();
const inputId = id ?? `textarea-${generatedId}`;
const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
const currentLength = typeof value === "string" ? value.length : 0;
const isNearLimit = maxLength && currentLength >= maxLength * 0.8;
const handleChange = (event) => {
onChange?.(event);
};
const handleFocus = (event) => {
setIsFocused(true);
props.onFocus?.(event);
};
const handleBlur = (event) => {
setIsFocused(false);
props.onBlur?.(event);
};
let currentState = disabled ? "disabled" : state;
if (isFocused && currentState !== "invalid" && currentState !== "disabled") {
currentState = "focused";
}
const sizeClasses = SIZE_CLASSES2[size];
const stateClasses = STATE_CLASSES2[currentState];
const textareaClasses = cn(
BASE_TEXTAREA_CLASSES,
sizeClasses.textarea,
stateClasses.base,
stateClasses.hover,
stateClasses.focus,
className
);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `flex flex-col`, children: [
label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
Text_default,
{
as: "label",
htmlFor: inputId,
size: sizeClasses.textSize,
weight: "medium",
color: "text-text-950",
className: cn("mb-1.5", labelClassName),
children: [
label,
" ",
required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-indicator-error", children: "*" })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"textarea",
{
ref,
id: inputId,
disabled,
onChange: handleChange,
onFocus: handleFocus,
onBlur: handleBlur,
className: textareaClasses,
placeholder,
required,
maxLength,
value,
...props
}
),
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error mt-1.5", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.WarningCircle, { size: 16 }),
" ",
errorMessage
] }),
!errorMessage && showCharacterCount && maxLength && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
Text_default,
{
size: "sm",
weight: "normal",
className: `mt-1.5 ${isNearLimit ? "text-indicator-warning" : "text-text-500"}`,
children: [
currentLength,
"/",
maxLength,
" caracteres"
]
}
),
!errorMessage && helperMessage && !(showCharacterCount && maxLength) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
] });
}
);
TextArea.displayName = "TextArea";
var TextArea_default = TextArea;
// src/components/Button/Button.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var VARIANT_ACTION_CLASSES = {
solid: {
primary: "bg-primary-950 text-text border border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus-visible:outline-none focus-visible:bg-primary-950 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
positive: "bg-success-500 text-text border border-success-500 hover:bg-success-600 hover:border-success-600 focus-visible:outline-none focus-visible:bg-success-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
negative: "bg-error-500 text-text border border-error-500 hover:bg-error-600 hover:border-error-600 focus-visible:outline-none focus-visible:bg-error-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
},
outline: {
primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
},
link: {
primary: "bg-transparent text-primary-950 hover:text-primary-400 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
positive: "bg-transparent text-success-500 hover:text-success-400 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
negative: "bg-transparent text-error-500 hover:text-error-400 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
}
};
var SIZE_CLASSES3 = {
"extra-small": "text-xs px-3.5 py-2",
small: "text-sm px-4 py-2.5",
medium: "text-md px-5 py-2.5",
large: "text-lg px-6 py-3",
"extra-large": "text-lg px-7 py-3.5"
};
var Button = ({
children,
iconLeft,
iconRight,
size = "medium",
variant = "solid",
action = "primary",
className = "",
disabled,
type = "button",
...props
}) => {
const sizeClasses = SIZE_CLASSES3[size];
const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
"button",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
disabled,
type,
...props,
children: [
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mr-2 flex items-center", children: iconLeft }),
children,
iconRight && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ml-2 flex items-center", children: iconRight })
]
}
);
};
var Button_default = Button;
// src/components/Select/Select.tsx
var import_zustand = require("zustand");
var import_react4 = require("react");
var import_phosphor_react3 = require("phosphor-react");
var import_jsx_runtime6 = require("react/jsx-runtime");
var VARIANT_CLASSES2 = {
outlined: "border-2 rounded-lg focus:border-primary-950",
underlined: "border-b-2 focus:border-primary-950",
rounded: "border-2 rounded-full focus:border-primary-950"
};
var SIZE_CLASSES4 = {
small: "text-sm",
medium: "text-md",
large: "text-lg",
"extra-large": "text-lg"
};
var HEIGHT_CLASSES = {
small: "h-8",
medium: "h-9",
large: "h-10",
"extra-large": "h-12"
};
var PADDING_CLASSES = {
small: "px-2 py-1",
medium: "px-3 py-2",
large: "px-4 py-3",
"extra-large": "px-5 py-4"
};
var SIDE_CLASSES = {
top: "bottom-full -translate-y-1",
right: "top-full translate-y-1",
bottom: "top-full translate-y-1",
left: "top-full translate-y-1"
};
var ALIGN_CLASSES = {
start: "left-0",
center: "left-1/2 -translate-x-1/2",
end: "right-0"
};
function createSelectStore(onValueChange) {
return (0, import_zustand.create)((set) => ({
open: false,
setOpen: (open) => set({ open }),
value: "",
setValue: (value) => set({ value }),
selectedLabel: "",
setSelectedLabel: (label) => set({ selectedLabel: label }),
onValueChange
}));
}
var useSelectStore = (externalStore) => {
if (!externalStore) {
throw new Error(
"Component must be used within a Select (store is missing)"
);
}
return externalStore;
};
function getLabelAsNode(children) {
if (typeof children === "string" || typeof children === "number") {
return children;
}
const flattened = import_react4.Children.toArray(children);
if (flattened.length === 1) return flattened[0];
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: flattened });
}
var injectStore = (children, store, size, selectId) => {
return import_react4.Children.map(children, (child) => {
if ((0, import_react4.isValidElement)(child)) {
const typedChild = child;
const newProps = {
store
};
if (typedChild.type === SelectTrigger) {
newProps.size = size;
newProps.selectId = selectId;
}
if (typedChild.props.children) {
newProps.children = injectStore(
typedChild.props.children,
store,
size,
selectId
);
}
return (0, import_react4.cloneElement)(typedChild, newProps);
}
return child;
});
};
var Select = ({
children,
defaultValue = "",
className,
value: propValue,
onValueChange,
size = "small",
label,
helperText,
errorMessage,
id
}) => {
const storeRef = (0, import_react4.useRef)(null);
storeRef.current ??= createSelectStore(onValueChange);
const store = storeRef.current;
const selectRef = (0, import_react4.useRef)(null);
const { open, setOpen, setValue, selectedLabel } = (0, import_zustand.useStore)(store, (s) => s);
const generatedId = (0, import_react4.useId)();
const selectId = id ?? `select-${generatedId}`;
const findLabelForValue = (children2, targetValue) => {
let found = null;
const search = (nodes) => {
import_react4.Children.forEach(nodes, (child) => {
if (!(0, import_react4.isValidElement)(child)) return;
const typedChild = child;
if (typedChild.type === SelectItem && typedChild.props.value === targetValue) {
if (typeof typedChild.props.children === "string")
found = typedChild.props.children;
}
if (typedChild.props.children && !found)
search(typedChild.props.children);
});
};
search(children2);
return found;
};
(0, import_react4.useEffect)(() => {
if (!selectedLabel && defaultValue) {
const label2 = findLabelForValue(children, defaultValue);
if (label2) store.setState({ selectedLabel: label2 });
}
}, [children, defaultValue, selectedLabel]);
(0, import_react4.useEffect)(() => {
const handleClickOutside = (event) => {
if (selectRef.current && !selectRef.current.contains(event.target)) {
setOpen(false);
}
};
const handleArrowKeys = (event) => {
const selectContent = selectRef.current?.querySelector('[role="menu"]');
if (selectContent) {
event.preventDefault();
const items = Array.from(
selectContent.querySelectorAll(
'[role="menuitem"]:not([aria-disabled="true"])'
)
).filter((el) => el instanceof HTMLElement);
const focused = document.activeElement;
const currentIndex = items.findIndex((item) => item === focused);
let nextIndex = 0;
if (event.key === "ArrowDown") {
nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
} else {
nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
}
items[nextIndex]?.focus();
}
};
if (open) {
document.addEventListener("mousedown", handleClickOutside);
document.addEventListener("keydown", handleArrowKeys);
}
return () => {
document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener("keydown", handleArrowKeys);
};
}, [open]);
(0, import_react4.useEffect)(() => {
if (propValue) {
setValue(propValue);
const label2 = findLabelForValue(children, propValue);
if (label2) store.setState({ selectedLabel: label2 });
}
}, [propValue]);
const sizeClasses = SIZE_CLASSES4[size];
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("w-full", className), children: [
label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"label",
{
htmlFor: selectId,
className: cn("block font-bold text-text-900 mb-1.5", sizeClasses),
children: label
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("relative w-full"), ref: selectRef, children: injectStore(children, store, size, selectId) }),
(helperText || errorMessage) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-1.5 gap-1.5", children: [
helperText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-text-500", children: helperText }),
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react3.WarningCircle, { size: 16 }),
" ",
errorMessage
] })
] })
] });
};
var SelectValue = ({
placeholder,
store: externalStore
}) => {
const store = useSelectStore(externalStore);
const selectedLabel = (0, import_zustand.useStore)(store, (s) => s.selectedLabel);
const value = (0, import_zustand.useStore)(store, (s) => s.value);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-inherit flex gap-2 items-center", children: selectedLabel || placeholder || value });
};
var SelectTrigger = (0, import_react4.forwardRef)(
({
className,
invalid = false,
variant = "outlined",
store: externalStore,
disabled,
size = "medium",
selectId,
...props
}, ref) => {
const store = useSelectStore(externalStore);
const open = (0, import_zustand.useStore)(store, (s) => s.open);
const toggleOpen = () => store.setState({ open: !open });
const variantClasses = VARIANT_CLASSES2[variant];
const heightClasses = HEIGHT_CLASSES[size];
const paddingClasses = PADDING_CLASSES[size];
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
"button",
{
ref,
id: selectId,
className: cn(
"flex w-full items-center justify-between border-border-300",
heightClasses,
paddingClasses,
invalid && `${variant == "underlined" ? "border-b-2" : "border-2"} border-indicator-error text-text-600`,
disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground",
!invalid && !disabled ? "text-text-700" : "",
variantClasses,
className
),
onClick: toggleOpen,
"aria-expanded": open,
"aria-haspopup": "listbox",
"aria-controls": open ? "select-content" : void 0,
...props,
children: [
props.children,
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
import_phosphor_react3.CaretDown,
{
className: cn(
"h-[1em] w-[1em] opacity-50 transition-transform",
open ? "rotate-180" : ""
)
}
)
]
}
);
}
);
SelectTrigger.displayName = "SelectTrigger";
var SelectContent = (0, import_react4.forwardRef)(
({
children,
className,
align = "start",
side = "bottom",
store: externalStore,
...props
}, ref) => {
const store = useSelectStore(externalStore);
const open = (0, import_zustand.useStore)(store, (s) => s.open);
if (!open) return null;
const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES[side]} ${ALIGN_CLASSES[align]}`;
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"div",
{
role: "menu",
ref,
className: cn(
"bg-secondary z-50 min-w-[210px] max-h-[300px] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md border-border-100",
getPositionClasses(),
className
),
...props,
children
}
);
}
);
SelectContent.displayName = "SelectContent";
var SelectItem = (0, import_react4.forwardRef)(
({
className,
children,
value,
disabled = false,
store: externalStore,
...props
}, ref) => {
const store = useSelectStore(externalStore);
const {
value: selectedValue,
setValue,
setOpen,
setSelectedLabel,
onValueChange
} = (0, import_zustand.useStore)(store, (s) => s);
const handleClick = (e) => {
const labelNode = getLabelAsNode(children);
if (!disabled) {
setValue(value);
setSelectedLabel(labelNode);
setOpen(false);
onValueChange?.(value);
}
props.onClick?.(e);
};
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
"div",
{
role: "menuitem",
"aria-disabled": disabled,
ref,
className: `
bg-secondary focus-visible:bg-background-50
relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
${className}
${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
${selectedValue === value && "bg-background-50"}
`,
onClick: handleClick,
onKeyDown: (e) => {
if (e.key === "Enter" || e.key === " ") handleClick(e);
},
tabIndex: disabled ? -1 : 0,
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react3.Check, { className: "" }) }),
children
]
}
);
}
);
SelectItem.displayName = "SelectItem";
var Select_default = Select;
// src/components/Badge/Badge.tsx
var import_phosphor_react4 = require("phosphor-react");
var import_jsx_runtime7 = require("react/jsx-runtime");
var VARIANT_ACTION_CLASSES2 = {
solid: {
error: "bg-error-background text-error-700 focus-visible:outline-none",
warning: "bg-warning text-warning-800 focus-visible:outline-none",
success: "bg-success text-success-800 focus-visible:outline-none",
info: "bg-info text-info-800 focus-visible:outline-none",
muted: "bg-background-muted text-background-800 focus-visible:outline-none"
},
outlined: {
error: "bg-error text-error-700 border border-error-300 focus-visible:outline-none",
warning: "bg-warning text-warning-800 border border-warning-300 focus-visible:outline-none",
success: "bg-success text-success-800 border border-success-300 focus-visible:outline-none",
info: "bg-info text-info-800 border border-info-300 focus-visible:outline-none",
muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
},
exams: {
exam1: "bg-exam-1 text-info-700 focus-visible:outline-none",
exam2: "bg-exam-2 text-typography-1 focus-visible:outline-none",
exam3: "bg-exam-3 text-typography-2 focus-visible:outline-none",
exam4: "bg-exam-4 text-success-700 focus-visible:outline-none"
},
examsOutlined: {
exam1: "bg-exam-1 text-info-700 border border-info-700 focus-visible:outline-none",
exam2: "bg-exam-2 text-typography-1 border border-typography-1 focus-visible:outline-none",
exam3: "bg-exam-3 text-typography-2 border border-typography-2 focus-visible:outline-none",
exam4: "bg-exam-4 text-success-700 border border-success-700 focus-visible:outline-none"
},
resultStatus: {
negative: "bg-error text-error-800 focus-visible:outline-none",
positive: "bg-success text-success-800 focus-visible:outline-none"
},
notification: "text-primary"
};
var SIZE_CLASSES5 = {
small: "text-2xs px-2 py-1",
medium: "text-xs px-2 py-1",
large: "text-sm px-2 py-1"
};
var SIZE_CLASSES_ICON = {
small: "size-3",
medium: "size-3.5",
large: "size-4"
};
var Badge = ({
children,
iconLeft,
iconRight,
size = "medium",
variant = "solid",
action = "error",
className = "",
notificationActive = false,
...props
}) => {
const sizeClasses = SIZE_CLASSES5[size];
const sizeClassesIcon = SIZE_CLASSES_ICON[size];
const variantActionMap = VARIANT_ACTION_CLASSES2[variant] || {};
const variantClasses = typeof variantActionMap === "string" ? variantActionMap : variantActionMap[action] ?? variantActionMap.muted ?? "";
const baseClasses = "inline-flex items-center justify-center rounded-xs font-normal gap-1 relative";
const baseClassesIcon = "flex items-center";
if (variant === "notification") {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
"div",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_phosphor_react4.Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
notificationActive && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"span",
{
"data-testid": "notification-dot",
className: "absolute top-[5px] right-[10px] block h-2 w-2 rounded-full bg-indicator-error ring-2 ring-white"
}
)
]
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
"div",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
...props,
children: [
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
children,
iconRight && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
]
}
);
};
var Badge_default = Badge;
// src/components/Skeleton/Skeleton.tsx
var import_react5 = require("react");
var import_jsx_runtime8 = require("react/jsx-runtime");
var SKELETON_ANIMATION_CLASSES = {
pulse: "animate-pulse",
none: ""
};
var SKELETON_VARIANT_CLASSES = {
text: "h-4 bg-background-200 rounded",
circular: "bg-background-200 rounded-full",
rectangular: "bg-background-200",
rounded: "bg-background-200 rounded-lg"
};
var SPACING_CLASSES = {
none: "",
small: "space-y-1",
medium: "space-y-2",
large: "space-y-3"
};
var Skeleton = (0, import_react5.forwardRef)(
({
variant = "text",
width,
height,
animation = "pulse",
lines = 1,
spacing = "none",
className = "",
children,
...props
}, ref) => {
const animationClass = SKELETON_ANIMATION_CLASSES[animation];
const variantClass = SKELETON_VARIANT_CLASSES[variant];
const spacingClass = SPACING_CLASSES[spacing];
const style = {
width: typeof width === "number" ? `${width}px` : width,
height: typeof height === "number" ? `${height}px` : height
};
if (variant === "text" && lines > 1) {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"div",
{
ref,
className: cn("flex flex-col", spacingClass, className),
...props,
children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"div",
{
className: cn(variantClass, animationClass),
style: index === lines - 1 ? { width: "60%" } : void 0
},
index
))
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"div",
{
ref,
className: cn(variantClass, animationClass, className),
style,
...props,
children
}
);
}
);
var SkeletonText = (0, import_react5.forwardRef)(
(props, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Skeleton, { ref, variant: "text", ...props })
);
var SkeletonCircle = (0, import_react5.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Skeleton, { ref, variant: "circular", ...props }));
var SkeletonRectangle = (0, import_react5.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Skeleton, { ref, variant: "rectangular", ...props }));
var SkeletonRounded = (0, import_react5.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Skeleton, { ref, variant: "rounded", ...props }));
var SkeletonCard = (0, import_react5.forwardRef)(
({
showAvatar = true,
showTitle = true,
showDescription = true,
showActions = true,
lines = 2,
className = "",
...props
}, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
"div",
{
ref,
className: cn(
"w-full p-4 bg-background border border-border-200 rounded-lg",
className
),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-start space-x-3", children: [
showAvatar && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonCircle, { width: 40, height: 40 }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-1 space-y-2", children: [
showTitle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonText, { width: "60%", height: 20 }),
showDescription && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonText, { lines, spacing: "small" })
] })
] }),
showActions && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex justify-end space-x-2 mt-4", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonRectangle, { width: 80, height: 32 }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonRectangle, { width: 80, height: 32 })
] })
]
}
);
}
);
var SkeletonList = (0, import_react5.forwardRef)(
({
items = 3,
showAvatar = true,
showTitle = true,
showDescription = true,
lines = 1,
className = "",
...props
}, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-start space-x-3 p-3", children: [
showAvatar && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonCircle, { width: 32, height: 32 }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-1 space-y-2", children: [
showTitle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonText, { width: "40%", height: 16 }),
showDescription && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonText, { lines, spacing: "small" })
] })
] }, index)) });
}
);
var SkeletonTable = (0, import_react5.forwardRef)(
({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className: cn("w-full", className), ...props, children: [
showHeader && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
SkeletonText,
{
width: `${100 / columns}%`,
height: 20
},
index
)) }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
SkeletonText,
{
width: `${100 / columns}%`,
height: 16
},
colIndex
)) }, rowIndex)) })
] });
}
);
// src/components/Toast/Toast.tsx
var import_phosphor_react5 = require("phosphor-react");
var import_jsx_runtime9 = require("react/jsx-runtime");
var VARIANT_ACTION_CLASSES3 = {
solid: {
warning: "bg-warning text-warning-600 border-none focus-visible:outline-none",
success: "bg-success text-success-800 border-none focus-visible:outline-none",
info: "bg-info text-info-600 border-none focus-visible:outline-none"
},
outlined: {
warning: "bg-warning text-warning-600 border border-warning-300 focus-visible:outline-none",
success: "bg-success text-success-800 border border-success-200 focus-visible:outline-none",
info: "bg-info text-info-600 border border-info-600 focus-visible:outline-none"
}
};
var iconMap = {
success: import_phosphor_react5.CheckCircle,
info: import_phosphor_react5.Info,
warning: import_phosphor_react5.WarningCircle
};
var Toast = ({
variant = "outlined",
action = "success",
className = "",
onClose,
title,
description,
position = "default",
...props
}) => {
const variantClasses = VARIANT_ACTION_CLASSES3[variant][action];
const positionClasses = {
"top-left": "fixed top-4 left-4",
"top-center": "fixed top-4 left-1/2 transform -translate-x-1/2",
"top-right": "fixed top-4 right-4",
"bottom-left": "fixed bottom-4 left-4",
"bottom-center": "fixed bottom-4 left-1/2 transform -translate-x-1/2",
"bottom-right": "fixed bottom-4 right-4",
default: ""
};
const IconAction = iconMap[action] || iconMap["success"];
const baseClasses = "max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group";
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
"div",
{
role: "alert",
"aria-live": "assertive",
"aria-atomic": "true",
className: cn(
baseClasses,
positionClasses[position],
variantClasses,
className
),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-row items-start gap-3", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "mt-1", "data-testid": `toast-icon-${action}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconAction, {}) }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col items-start justify-start", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "font-semibold text-md", children: title }),
description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-md text-text-900", children: description })
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"button",
{
onClick: onClose,
"aria-label": "Dismiss notification",
className: "text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity",
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_phosphor_react5.X, {})
}
)
]
}
);
};
var Toast_default = Toast;
// src/components/Menu/Menu.tsx
var import_zustand2 = require("zustand");
var import_react6 = require("react");
var import_phosphor_react6 = require("phosphor-react");
var import_jsx_runtime10 = require("react/jsx-runtime");
var createMenuStore = (onValueChange) => (0, import_zustand2.create)((set) => ({
value: "",
setValue: (value) => {
set({ value });
onValueChange?.(value);
},
onValueChange
}));
var useMenuStore = (externalStore) => {
if (!externalStore) throw new Error("MenuItem must be inside Menu");
return externalStore;
};
var VARIANT_CLASSES3 = {
menu: "bg-background shadow-soft-shadow-1 px-6",
menu2: "",
"menu-overflow": "",
breadcrumb: "bg-transparent shadow-none !px-0"
};
var Menu = (0, import_react6.forwardRef)(
({
className,
children,
defaultValue,
value: propValue,
variant = "menu",
onValueChange,
...props
}, ref) => {
const storeRef = (0, import_react6.useRef)(null);
storeRef.current ??= createMenuStore(onValueChange);
const store = storeRef.current;
const { setValue } = (0, import_zustand2.useStore)(store, (s) => s);
(0, import_react6.useEffect)(() => {
setValue(propValue ?? defaultValue);
}, [defaultValue, propValue, setValue]);
const baseClasses = variant === "menu-overflow" ? "w-fit py-2 flex flex-row items-center justify-center" : "w-full py-2 flex flex-row items-center justify-center";
const variantClasses = VARIANT_CLASSES3[variant];
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"div",
{
ref,
className: `
${baseClasses}
${variantClasses}
${className ?? ""}
`,
...props,
children: injectStore2(children, store)
}
);
}
);
Menu.displayName = "Menu";
var MenuContent = (0, import_react6.forwardRef)(
({ className, children, variant = "menu", ...props }, ref) => {
const baseClasses = "w-full flex flex-row items-center gap-2";
const variantClasses = variant === "menu2" || variant === "menu-overflow" ? "overflow-x-auto scroll-smooth" : "";
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"ul",
{
ref,
className: `
${baseClasses}
${variantClasses}
${variant == "breadcrumb" ? "flex-wrap" : ""}
${className ?? ""}
`,
style: variant === "menu2" || variant === "menu-overflow" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
...props,
children
}
);
}
);
MenuContent.displayName = "MenuContent";
var MenuItem = (0, import_react6.forwardRef)(
({
className,
children,
value,
disabled = false,
store: externalStore,
variant = "menu",
separator = false,
...props
}, ref) => {
const store = useMenuStore(externalStore);
const { value: selectedValue, setValue } = (0, import_zustand2.useStore)(store, (s) => s);
const handleClick = (e) => {
if (!disabled) {
setValue(value);
}
props.onClick?.(e);