atenea-components 1.4.17

package/dist/components/molecules/CountdownCard.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type Probability = "alta" | "media" | "baja";
+interface CountdownCardProps {
+    /** Days remaining until exam */
+    daysRemaining: number;
+    /** Exam date string (e.g., "30/07/2026") */
+    examDate: string;
+    /** Probability level */
+    probability?: Probability;
+    /** Optional className */
+    className?: string;
+}
+export declare const CountdownCard: React.FC<CountdownCardProps>;
+export {};

package/dist/components/molecules/CountdownCard.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CountdownCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const probabilityConfig = {
+    alta: {
+        label: "Alta",
+        color: "text-primary-600",
+        bgColor: "bg-primary-500",
+    },
+    media: {
+        label: "Media",
+        color: "text-amber-600",
+        bgColor: "bg-amber-500",
+    },
+    baja: {
+        label: "Baja",
+        color: "text-red-600",
+        bgColor: "bg-red-500",
+    },
+};
+const CountdownCard = ({ daysRemaining, examDate, probability = "alta", className, }) => {
+    const config = probabilityConfig[probability];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("p-5 bg-white rounded-2xl border border-gray-100", className), children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-textAtenea-500 mb-1", children: "Todav\u00EDa faltan..." }), (0, jsx_runtime_1.jsxs)("p", { className: "text-4xl font-bold text-textAtenea-900 mb-1", children: [daysRemaining, " d\u00EDas"] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-textAtenea-500 mb-4", children: ["Fecha de tu examen: ", examDate] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-textAtenea-500", children: "Probabilidad de aprobado" }), (0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)("text-sm font-semibold", config.color), children: config.label })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full h-2 bg-gray-100 rounded-full overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)("h-full rounded-full transition-all", config.bgColor), style: { width: probability === "alta" ? "100%" : probability === "media" ? "60%" : "30%" } }) })] }));
+};
+exports.CountdownCard = CountdownCard;

