analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1,477 lines (1,462 loc) • 305 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/index.ts
var src_exports = {};
__export(src_exports, {
Alert: () => Alert_default,
AlertDialog: () => AlertDialog,
AlternativesList: () => AlternativesList,
AuthProvider: () => AuthProvider,
Badge: () => Badge_default,
Button: () => Button_default,
Calendar: () => Calendar_default,
CardAccordation: () => CardAccordation,
CardActivitiesResults: () => CardActivitiesResults,
CardPerformance: () => CardPerformance,
CardProgress: () => CardProgress,
CardQuestions: () => CardQuestions,
CardResults: () => CardResults,
CardSimulado: () => CardSimulado,
CardSimulationHistory: () => CardSimulationHistory,
CardStatus: () => CardStatus,
CardTest: () => CardTest,
CardTopic: () => CardTopic,
CheckBox: () => CheckBox_default,
CheckboxList: () => CheckboxList_default,
CheckboxListItem: () => CheckboxListItem,
Chips: () => Chips_default,
Divider: () => Divider_default,
DropdownMenu: () => DropdownMenu_default,
DropdownMenuContent: () => DropdownMenuContent,
DropdownMenuItem: () => DropdownMenuItem,
DropdownMenuSeparator: () => DropdownMenuSeparator,
DropdownMenuTrigger: () => DropdownMenuTrigger,
IconButton: () => IconButton_default,
IconRender: () => IconRender_default,
IconRoundedButton: () => IconRoundedButton_default,
Input: () => Input_default,
Menu: () => Menu_default,
MenuContent: () => MenuContent,
MenuItem: () => MenuItem,
MenuLabel: () => MenuLabel,
MenuOverflow: () => MenuOverflow,
Modal: () => Modal_default,
MultipleChoiceList: () => MultipleChoiceList,
NavButton: () => NavButton_default,
NotFound: () => NotFound_default,
ProfileMenuFooter: () => ProfileMenuFooter,
ProfileMenuHeader: () => ProfileMenuHeader,
ProfileMenuSection: () => ProfileMenuSection,
ProfileMenuTrigger: () => ProfileMenuTrigger,
ProgressBar: () => ProgressBar_default,
ProgressCircle: () => ProgressCircle_default,
ProtectedRoute: () => ProtectedRoute,
PublicRoute: () => PublicRoute,
Quiz: () => Quiz,
QuizAlternative: () => QuizAlternative,
QuizContent: () => QuizContent,
QuizFooter: () => QuizFooter,
QuizHeader: () => QuizHeader,
QuizHeaderResult: () => QuizHeaderResult,
QuizListResult: () => QuizListResult,
QuizListResultByMateria: () => QuizListResultByMateria,
QuizQuestionList: () => QuizQuestionList,
QuizResultHeaderTitle: () => QuizResultHeaderTitle,
QuizResultPerformance: () => QuizResultPerformance,
QuizResultTitle: () => QuizResultTitle,
QuizTitle: () => QuizTitle,
Radio: () => Radio_default,
RadioGroup: () => RadioGroup,
RadioGroupItem: () => RadioGroupItem,
Search: () => Search_default,
Select: () => Select_default,
SelectContent: () => SelectContent,
SelectItem: () => SelectItem,
SelectTrigger: () => SelectTrigger,
SelectValue: () => SelectValue,
SelectionButton: () => SelectionButton_default,
Skeleton: () => Skeleton,
SkeletonCard: () => SkeletonCard,
SkeletonCircle: () => SkeletonCircle,
SkeletonList: () => SkeletonList,
SkeletonRectangle: () => SkeletonRectangle,
SkeletonRounded: () => SkeletonRounded,
SkeletonTable: () => SkeletonTable,
SkeletonText: () => SkeletonText,
Stepper: () => Stepper_default,
Table: () => Table_default,
Text: () => Text_default,
TextArea: () => TextArea_default,
Toast: () => Toast_default,
Toaster: () => Toaster_default,
createZustandAuthAdapter: () => createZustandAuthAdapter,
getRootDomain: () => getRootDomain,
useApiConfig: () => useApiConfig,
useAuth: () => useAuth,
useAuthGuard: () => useAuthGuard,
useQuizStore: () => useQuizStore,
useRouteAuth: () => useRouteAuth,
useToastStore: () => ToastStore_default,
useUrlAuthentication: () => useUrlAuthentication,
withAuth: () => withAuth
});
module.exports = __toCommonJS(src_exports);
// 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/Button/Button.tsx
var import_jsx_runtime2 = 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_CLASSES = {
"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_CLASSES[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_runtime2.jsxs)(
"button",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
disabled,
type,
...props,
children: [
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mr-2 flex items-center", children: iconLeft }),
children,
iconRight && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-2 flex items-center", children: iconRight })
]
}
);
};
var Button_default = Button;
// src/components/Badge/Badge.tsx
var import_phosphor_react = require("phosphor-react");
var import_jsx_runtime3 = 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_CLASSES2 = {
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_CLASSES2[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_runtime3.jsxs)(
"div",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_phosphor_react.Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
notificationActive && /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsxs)(
"div",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
...props,
children: [
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
children,
iconRight && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
]
}
);
};
var Badge_default = Badge;
// src/components/Alert/Alert.tsx
var import_phosphor_react2 = require("phosphor-react");
var import_jsx_runtime4 = require("react/jsx-runtime");
var VARIANT_ACTION_CLASSES3 = {
solid: {
default: "bg-background-50 border-transparent",
info: "bg-info border-transparent",
success: "bg-success border-transparent",
warning: "bg-warning border-transparent",
error: "bg-error border-transparent"
},
outline: {
default: "bg-background border border-border-100",
info: "bg-background border border-border-100",
success: "bg-background border border-border-100",
warning: "bg-background border border-border-100",
error: "bg-background border border-border-100"
}
};
var COLOR_CLASSES = {
default: "text-text-950",
info: "text-info-800",
success: "text-success-800",
warning: "text-warning-800",
error: "text-error-800"
};
var ICONS = {
default: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.CheckCircle, { size: 18 }),
info: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.Info, { size: 18 }),
success: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.CheckCircle, { size: 18 }),
warning: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.WarningCircle, { size: 18 }),
error: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.XCircle, { size: 18 })
};
var Alert = ({
variant = "solid",
title,
description,
action = "default",
className,
...props
}) => {
const baseClasses = "alert-wrapper flex items-start gap-2 w-[384px] py-3 px-4 font-inherit rounded-md";
const variantClasses = VARIANT_ACTION_CLASSES3[variant][action];
const variantColor = COLOR_CLASSES[action];
const variantIcon = ICONS[action];
const hasHeading = Boolean(title);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn(baseClasses, variantClasses, className), ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("mt-0.5", variantColor), children: variantIcon }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
hasHeading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
Text_default,
{
size: "md",
weight: "medium",
color: variantColor,
className: "mb-0.5",
children: title
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
Text_default,
{
size: hasHeading ? "sm" : "md",
weight: "normal",
color: !hasHeading ? variantColor : "text-text-700",
children: description
}
)
] })
] });
};
var Alert_default = Alert;
// src/components/IconButton/IconButton.tsx
var import_react = require("react");
var import_jsx_runtime5 = require("react/jsx-runtime");
var IconButton = (0, import_react.forwardRef)(
({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
const baseClasses = [
"inline-flex",
"items-center",
"justify-center",
"rounded-lg",
"font-medium",
"bg-transparent",
"text-text-950",
"cursor-pointer",
"hover:bg-primary-600",
"hover:text-text",
"focus-visible:outline-none",
"focus-visible:ring-2",
"focus-visible:ring-offset-0",
"focus-visible:ring-indicator-info",
"disabled:opacity-50",
"disabled:cursor-not-allowed",
"disabled:pointer-events-none"
];
const sizeClasses = {
sm: ["w-6", "h-6", "text-sm"],
md: ["w-10", "h-10", "text-base"]
};
const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
const allClasses = [
...baseClasses,
...sizeClasses[size],
...activeClasses
].join(" ");
const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"button",
{
ref,
type: "button",
className: cn(allClasses, className),
disabled,
"aria-pressed": active,
"aria-label": ariaLabel,
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex items-center justify-center", children: icon })
}
);
}
);
IconButton.displayName = "IconButton";
var IconButton_default = IconButton;
// src/components/IconRoundedButton/IconRoundedButton.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var IconRoundedButton = ({
icon,
className = "",
disabled,
...props
}) => {
const baseClasses = [
"inline-flex",
"items-center",
"justify-center",
"w-8",
"h-8",
"rounded-full",
"cursor-pointer",
"border",
"border-background-200",
"bg-background",
"text-text-950",
"hover:shadow-hard-shadow-1",
"focus-visible:outline-none",
"focus-visible:shadow-hard-shadow-1",
"focus-visible:ring-2",
"focus-visible:ring-indicator-info",
"focus-visible:ring-offset-0",
"disabled:opacity-50",
"disabled:cursor-not-allowed"
].join(" ");
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"button",
{
type: "button",
className: cn(baseClasses, className),
disabled,
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "flex items-center justify-center w-5 h-5", children: icon })
}
);
};
var IconRoundedButton_default = IconRoundedButton;
// src/components/NavButton/NavButton.tsx
var import_react2 = require("react");
var import_jsx_runtime7 = require("react/jsx-runtime");
var NavButton = (0, import_react2.forwardRef)(
({ icon, label, selected = false, className = "", disabled, ...props }, ref) => {
const baseClasses = [
"flex",
"flex-col",
"items-center",
"justify-center",
"gap-0.5",
"px-12",
"py-1",
"rounded-sm",
"cursor-pointer",
"text-text-950",
"text-xs",
"font-medium",
"hover:text-text",
"hover:bg-primary-600",
"focus-visible:outline-none",
"focus-visible:ring-2",
"focus-visible:ring-offset-0",
"focus-visible:ring-indicator-info",
"disabled:opacity-50",
"disabled:cursor-not-allowed",
"disabled:pointer-events-none"
];
const stateClasses = selected ? ["bg-primary-50", "text-primary-950"] : [];
const allClasses = [...baseClasses, ...stateClasses].join(" ");
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
"button",
{
ref,
type: "button",
className: cn(allClasses, className),
disabled,
"aria-pressed": selected,
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex items-center justify-center w-5 h-5", children: icon }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "whitespace-nowrap", children: label })
]
}
);
}
);
NavButton.displayName = "NavButton";
var NavButton_default = NavButton;
// src/components/SelectionButton/SelectionButton.tsx
var import_react3 = require("react");
var import_jsx_runtime8 = require("react/jsx-runtime");
var SelectionButton = (0, import_react3.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_runtime8.jsxs)(
"button",
{
ref,
type: "button",
className: cn(allClasses, className),
disabled,
"aria-pressed": selected,
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: label })
]
}
);
}
);
SelectionButton.displayName = "SelectionButton";
var SelectionButton_default = SelectionButton;
// src/components/Table/Table.tsx
var import_react4 = require("react");
var import_jsx_runtime9 = require("react/jsx-runtime");
var Table = (0, import_react4.forwardRef)(
({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
"table",
{
ref,
className: cn("w-full caption-bottom text-sm", className),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("caption", { className: "sr-only", children: "My Table" }),
children
]
}
) })
);
Table.displayName = "Table";
var TableHeader = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"thead",
{
ref,
className: cn("[&_tr:first-child]:border-0", className),
...props
}
));
TableHeader.displayName = "TableHeader";
var TableBody = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"tbody",
{
ref,
className: cn(
"[&_tr:last-child]:border-0 border-t border-border-200",
className
),
...props
}
));
TableBody.displayName = "TableBody";
var TableFooter = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"tfoot",
{
ref,
className: cn(
"border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5",
className
),
...props
}
));
TableFooter.displayName = "TableFooter";
var VARIANT_STATES_ROW = {
default: "border-b border-border-200",
selected: "border-b-2 border-indicator-primary",
invalid: "border-b-2 border-indicator-error",
disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed"
};
var TableRow = (0, import_react4.forwardRef)(
({ state = "default", className, ...props }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"tr",
{
ref,
className: cn(
"transition-colors",
state !== "disabled" ? "hover:bg-muted/50" : "",
VARIANT_STATES_ROW[state],
className
),
"aria-disabled": state === "disabled",
...props
}
);
}
);
TableRow.displayName = "TableRow";
var TableHead = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"th",
{
ref,
className: cn(
"h-10 px-6 py-3.5 bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className
),
...props
}
));
TableHead.displayName = "TableHead";
var TableCell = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"td",
{
ref,
className: cn(
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5",
className
),
...props
}
));
TableCell.displayName = "TableCell";
var TableCaption = (0, import_react4.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"caption",
{
ref,
className: cn(
"border-t border-border-200 text-sm text-text-800 px-6 py-3.5",
className
),
...props
}
));
TableCaption.displayName = "TableCaption";
var Table_default = Table;
// src/components/CheckBox/CheckBox.tsx
var import_react5 = require("react");
var import_phosphor_react3 = require("phosphor-react");
var import_jsx_runtime10 = require("react/jsx-runtime");
var SIZE_CLASSES3 = {
small: {
checkbox: "w-4 h-4",
// 16px x 16px
textSize: "sm",
spacing: "gap-1.5",
// 6px
borderWidth: "border-2",
iconSize: 14,
// pixels for Phosphor icons
labelHeight: "h-[21px]"
},
medium: {
checkbox: "w-5 h-5",
// 20px x 20px
textSize: "md",
spacing: "gap-2",
// 8px
borderWidth: "border-2",
iconSize: 16,
// pixels for Phosphor icons
labelHeight: "h-6"
},
large: {
checkbox: "w-6 h-6",
// 24px x 24px
textSize: "lg",
spacing: "gap-2",
// 8px
borderWidth: "border-[3px]",
// 3px border
iconSize: 20,
// pixels for Phosphor icons
labelHeight: "h-[27px]"
}
};
var BASE_CHECKBOX_CLASSES = "rounded 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-primary-950 text-text hover:border-primary-800 hover:bg-primary-800"
},
hovered: {
unchecked: "border-border-500 bg-background",
checked: "border-primary-800 bg-primary-800 text-text"
},
focused: {
unchecked: "border-indicator-info bg-background ring-2 ring-indicator-info/20",
checked: "border-indicator-info bg-primary-950 text-text ring-2 ring-indicator-info/20"
},
invalid: {
unchecked: "border-error-700 bg-background hover:border-error-600",
checked: "border-error-700 bg-primary-950 text-text"
},
disabled: {
unchecked: "border-border-400 bg-background cursor-not-allowed opacity-40",
checked: "border-primary-600 bg-primary-600 text-text cursor-not-allowed opacity-40"
}
};
var CheckBox = (0, import_react5.forwardRef)(
({
label,
size = "medium",
state = "default",
indeterminate = false,
errorMessage,
helperText,
className = "",
labelClassName = "",
checked: checkedProp,
disabled,
id,
onChange,
...props
}, ref) => {
const generatedId = (0, import_react5.useId)();
const inputId = id ?? `checkbox-${generatedId}`;
const [internalChecked, setInternalChecked] = (0, import_react5.useState)(false);
const isControlled = checkedProp !== void 0;
const checked = isControlled ? checkedProp : internalChecked;
const handleChange = (event) => {
if (!isControlled) {
setInternalChecked(event.target.checked);
}
onChange?.(event);
};
const currentState = disabled ? "disabled" : state;
const sizeClasses = SIZE_CLASSES3[size];
const checkVariant = checked || indeterminate ? "checked" : "unchecked";
const stylingClasses = STATE_CLASSES[currentState][checkVariant];
const borderWidthClass = state === "focused" || state === "hovered" && size === "large" ? "border-[3px]" : sizeClasses.borderWidth;
const checkboxClasses = cn(
BASE_CHECKBOX_CLASSES,
sizeClasses.checkbox,
borderWidthClass,
stylingClasses,
className
);
const renderIcon = () => {
if (indeterminate) {
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
import_phosphor_react3.Minus,
{
size: sizeClasses.iconSize,
weight: "bold",
color: "currentColor"
}
);
}
if (checked) {
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
import_phosphor_react3.Check,
{
size: sizeClasses.iconSize,
weight: "bold",
color: "currentColor"
}
);
}
return null;
};
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col", children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
"div",
{
className: cn(
"flex flex-row items-center",
sizeClasses.spacing,
disabled ? "opacity-40" : ""
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"input",
{
ref,
type: "checkbox",
id: inputId,
checked,
disabled,
onChange: handleChange,
className: "sr-only",
...props
}
),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"div",
{
className: cn(
"flex flex-row items-center",
sizeClasses.labelHeight
),
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
Text_default,
{
as: "label",
htmlFor: inputId,
size: sizeClasses.textSize,
weight: "normal",
className: cn(
"cursor-pointer select-none leading-[150%] flex items-center font-roboto",
labelClassName
),
children: label
}
)
}
)
]
}
),
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
Text_default,
{
size: "sm",
weight: "normal",
className: "mt-1.5",
color: "text-error-600",
children: errorMessage
}
),
helperText && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
Text_default,
{
size: "sm",
weight: "normal",
className: "mt-1.5",
color: "text-text-500",
children: helperText
}
)
] });
}
);
CheckBox.displayName = "CheckBox";
var CheckBox_default = CheckBox;
// src/components/CheckBox/CheckboxList.tsx
var import_react6 = require("react");
var import_zustand = require("zustand");
var import_jsx_runtime11 = require("react/jsx-runtime");
var createCheckboxListStore = (name, defaultValues, disabled, onValuesChange) => (0, import_zustand.create)((set, get) => ({
values: defaultValues,
setValues: (values) => {
if (!get().disabled) {
set({ values });
get().onValuesChange?.(values);
}
},
toggleValue: (value) => {
if (!get().disabled) {
const currentValues = get().values;
const newValues = currentValues.includes(value) ? currentValues.filter((v) => v !== value) : [...currentValues, value];
set({ values: newValues });
get().onValuesChange?.(newValues);
}
},
onValuesChange,
disabled,
name
}));
var useCheckboxListStore = (externalStore) => {
if (!externalStore) {
throw new Error("CheckboxListItem must be used within a CheckboxList");
}
return externalStore;
};
var injectStore = (children, store) => import_react6.Children.map(children, (child) => {
if (!(0, import_react6.isValidElement)(child)) return child;
const typedChild = child;
const shouldInject = typedChild.type === CheckboxListItem;
return (0, import_react6.cloneElement)(typedChild, {
...shouldInject ? { store } : {},
...typedChild.props.children ? { children: injectStore(typedChild.props.children, store) } : {}
});
});
var CheckboxList = (0, import_react6.forwardRef)(
({
values: propValues,
defaultValues = [],
onValuesChange,
name: propName,
disabled = false,
className = "",
children,
...props
}, ref) => {
const generatedId = (0, import_react6.useId)();
const name = propName || `checkbox-list-${generatedId}`;
const storeRef = (0, import_react6.useRef)(null);
storeRef.current ??= createCheckboxListStore(
name,
defaultValues,
disabled,
onValuesChange
);
const store = storeRef.current;
const { setValues } = (0, import_zustand.useStore)(store, (s) => s);
(0, import_react6.useEffect)(() => {
const currentValues = store.getState().values;
if (currentValues.length > 0 && onValuesChange) {
onValuesChange(currentValues);
}
}, []);
(0, import_react6.useEffect)(() => {
if (propValues !== void 0) {
setValues(propValues);
}
}, [propValues, setValues]);
(0, import_react6.useEffect)(() => {
store.setState({ disabled });
}, [disabled, store]);
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
"div",
{
ref,
className: cn("flex flex-col gap-2 w-full", className),
"aria-label": name,
...props,
children: injectStore(children, store)
}
);
}
);
CheckboxList.displayName = "CheckboxList";
var CheckboxListItem = (0, import_react6.forwardRef)(
({
value,
store: externalStore,
disabled: itemDisabled,
size = "medium",
state = "default",
className = "",
id,
...props
}, ref) => {
const store = useCheckboxListStore(externalStore);
const {
values: groupValues,
toggleValue,
disabled: groupDisabled,
name
} = (0, import_zustand.useStore)(store);
const generatedId = (0, import_react6.useId)();
const inputId = id ?? `checkbox-item-${generatedId}`;
const isChecked = groupValues.includes(value);
const isDisabled = groupDisabled || itemDisabled;
const currentState = isDisabled ? "disabled" : state;
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
CheckBox_default,
{
ref,
id: inputId,
name,
value,
checked: isChecked,
disabled: isDisabled,
size,
state: currentState,
className,
onChange: () => {
if (!isDisabled) {
toggleValue(value);
}
},
...props
}
);
}
);
CheckboxListItem.displayName = "CheckboxListItem";
var CheckboxList_default = CheckboxList;
// src/components/Radio/Radio.tsx
var import_react7 = require("react");
var import_zustand2 = require("zustand");
var import_jsx_runtime12 = require("react/jsx-runtime");
var SIZE_CLASSES4 = {
small: {
radio: "w-5 h-5",
textSize: "sm",
spacing: "gap-1.5",
borderWidth: "border-2",
dotSize: "w-2.5 h-2.5",
labelHeight: "h-5"
},
medium: {
radio: "w-6 h-6",
textSize: "md",
spacing: "gap-2",
borderWidth: "border-2",
dotSize: "w-3 h-3",
labelHeight: "h-6"
},
large: {
radio: "w-7 h-7",
textSize: "lg",
spacing: "gap-2",
borderWidth: "border-2",
dotSize: "w-3.5 h-3.5",
labelHeight: "h-7"
},
extraLarge: {
radio: "w-8 h-8",
textSize: "xl",
spacing: "gap-3",
borderWidth: "border-2",
dotSize: "w-4 h-4",
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_CLASSES2 = {
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",
checked: "border-info-700 bg-background"
},
focused: {
unchecked: "border-border-400 bg-background",
checked: "border-primary-950 bg-background"
},
invalid: {
unchecked: "border-border-400 bg-background",
checked: "border-primary-950 bg-background"
},
disabled: {
unchecked: "border-border-400 bg-background cursor-not-allowed",
checked: "border-primary-950 bg-background cursor-not-allowed"
}
};
var DOT_CLASSES = {
default: "bg-primary-950",
hovered: "bg-info-700",
focused: "bg-primary-950",
invalid: "bg-primary-950",
disabled: "bg-primary-950"
};
var Radio = (0, import_react7.forwardRef)(
({
label,
size = "medium",
state = "default",
errorMessage,
helperText,
className = "",
labelClassName = "",
checked: checkedProp,
defaultChecked = false,
disabled,
id,
name,
value,
onChange,
...props
}, ref) => {
const generatedId = (0, import_react7.useId)();
const inputId = id ?? `radio-${generatedId}`;
const inputRef = (0, import_react7.useRef)(null);
const [internalChecked, setInternalChecked] = (0, import_react7.useState)(defaultChecked);
const isControlled = checkedProp !== void 0;
const checked = isControlled ? checkedProp : internalChecked;
const handleChange = (event) => {
const newChecked = event.target.checked;
if (!isControlled) {
setInternalChecked(newChecked);
}
if (event.target) {
event.target.blur();
}
onChange?.(event);
};
const currentState = disabled ? "disabled" : state;
const sizeClasses = SIZE_CLASSES4[size];
const actualRadioSize = sizeClasses.radio;
const actualDotSize = sizeClasses.dotSize;
const radioVariant = checked ? "checked" : "unchecked";
const stylingClasses = STATE_CLASSES2[currentState][radioVariant];
const getBorderWidth = () => {
if (currentState === "focused") {
return "border-2";
}
return sizeClasses.borderWidth;
};
const borderWidthClass = getBorderWidth();
const radioClasses = cn(
BASE_RADIO_CLASSES,
actualRadioSize,
borderWidthClass,
stylingClasses,
className
);
const dotClasses = cn(
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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col", children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
"div",
{
className: cn(
"flex flex-row items-center",
isWrapperNeeded ? cn("p-1 border-2", wrapperBorderColor, "rounded-lg gap-1.5") : sizeClasses.spacing,
disabled ? "opacity-40" : ""
),
children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
"input",
{
ref: (node) => {
inputRef.current = node;
if (typeof ref === "function") ref(node);
else if (ref) ref.current = node;
},
type: "radio",
id: inputId,
checked,
disabled,
name,
value,
onChange: handleChange,
className: "sr-only",
style: {
position: "absolute",
left: "-9999px",
visibility: "hidden"
},
...props
}
),
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
"button",
{
type: "button",
className: radioClasses,
disabled,
"aria-pressed": checked,
onClick: (e) => {
e.preventDefault();
if (!disabled) {
if (inputRef.current) {
inputRef.current.click();
inputRef.current.blur();
}
}
},
onKeyDown: (e) => {
if ((e.key === "Enter" || e.key === " ") && !disabled) {
e.preventDefault();
if (inputRef.current) {
inputRef.current.click();
inputRef.current.blur();
}
}
},
children: checked && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: dotClasses })
}
),
label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
"div",
{
className: cn(
"flex flex-row items-center",
sizeClasses.labelHeight,
"flex-1 min-w-0"
),
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
Text_default,
{
as: "label",
htmlFor: inputId,
size: sizeClasses.textSize,
weight: "normal",
className: cn(
getCursorClass(),
"select-none leading-normal flex items-center font-roboto truncate",
labelClassName
),
color: getTextColor(),
children: label
}
)
}
)
]
}
),
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
Text_default,
{
size: "sm",
weight: "normal",
className: "mt-1.5 truncate",
color: "text-error-600",
children: errorMessage
}
),
helperText && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
Text_default,
{
size: "sm",
weight: "normal",
className: "mt-1.5 truncate",
color: "text-text-500",
children: helperText
}
)
] });
}
);
Radio.displayName = "Radio";
var createRadioGroupStore = (name, defaultValue, disabled, onValueChange) => (0, import_zustand2.create)((set, get) => ({
value: defaultValue,
setValue: (value) => {
if (!get().disabled) {
set({ value });
get().onValueChange?.(value);
}
},
onValueChange,
disabled,
name
}));
var useRadioGroupStore = (externalStore) => {
if (!externalStore) {
throw new Error("RadioGroupItem must be used within a RadioGroup");
}
return externalStore;
};
var injectStore2 = (children, store) => import_react7.Children.map(children, (child) => {
if (!(0, import_react7.isValidElement)(child)) return child;
const typedChild = child;
const shouldInject = typedChild.type === RadioGroupItem;
return (0, import_react7.cloneElement)(typedChild, {
...shouldInject ? { store } : {},
...typedChild.props.children ? { children: injectStore2(typedChild.props.children, store) } : {}
});
});
var RadioGroup = (0, import_react7.forwardRef)(
({
value: propValue,
defaultValue = "",
onValueChange,
name: propName,
disabled = false,
className = "",
children,
...props
}, ref) => {
const generatedId = (0, import_react7.useId)();
const name = propName || `radio-group-${generatedId}`;
const storeRef = (0, import_react7.useRef)(null);
storeRef.current ??= createRadioGroupStore(
name,
defaultValue,
disabled,
onValueChange
);
const store = storeRef.current;
const { setValue } = (0, import_zustand2.useStore)(store, (s) => s);
(0, import_react7.useEffect)(() => {
const currentValue = store.getState().value;
if (currentValue && onValueChange) {
onValueChange(currentValue);
}
}, []);
(0, import_react7.useEffect)(() => {
if (propValue !== void 0) {
setValue(propValue);
}
}, [propValue, setValue]);
(0, import_react7.useEffect)(() => {
store.setState({ disabled });
}, [disabled, store]);
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
"div",
{
ref,
className,
role: "radiogroup",
"aria-label": name,
...props,
children: injectStore2(children, store)
}
);
}
);
RadioGroup.displayName = "RadioGroup";
var RadioGroupItem = (0, import_react7.forwardRef)(
({
value,
store: externalStore,
disabled: itemDisabled,
size = "medium",
state = "default",
className = "",
id,
...props
}, ref) => {
const store = useRadioGroupStore(externalStore);
const {
value: groupValue,
setValue,
disabled: groupDisabled,
name
} = (0, import_zustand2.useStore)(store);
const generatedId = (0, import_react7.useId)();
const inputId = id ?? `radio-item-${generatedId}`;
const isChecked = groupValue === value;
const isDisabled = groupDisabled || itemDisabled;
const currentState = isDisabled ? "disabled" : state;
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
Radio,
{
ref,
id: inputId,
name,
value,
checked: isChecked,
disabled: isDisabled,
size,
state: currentState,
className,
onChange: (e) => {
if (e.target.checked && !isDisabled) {
setValue(value);
}
},
...props
}
);
}
);
RadioGroupItem.displayName = "RadioGroupItem";
var Radio_default = Radio;
// src/components/TextArea/TextArea.tsx
var import_react8 = require("react");
var import_phosphor_react4 = require("phosphor-react");
var import_jsx_runtime13 = require("react/jsx-runtime");
var SIZE_CLASSES5 = {
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