package/dist/components/molecules/DashboardCard.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface DashboardCardProps {
+    title?: string;
+    mainText?: string;
+    countdown?: string;
+    caption?: string;
+    button?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+export declare const DashboardCard: React.FC<DashboardCardProps>;
+export {};

package/dist/components/molecules/DashboardCard.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../atoms/Button");
+const DashboardCard = ({ title, mainText, countdown, caption, button, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white border border-grey-200 rounded-lg p-6 flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 flex-grow", children: [title && (0, jsx_runtime_1.jsx)("p", { className: "text-s2 text-grey-400", children: title }), mainText && (0, jsx_runtime_1.jsx)("p", { className: "text-s1 text-grey-900", children: mainText }), countdown && ((0, jsx_runtime_1.jsx)("div", { className: "text-h1 text-violetAtenea-500", children: countdown })), caption && (0, jsx_runtime_1.jsx)("p", { className: "text-c1 text-grey-500", children: caption })] }), button && ((0, jsx_runtime_1.jsx)("div", { className: "pt-4 mt-auto", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: button.onClick, variant: "secondary", size: "small", children: button.label }) }))] }));
+};
+exports.DashboardCard = DashboardCard;

package/dist/components/molecules/FilterBar.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface FilterConfig {
+    key: string;
+    label: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    value?: string;
+    placeholder?: string;
+}
+export interface FilterBarProps {
+    filters: FilterConfig[];
+    onFilterChange: (key: string, value: string | undefined) => void;
+    onClearAll?: () => void;
+    clearAllLabel?: string;
+    className?: string;
+}
+export declare const FilterBar: React.FC<FilterBarProps>;

package/dist/components/molecules/FilterBar.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SelectDropdown_1 = require("../atoms/SelectDropdown");
+const Button_1 = require("../atoms/Button");
+const IconCancel_1 = require("../icons/IconCancel");
+const FilterBar = ({ filters, onFilterChange, onClearAll, clearAllLabel = "Clear all filters", className = "", }) => {
+    const hasActiveFilters = filters.some((filter) => filter.value);
+    const handleClearFilter = (key) => {
+        onFilterChange(key, undefined);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex flex-wrap items-center gap-4 ${className}`, children: [filters.map((filter) => ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("label", { className: "text-sm font-medium text-grey-700 whitespace-nowrap", children: [filter.label, ":"] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex items-center", children: [(0, jsx_runtime_1.jsx)(SelectDropdown_1.SelectDropdown, { options: filter.options, value: filter.value, onChange: (value) => onFilterChange(filter.key, value), placeholder: filter.placeholder || `Select ${filter.label.toLowerCase()}`, size: "small" }), filter.value && ((0, jsx_runtime_1.jsx)("button", { onClick: () => handleClearFilter(filter.key), className: "ml-2 p-1 text-grey-400 hover:text-grey-600 transition-colors flex-shrink-0", "aria-label": `Clear ${filter.label} filter`, children: (0, jsx_runtime_1.jsx)(IconCancel_1.IconCancel, { className: "w-4 h-4" }) }))] })] }) }, filter.key))), hasActiveFilters && onClearAll && ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClearAll, variant: "secondary", size: "small", children: clearAllLabel }))] }));
+};
+exports.FilterBar = FilterBar;

package/dist/components/molecules/Flashcard.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface FlashcardProps {
+    /** Content to display in the default state (usually a question) */
+    defaultContent: string;
+    /** Content to display in the flipped state (usually an answer) */
+    flippedContent: string;
+    /** Text for the flip handler button */
+    flipHandlerText?: string;
+    /** Additional classes for the container */
+    className?: string;
+}
+export declare const Flashcard: React.FC<FlashcardProps>;
+export default Flashcard;

package/dist/components/molecules/Flashcard.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Flashcard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const clsx_1 = __importDefault(require("clsx"));
+const baseContainer = "w-[90vw] h-[300px] sm:w-[500px] sm:h-[350px] md:w-[660px] md:h-[400px] max-w-full [perspective:1000px]";
+const cardBase = "absolute w-full h-full rounded-lg border flex flex-col items-center justify-center p-6 text-center";
+const Flashcard = ({ defaultContent, flippedContent, flipHandlerText = "Voltea", className, }) => {
+    const [isFlipped, setIsFlipped] = (0, react_1.useState)(false);
+    const handleFlip = () => {
+        setIsFlipped((prev) => !prev);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)(baseContainer, className), onClick: handleFlip, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("relative w-full h-full transition-transform duration-700 [transform-style:preserve-3d]", isFlipped && "[transform:rotateY(180deg)]"), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)(cardBase, "bg-white-100 border-grey-200 hover:border-grey-300 [backface-visibility:hidden]"), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-textAtenea-700 text-h5 leading-relaxed", children: defaultContent }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 text-grey-500 text-b1 hover:text-grey-700 transition-colors", children: flipHandlerText })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)(cardBase, "bg-grey-200 border-grey-300 [backface-visibility:hidden] [transform:rotateY(180deg)]"), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-textAtenea-700 text-s1 leading-relaxed", children: flippedContent }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 text-grey-500 text-b1 hover:text-grey-700 transition-colors", children: flipHandlerText })] })] }) }));
+};
+exports.Flashcard = Flashcard;
+exports.default = exports.Flashcard;

package/dist/components/molecules/GlobalProgressCard.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export type ProgressCategory = "teoria" | "supuestos" | "programacion";
+export interface ProgressItem {
+    /** Category identifier */
+    category: ProgressCategory;
+    /** Display label */
+    label: string;
+    /** Subtitle (e.g., "20 temas estudiados") */
+    subtitle: string;
+    /** Percentage (0-100) */
+    percentage: number;
+}
+interface GlobalProgressCardProps {
+    /** Array of progress items */
+    items: ProgressItem[];
+    /** Card title */
+    title?: string;
+    /** Optional className */
+    className?: string;
+}
+export declare const GlobalProgressCard: React.FC<GlobalProgressCardProps>;
+export {};

package/dist/components/molecules/GlobalProgressCard.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalProgressCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const IconBook_1 = require("../icons/IconBook");
+const IconPencil_1 = require("../icons/IconPencil");
+const IconFile_1 = require("../icons/IconFile");
+const categoryConfig = {
+    teoria: {
+        icon: IconBook_1.IconBook,
+        iconBg: "bg-orange-100",
+        iconColor: "text-orange-600",
+    },
+    supuestos: {
+        icon: IconPencil_1.IconPencil,
+        iconBg: "bg-primary-100",
+        iconColor: "text-primary-600",
+    },
+    programacion: {
+        icon: IconFile_1.IconFile,
+        iconBg: "bg-violet-100",
+        iconColor: "text-violet-600",
+    },
+};
+const GlobalProgressCard = ({ items, title = "Progreso global", className, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("p-5 bg-white rounded-2xl border border-gray-100", className), children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-base font-semibold text-textAtenea-900 mb-4", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: items.map((item) => {
+                    const config = categoryConfig[item.category];
+                    const IconComponent = config.icon;
+                    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)("w-10 h-10 rounded-lg flex items-center justify-center", config.iconBg), children: (0, jsx_runtime_1.jsx)(IconComponent, { size: 20, className: config.iconColor }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-textAtenea-900", children: item.label }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-textAtenea-500", children: item.subtitle })] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-base font-bold text-textAtenea-900", children: [item.percentage, "%"] })] }, item.category));
+                }) })] }));
+};
+exports.GlobalProgressCard = GlobalProgressCard;

package/dist/components/molecules/MoodTracker.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface MoodTrackerProps {
+    /** Selected mood value (1-5, or null if none) */
+    value: number | null;
+    /** Callback when mood is selected */
+    onChange: (value: number) => void;
+    /** Optional question label */
+    label?: string;
+    /** Optional className */
+    className?: string;
+}
+export declare const MoodTracker: React.FC<MoodTrackerProps>;
+export {};

package/dist/components/molecules/MoodTracker.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoodTracker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+// Mood options with emoji images (using public path)
+const moodOptions = [
+    { value: 1, image: "/images/studyplan/Emoji.png", alt: "Muy mal" },
+    { value: 2, image: "/images/studyplan/Emoji-1.png", alt: "Mal" },
+    { value: 3, image: "/images/studyplan/Emoji-2.png", alt: "Normal" },
+    { value: 4, image: "/images/studyplan/Emoji-3.png", alt: "Bien" },
+    { value: 5, image: "/images/studyplan/Emoji-4.png", alt: "Muy bien" },
+];
+const MoodTracker = ({ value, onChange, label = "¿Cómo te sientes?", className, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("p-5 bg-white rounded-2xl border border-gray-100", className), children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-textAtenea-900 text-center mb-4", children: label }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between gap-2", children: moodOptions.map((option) => {
+                    const isSelected = value === option.value;
+                    return ((0, jsx_runtime_1.jsx)("button", { onClick: () => onChange(option.value), className: (0, clsx_1.default)("w-12 h-12 rounded-full flex items-center justify-center transition-all duration-200", "focus:outline-none focus:ring-2 focus:ring-primary-200", isSelected
+                            ? "ring-2 ring-primary-500 ring-offset-2"
+                            : "hover:scale-110"), "aria-label": option.alt, "aria-pressed": isSelected, children: (0, jsx_runtime_1.jsx)("img", { src: option.image, alt: option.alt, className: "w-10 h-10 object-contain" }) }, option.value));
+                }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between mt-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-textAtenea-400", children: "Muy mal" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-textAtenea-400", children: "Muy bien" })] })] }));
+};
+exports.MoodTracker = MoodTracker;

package/dist/components/molecules/NewsItem.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface NewsItemProps {
+    tag?: {
+        text: string;
+    };
+    title: string;
+    date?: string;
+    time?: string;
+    onClick?: () => void;
+}
+export declare const NewsItem: React.FC<NewsItemProps>;
+export {};

package/dist/components/molecules/NewsItem.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewsItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../atoms/Button");
+const IconArrowRight_1 = require("../icons/IconArrowRight");
+const NewsItem = ({ tag, title, date, time, onClick, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3 border-b border-gray-200 last:border-b-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [tag && ((0, jsx_runtime_1.jsx)("div", { className: "mb-2", children: (0, jsx_runtime_1.jsx)("span", { className: "inline-block px-3 py-1 text-c2 rounded-md bg-gray-100 text-gray-600", children: tag.text }) })), (0, jsx_runtime_1.jsx)("h3", { className: "text-s2 text-textAtenea-900 font-semibold mb-1", children: title }), (date || time) && ((0, jsx_runtime_1.jsx)("p", { className: "text-b3 text-textAtenea-500", children: date && time ? `${date} ${time}` : date || time }))] }), (0, jsx_runtime_1.jsx)("div", { className: "ml-4", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "tertiary", size: "small", onClick: onClick, className: "w-8 h-8", children: (0, jsx_runtime_1.jsx)(IconArrowRight_1.IconArrowRight, { color: "primary-600", size: 20 }) }) })] }));
+};
+exports.NewsItem = NewsItem;

package/dist/components/molecules/PercentageItem.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export type PercentageItemColor = "orange" | "pink" | "blue";
+interface PercentageItemProps {
+    label: string;
+    percentage: number;
+    color?: PercentageItemColor;
+    className?: string;
+}
+export declare const PercentageItem: React.FC<PercentageItemProps>;
+export {};

package/dist/components/molecules/PercentageItem.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PercentageItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colorVariants = {
+    orange: {
+        background: "bg-orange-100",
+        fill: "bg-orange-500",
+        text: "text-orange-500",
+    },
+    pink: {
+        background: "bg-pink-100",
+        fill: "bg-pink-500",
+        text: "text-pink-500",
+    },
+    blue: {
+        background: "bg-blue-100",
+        fill: "bg-blue-500",
+        text: "text-blue-500",
+    },
+};
+const PercentageItem = ({ label, percentage, color = "orange", className = "", }) => {
+    const colors = colorVariants[color];
+    const clampedPercentage = Math.min(Math.max(percentage, 0), 100);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col gap-2 ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "text-textAtenea-900 text-s1", children: label }), (0, jsx_runtime_1.jsx)("div", { className: `w-full h-6 rounded-md ${colors.background} overflow-hidden`, children: (0, jsx_runtime_1.jsx)("div", { className: `h-full ${colors.fill} transition-all duration-300 ease-out`, style: { width: `${clampedPercentage}%` } }) }), (0, jsx_runtime_1.jsxs)("span", { className: `text-b3 ${colors.text}`, children: [clampedPercentage, "%"] })] }));
+};
+exports.PercentageItem = PercentageItem;

package/dist/components/molecules/SleepTracker.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface SleepTrackerProps {
+    /** Selected sleep quality value (1-5, or null if none) */
+    value: number | null;
+    /** Callback when sleep quality is selected */
+    onChange: (value: number) => void;
+    /** Optional question label */
+    label?: string;
+    /** Optional className */
+    className?: string;
+}
+export declare const SleepTracker: React.FC<SleepTrackerProps>;
+export {};

package/dist/components/molecules/SleepTracker.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SleepTracker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+// Sleep options with pillow images (using public path)
+const sleepOptions = [
+    { value: 1, image: "/images/studyplan/Container.png", alt: "Nada" },
+    { value: 2, image: "/images/studyplan/Container-1.png", alt: "Poco" },
+    { value: 3, image: "/images/studyplan/Container-2.png", alt: "Normal" },
+    { value: 4, image: "/images/studyplan/Container-3.png", alt: "Bien" },
+    { value: 5, image: "/images/studyplan/Container-4.png", alt: "Mucho" },
+];
+const SleepTracker = ({ value, onChange, label = "¿Cómo has dormido?", className, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("p-5 bg-white rounded-2xl border border-gray-100", className), children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-textAtenea-900 text-center mb-4", children: label }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between gap-2", children: sleepOptions.map((option) => {
+                    const isSelected = value === option.value;
+                    return ((0, jsx_runtime_1.jsx)("button", { onClick: () => onChange(option.value), className: (0, clsx_1.default)("w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-200", "focus:outline-none focus:ring-2 focus:ring-primary-200", isSelected
+                            ? "ring-2 ring-primary-500 ring-offset-2 bg-primary-50"
+                            : "bg-gray-50 hover:bg-gray-100"), "aria-label": option.alt, "aria-pressed": isSelected, children: (0, jsx_runtime_1.jsx)("img", { src: option.image, alt: option.alt, className: "w-8 h-8 object-contain" }) }, option.value));
+                }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between mt-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-textAtenea-400", children: "Nada" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-textAtenea-400", children: "Mucho" })] })] }));
+};
+exports.SleepTracker = SleepTracker;

package/dist/components/molecules/StreakCard.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface StreakCardProps {
+    /** Number of consecutive study days */
+    streakDays: number;
+    /** Optional label (defaults to "Tu racha") */
+    label?: string;
+    /** Optional className */
+    className?: string;
+}
+export declare const StreakCard: React.FC<StreakCardProps>;
+export {};

package/dist/components/molecules/StreakCard.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StreakCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const StreakCard = ({ streakDays, label = "Tu racha", className, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("flex items-center gap-3 p-4 bg-white rounded-2xl border border-gray-100", className), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-2xl", role: "img", "aria-label": "fuego", children: "\uD83D\uDD25" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-2xl font-bold text-textAtenea-900", children: [streakDays, " d\u00EDas"] }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-textAtenea-500", children: label })] })] }));
+};
+exports.StreakCard = StreakCard;

package/dist/components/molecules/StudyMaterialIntro.d.ts

@@ -0,0 +1,13 @@
+interface StudyMaterialIntroProps {
+    title: string;
+    description: string;
+    showPrimaryButton?: boolean;
+    showSecondaryButton?: boolean;
+    primaryButtonText?: string;
+    secondaryButtonText?: string;
+    onPrimaryClick?: () => void;
+    onSecondaryClick?: () => void;
+    illustrationVariant?: "quiz" | "flashcard";
+}
+export default function StudyMaterialIntro({ title, description, showPrimaryButton, showSecondaryButton, primaryButtonText, secondaryButtonText, onPrimaryClick, onSecondaryClick, illustrationVariant, }: StudyMaterialIntroProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/molecules/StudyMaterialIntro.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = StudyMaterialIntro;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../atoms/Button");
+const IntroIllustration_1 = require("../atoms/IntroIllustration");
+function StudyMaterialIntro({ title, description, showPrimaryButton = true, showSecondaryButton = true, primaryButtonText = "Continuar", secondaryButtonText = "Cancelar", onPrimaryClick, onSecondaryClick, illustrationVariant = "quiz", }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center items-center min-h-[60vh] p-8 h-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 rounded-lg p-8 flex flex-col justify-center items-center max-w-4xl w-full text-center min-h-[60vh]", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-6 flex justify-center items-center h-full", children: (0, jsx_runtime_1.jsx)(IntroIllustration_1.IntroIllustration, { variant: illustrationVariant }) }), (0, jsx_runtime_1.jsx)("h2", { className: "text-h3 font-semibold text-textAtenea-900 mb-3 px-12", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-textAtenea-700 text-b2 mb-8 px-12", children: description }), (showPrimaryButton || showSecondaryButton) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 justify-center", children: [showSecondaryButton && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", size: "medium", onClick: onSecondaryClick, children: secondaryButtonText })), showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "primary", size: "medium", onClick: onPrimaryClick, children: primaryButtonText }))] }))] }) }));
+}

package/dist/components/molecules/TaskItem.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+export type TaskType = "estudio" | "practica" | "programacion";
+export interface TaskInfo {
+    /** Unique task identifier */
+    id: string;
+    /** Task title */
+    title: string;
+    /** Task type for badge */
+    type: TaskType;
+    /** Estimated duration (e.g., "1h 30 min") */
+    duration: string;
+    /** Whether task is completed */
+    completed: boolean;
+}
+interface TaskItemProps {
+    task: TaskInfo;
+    /** Callback when task completion toggled */
+    onComplete?: (id: string) => void;
+    /** Callback when navigate to task */
+    onNavigate?: (id: string) => void;
+    /** Optional className */
+    className?: string;
+}
+export declare const TaskItem: React.FC<TaskItemProps>;
+export {};

package/dist/components/molecules/TaskItem.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TaskItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const IconChevronRight_1 = require("../icons/IconChevronRight");
+const typeConfig = {
+    estudio: {
+        label: "Estudio",
+        bgColor: "bg-primary-100",
+        textColor: "text-primary-700",
+    },
+    practica: {
+        label: "Práctica",
+        bgColor: "bg-pink-100",
+        textColor: "text-pink-700",
+    },
+    programacion: {
+        label: "Programación",
+        bgColor: "bg-violet-100",
+        textColor: "text-violet-700",
+    },
+};
+const TaskItem = ({ task, onComplete, onNavigate, className, }) => {
+    const config = typeConfig[task.type];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("flex items-start gap-3 p-4 rounded-2xl border border-gray-100 bg-white", task.completed && "opacity-60", className), children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => onComplete === null || onComplete === void 0 ? void 0 : onComplete(task.id), className: (0, clsx_1.default)("flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-colors mt-0.5", task.completed
+                    ? "bg-primary-500 border-primary-500"
+                    : "border-gray-300 hover:border-primary-400"), "aria-label": task.completed ? "Marcar como pendiente" : "Marcar como completada", children: task.completed && ((0, jsx_runtime_1.jsx)("svg", { className: "w-3.5 h-3.5 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("p", { className: (0, clsx_1.default)("text-sm font-medium text-textAtenea-900 leading-snug", task.completed && "line-through"), children: task.title }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mt-2", children: [(0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)("px-2 py-0.5 rounded-md text-xs font-medium", config.bgColor, config.textColor), children: config.label }), (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1 text-xs text-textAtenea-500", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) }), task.duration] })] })] }), onNavigate && !task.completed && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => onNavigate(task.id), className: "flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-primary-600 bg-primary-50 rounded-lg hover:bg-primary-100 transition-colors", children: ["Ir a tarea", (0, jsx_runtime_1.jsx)(IconChevronRight_1.IconChevronRight, { size: 14 })] }))] }));
+};
+exports.TaskItem = TaskItem;

package/dist/components/molecules/Timer.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface TimerProps {
+    label?: string;
+    initialTime: number;
+    hasControl?: boolean;
+    autoStart?: boolean;
+    showIcon?: boolean;
+    onTimeUp?: () => void;
+    onStateChange?: (isRunning: boolean) => void;
+    className?: string;
+}
+export declare const Timer: React.FC<TimerProps>;
+export {};

package/dist/components/molecules/Timer.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../atoms/Button");
+const IconPlay_1 = require("../icons/IconPlay");
+const IconPause_1 = require("../icons/IconPause");
+const IconTimer_1 = require("../icons/IconTimer");
+const Timer = ({ label, initialTime, hasControl = false, autoStart = false, showIcon = false, onTimeUp, onStateChange, className = "", }) => {
+    const [timeLeft, setTimeLeft] = (0, react_1.useState)(initialTime);
+    const [isRunning, setIsRunning] = (0, react_1.useState)(autoStart);
+    const formatTime = (0, react_1.useCallback)((seconds) => {
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const remainingSeconds = seconds % 60;
+        if (initialTime >= 3600) {
+            return `${hours.toString().padStart(2, "0")}:${minutes
+                .toString()
+                .padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
+        }
+        else {
+            return `${minutes.toString().padStart(2, "0")}:${remainingSeconds
+                .toString()
+                .padStart(2, "0")}`;
+        }
+    }, [initialTime]);
+    const toggleTimer = (0, react_1.useCallback)(() => {
+        setIsRunning((prev) => {
+            const newState = !prev;
+            onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(newState);
+            return newState;
+        });
+    }, [onStateChange]);
+    (0, react_1.useEffect)(() => {
+        let interval = null;
+        if (isRunning && timeLeft > 0) {
+            interval = setInterval(() => {
+                setTimeLeft((prev) => {
+                    if (prev <= 1) {
+                        setIsRunning(false);
+                        onTimeUp === null || onTimeUp === void 0 ? void 0 : onTimeUp();
+                        return 0;
+                    }
+                    return prev - 1;
+                });
+            }, 1000);
+        }
+        return () => {
+            if (interval) {
+                clearInterval(interval);
+            }
+        };
+    }, [isRunning, timeLeft, onTimeUp]);
+    (0, react_1.useEffect)(() => {
+        setTimeLeft(initialTime);
+    }, [initialTime]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex items-center gap-3 ${className}`, children: [showIcon && (0, jsx_runtime_1.jsx)(IconTimer_1.IconTimer, { size: 20, color: "textAtenea-500" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [label && (0, jsx_runtime_1.jsx)("span", { className: "text-b3 text-textAtenea-500", children: label }), (0, jsx_runtime_1.jsx)("span", { className: "text-b3 text-textAtenea-900 w-16 text-right", children: formatTime(timeLeft) }), hasControl && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", size: "small", onClick: toggleTimer, className: "w-8 h-8", children: isRunning ? (0, jsx_runtime_1.jsx)(IconPause_1.IconPause, { size: 16 }) : (0, jsx_runtime_1.jsx)(IconPlay_1.IconPlay, { size: 16 }) }))] })] }));
+};
+exports.Timer = Timer;

package/dist/components/molecules/WeekDaySelector.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+export interface DayInfo {
+    /** Day abbreviation (L, M, X, J, V, S, D) */
+    label: string;
+    /** Day number (15, 16, 17...) */
+    date: number;
+    /** ISO date string for identification */
+    dateKey: string;
+    /** Whether this day has tasks/activities */
+    hasActivity?: boolean;
+}
+interface WeekDaySelectorProps {
+    /** Array of 7 days to display */
+    days: DayInfo[];
+    /** Currently selected day's dateKey */
+    selectedDay: string;
+    /** Callback when a day is selected */
+    onDaySelect: (dateKey: string) => void;
+    /** Optional className for container */
+    className?: string;
+}
+export declare const WeekDaySelector: React.FC<WeekDaySelectorProps>;
+export {};

package/dist/components/molecules/WeekDaySelector.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WeekDaySelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const WeekDaySelector = ({ days, selectedDay, onDaySelect, className, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)("flex items-center justify-between gap-2 py-2", className), children: days.map((day) => {
+            const isSelected = day.dateKey === selectedDay;
+            return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => onDaySelect(day.dateKey), className: (0, clsx_1.default)("flex flex-col items-center gap-1 min-w-[40px] py-2 px-1 rounded-xl transition-all duration-200", "focus:outline-none focus:ring-2 focus:ring-primary-200", isSelected
+                    ? "bg-primary-500"
+                    : "hover:bg-gray-100"), "aria-label": `${day.label} ${day.date}`, "aria-pressed": isSelected, children: [(0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)("text-xs font-medium uppercase", isSelected ? "text-textAtenea-900" : "text-textAtenea-500"), children: day.label }), (0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)("text-base font-semibold", isSelected ? "text-textAtenea-900" : "text-textAtenea-900"), children: day.date }), day.hasActivity && !isSelected && ((0, jsx_runtime_1.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-pink-400" })), day.hasActivity && isSelected && ((0, jsx_runtime_1.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-textAtenea-900" })), !day.hasActivity && (0, jsx_runtime_1.jsx)("span", { className: "w-1.5 h-1.5" })] }, day.dateKey));
+        }) }));
+};
+exports.WeekDaySelector = WeekDaySelector;

package/dist/components/molecules/WeeklyObjectivesCard.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface WeeklyObjectivesCardProps {
+    /** Current percentage (0-100) */
+    percentage: number;
+    /** Card title */
+    title?: string;
+    /** Optional className */
+    className?: string;
+}
+export declare const WeeklyObjectivesCard: React.FC<WeeklyObjectivesCardProps>;
+export {};

package/dist/components/molecules/WeeklyObjectivesCard.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WeeklyObjectivesCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const WeeklyObjectivesCard = ({ percentage, title = "Objetivos semanales", className, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("p-4 bg-white rounded-2xl border border-gray-100", className), children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-medium text-textAtenea-900 mb-2", children: title }), (0, jsx_runtime_1.jsxs)("p", { className: "text-2xl font-bold text-primary-600 mb-2", children: [percentage, "%"] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full h-2 bg-gray-100 rounded-full overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full bg-primary-500 rounded-full transition-all", style: { width: `${Math.min(percentage, 100)}%` } }) })] }));
+};
+exports.WeeklyObjectivesCard = WeeklyObjectivesCard;