atenea-components 1.4.24 → 1.4.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,13 +1,13 @@
1
1
  import React from "react";
2
- interface MoodTrackerProps {
3
- /** Selected mood value (1-5, or null if none) */
4
- value: number | null;
5
- /** Callback when mood is selected */
6
- onChange: (value: number) => void;
7
- /** Optional question label */
2
+ export type MoodVariant = "verySad" | "sad" | "neutral" | "happy" | "veryHappy";
3
+ export declare const MOOD_VARIANTS: MoodVariant[];
4
+ export interface MoodTrackerItemProps {
5
+ variant: MoodVariant;
6
+ selected?: boolean;
7
+ onClick?: () => void;
8
8
  label?: string;
9
- /** Optional className */
9
+ disabled?: boolean;
10
10
  className?: string;
11
11
  }
12
- export declare const MoodTracker: React.FC<MoodTrackerProps>;
13
- export {};
12
+ export declare const MoodTrackerItem: React.FC<MoodTrackerItemProps>;
13
+ export default MoodTrackerItem;
@@ -3,23 +3,64 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.MoodTracker = void 0;
6
+ exports.MoodTrackerItem = exports.MOOD_VARIANTS = void 0;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const react_1 = require("react");
8
9
  const clsx_1 = __importDefault(require("clsx"));
9
- // Mood options with emoji images (using public path)
10
- const moodOptions = [
11
- { value: 1, image: "/images/studyplan/Emoji.png", alt: "Muy mal" },
12
- { value: 2, image: "/images/studyplan/Emoji-1.png", alt: "Mal" },
13
- { value: 3, image: "/images/studyplan/Emoji-2.png", alt: "Normal" },
14
- { value: 4, image: "/images/studyplan/Emoji-3.png", alt: "Bien" },
15
- { value: 5, image: "/images/studyplan/Emoji-4.png", alt: "Muy bien" },
10
+ exports.MOOD_VARIANTS = [
11
+ "verySad",
12
+ "sad",
13
+ "neutral",
14
+ "happy",
15
+ "veryHappy",
16
16
  ];
17
- const MoodTracker = ({ value, onChange, label = "¿Cómo te sientes?", className, }) => {
18
- 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) => {
19
- const isSelected = value === option.value;
20
- 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
21
- ? "ring-2 ring-primary-500 ring-offset-2"
22
- : "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));
23
- }) }), (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" })] })] }));
17
+ function MoodIconVerySad({ clipId }) {
18
+ return ((0, jsx_runtime_1.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16Z", fill: "#54B8FF" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.0864 19.3526C18.0864 18.0818 17.0564 17.0522 15.7856 17.0519C14.5146 17.0519 13.4835 18.0816 13.4835 19.3526H12.4835C12.4835 17.5294 13.9623 16.0519 15.7856 16.0519C17.6086 16.0522 19.0864 17.5295 19.0864 19.3526H18.0864Z", fill: "#2D6A4D" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.037 12.5785C13.037 13.2331 12.5064 13.7637 11.8519 13.7637C11.1973 13.7637 10.6667 13.2331 10.6667 12.5785C10.6667 11.9239 11.1973 11.3933 11.8519 11.3933C12.5064 11.3933 13.037 11.9239 13.037 12.5785Z", fill: "#2D6A4D" }), (0, jsx_runtime_1.jsx)("path", { d: "M20.7402 12.5785C20.7402 13.2331 20.2095 13.7637 19.555 13.7637C18.9004 13.7637 18.3698 13.2331 18.3698 12.5785C18.3698 11.9239 18.9004 11.3933 19.555 11.3933C20.2095 11.3933 20.7402 11.9239 20.7402 12.5785Z", fill: "#2D6A4D" })] }));
19
+ }
20
+ function MoodIconSad({ clipId }) {
21
+ return ((0, jsx_runtime_1.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16Z", fill: "#B0DEFF" }), (0, jsx_runtime_1.jsx)("path", { d: "M12.4818 20.8425C12.4818 19.9129 12.87 19.2061 13.5143 18.7501C14.1349 18.3109 14.9496 18.1342 15.7838 18.1342H19.5547V19.1342H15.7838C15.071 19.1342 14.4844 19.2882 14.0911 19.5665C13.7219 19.828 13.4818 20.2253 13.4818 20.8425H12.4818Z", fill: "#2D6A4D" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.037 13.3272C13.037 13.9818 12.5064 14.5124 11.8518 14.5124C11.1973 14.5124 10.6667 13.9818 10.6667 13.3272C10.6667 12.6726 11.1973 12.142 11.8518 12.142C12.5064 12.142 13.037 12.6726 13.037 13.3272Z", fill: "#2D6A4D" }), (0, jsx_runtime_1.jsx)("path", { d: "M20.7402 13.3272C20.7402 13.9818 20.2095 14.5124 19.555 14.5124C18.9004 14.5124 18.3698 13.9818 18.3698 13.3272C18.3698 12.6726 18.9004 12.142 19.555 12.142C20.2095 12.142 20.7402 12.6726 20.7402 13.3272Z", fill: "#2D6A4D" })] }));
22
+ }
23
+ function MoodIconNeutral() {
24
+ return ((0, jsx_runtime_1.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16Z", fill: "#E1E7E4" }), (0, jsx_runtime_1.jsx)("path", { d: "M20 18.1668V19.1668H12V18.1668H20Z", fill: "#2D6A4D" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.037 13.4822C13.037 14.1367 12.5064 14.6673 11.8518 14.6673C11.1973 14.6673 10.6666 14.1367 10.6666 13.4822C10.6666 12.8276 11.1973 12.297 11.8518 12.297C12.5064 12.297 13.037 12.8276 13.037 13.4822Z", fill: "#2D6A4D" }), (0, jsx_runtime_1.jsx)("path", { d: "M20.7401 13.4822C20.7401 14.1367 20.2095 14.6673 19.555 14.6673C18.9004 14.6673 18.3698 14.1367 18.3698 13.4822C18.3698 12.8276 18.9004 12.297 19.555 12.297C20.2095 12.297 20.7401 12.8276 20.7401 13.4822Z", fill: "#2D6A4D" })] }));
25
+ }
26
+ function MoodIconHappy({ clipId }) {
27
+ return ((0, jsx_runtime_1.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16Z", fill: "#C2F5D5" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.4835 16.5512C13.4835 17.8223 14.5136 18.8522 15.7843 18.8525C17.0553 18.8525 18.0864 17.8225 18.0864 16.5512H19.0864C19.0864 18.3749 17.6076 19.8527 15.7843 19.8527C13.9613 19.8524 12.4835 18.3747 12.4835 16.5512H13.4835Z", fill: "#2D6A4D" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.037 12.5785C13.037 13.2331 12.5064 13.7637 11.8518 13.7637C11.1973 13.7637 10.6666 13.2331 10.6666 12.5785C10.6666 11.9239 11.1973 11.3933 11.8518 11.3933C12.5064 11.3933 13.037 11.9239 13.037 12.5785Z", fill: "#2D6A4D" }), (0, jsx_runtime_1.jsx)("path", { d: "M20.7401 12.5785C20.7401 13.2331 20.2095 13.7637 19.5549 13.7637C18.9004 13.7637 18.3698 13.2331 18.3698 12.5785C18.3698 11.9239 18.9004 11.3933 19.5549 11.3933C20.2095 11.3933 20.7401 11.9239 20.7401 12.5785Z", fill: "#2D6A4D" })] }));
28
+ }
29
+ function MoodIconVeryHappy({ clipId }) {
30
+ return ((0, jsx_runtime_1.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16Z", fill: "#87E7B0" }), (0, jsx_runtime_1.jsx)("path", { d: "M19.0864 16.0512V16.4855C19.0864 18.0693 17.6076 19.3527 15.7843 19.3527C13.9613 19.3524 12.4835 18.0691 12.4835 16.4855V16.0512H19.0864ZM13.5395 16.9198C13.7679 17.8147 14.6854 18.4838 15.7843 18.484C16.8835 18.484 17.802 17.8149 18.0304 16.9198H13.5395Z", fill: "#2D6A4D" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.037 12.5785C13.037 13.2331 12.5064 13.7637 11.8518 13.7637C11.1973 13.7637 10.6666 13.2331 10.6666 12.5785C10.6666 11.9239 11.1973 11.3933 11.8518 11.3933C12.5064 11.3933 13.037 11.9239 13.037 12.5785Z", fill: "#2D6A4D" }), (0, jsx_runtime_1.jsx)("path", { d: "M20.7401 12.5785C20.7401 13.2331 20.2095 13.7637 19.5549 13.7637C18.9004 13.7637 18.3698 13.2331 18.3698 12.5785C18.3698 11.9239 18.9004 11.3933 19.5549 11.3933C20.2095 11.3933 20.7401 11.9239 20.7401 12.5785Z", fill: "#2D6A4D" })] }));
31
+ }
32
+ function renderMoodIcon(variant, baseId) {
33
+ const clipId = (suffix) => `${baseId}-${suffix}`;
34
+ switch (variant) {
35
+ case "verySad":
36
+ return (0, jsx_runtime_1.jsx)(MoodIconVerySad, { clipId: clipId("verySad") });
37
+ case "sad":
38
+ return (0, jsx_runtime_1.jsx)(MoodIconSad, { clipId: clipId("sad") });
39
+ case "neutral":
40
+ return (0, jsx_runtime_1.jsx)(MoodIconNeutral, {});
41
+ case "happy":
42
+ return (0, jsx_runtime_1.jsx)(MoodIconHappy, { clipId: clipId("happy") });
43
+ case "veryHappy":
44
+ return (0, jsx_runtime_1.jsx)(MoodIconVeryHappy, { clipId: clipId("veryHappy") });
45
+ }
46
+ }
47
+ const itemBase = "w-16 h-16 rounded-lg border flex items-center justify-center cursor-pointer transition-all duration-200";
48
+ function getItemClasses(selected, disabled) {
49
+ if (disabled) {
50
+ return "border-gray-200 bg-gray-100 cursor-not-allowed";
51
+ }
52
+ if (selected) {
53
+ return "border-primary-500 bg-primary-100";
54
+ }
55
+ return "border-gray-200 bg-white-100 hover:bg-gray-50";
56
+ }
57
+ const MoodTrackerItem = ({ variant, selected = false, onClick, label, disabled = false, className, }) => {
58
+ const baseId = (0, react_1.useId)();
59
+ const button = ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick()), disabled: disabled, className: (0, clsx_1.default)(itemBase, getItemClasses(selected, disabled), className), "aria-pressed": selected, "aria-label": variant, children: renderMoodIcon(variant, baseId) }));
60
+ if (label) {
61
+ return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-1 shrink-0", children: [button, (0, jsx_runtime_1.jsx)("span", { className: "text-c1 text-gray-500 text-center", children: label })] }));
62
+ }
63
+ return (0, jsx_runtime_1.jsx)("div", { className: "shrink-0", children: button });
24
64
  };
25
- exports.MoodTracker = MoodTracker;
65
+ exports.MoodTrackerItem = MoodTrackerItem;
66
+ exports.default = exports.MoodTrackerItem;
@@ -1,13 +1,13 @@
1
1
  import React from "react";
2
- interface SleepTrackerProps {
3
- /** Selected sleep quality value (1-5, or null if none) */
4
- value: number | null;
5
- /** Callback when sleep quality is selected */
6
- onChange: (value: number) => void;
7
- /** Optional question label */
2
+ export type SleepVariant = "noEnergy" | "littleEnergy" | "neutral" | "someEnergy" | "fullEnergy";
3
+ export declare const SLEEP_VARIANTS: SleepVariant[];
4
+ export interface SleepTrackerItemProps {
5
+ variant: SleepVariant;
6
+ selected?: boolean;
7
+ onClick?: () => void;
8
8
  label?: string;
9
- /** Optional className */
9
+ disabled?: boolean;
10
10
  className?: string;
11
11
  }
12
- export declare const SleepTracker: React.FC<SleepTrackerProps>;
13
- export {};
12
+ export declare const SleepTrackerItem: React.FC<SleepTrackerItemProps>;
13
+ export default SleepTrackerItem;
@@ -3,23 +3,61 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.SleepTracker = void 0;
6
+ exports.SleepTrackerItem = exports.SLEEP_VARIANTS = void 0;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const clsx_1 = __importDefault(require("clsx"));
9
- // Sleep options with pillow images (using public path)
10
- const sleepOptions = [
11
- { value: 1, image: "/images/studyplan/Container.png", alt: "Nada" },
12
- { value: 2, image: "/images/studyplan/Container-1.png", alt: "Poco" },
13
- { value: 3, image: "/images/studyplan/Container-2.png", alt: "Normal" },
14
- { value: 4, image: "/images/studyplan/Container-3.png", alt: "Bien" },
15
- { value: 5, image: "/images/studyplan/Container-4.png", alt: "Mucho" },
9
+ exports.SLEEP_VARIANTS = [
10
+ "noEnergy",
11
+ "littleEnergy",
12
+ "neutral",
13
+ "someEnergy",
14
+ "fullEnergy",
16
15
  ];
17
- const SleepTracker = ({ value, onChange, label = "¿Cómo has dormido?", className, }) => {
18
- 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) => {
19
- const isSelected = value === option.value;
20
- 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
21
- ? "ring-2 ring-primary-500 ring-offset-2 bg-primary-50"
22
- : "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));
23
- }) }), (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" })] })] }));
16
+ function SleepIconNoEnergy() {
17
+ return ((0, jsx_runtime_1.jsx)("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "flex-shrink-0", children: (0, jsx_runtime_1.jsx)("path", { d: "M14 0.5C21.4558 0.5 27.5 6.54416 27.5 14C27.5 21.4558 21.4558 27.5 14 27.5C6.54416 27.5 0.5 21.4558 0.5 14C0.5 6.54416 6.54416 0.5 14 0.5Z", stroke: "#9EA2AE" }) }));
18
+ }
19
+ function SleepIconLittleEnergy() {
20
+ return ((0, jsx_runtime_1.jsx)("svg", { width: "29", height: "29", viewBox: "0 0 29 29", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "flex-shrink-0", children: (0, jsx_runtime_1.jsx)("path", { d: "M14.0088 0C21.7457 0 28.0175 6.27193 28.0176 14.0088C28.0176 18.2994 26.0878 22.1383 23.0498 24.708C23.039 24.7171 23.0284 24.7263 23.0176 24.7354C21.9275 25.6518 20.6963 26.4053 19.3604 26.958C19.349 26.9627 19.3375 26.967 19.3262 26.9717C18.9004 27.1465 18.4642 27.3007 18.0186 27.4336C17.9902 27.442 17.962 27.4507 17.9336 27.459C17.6351 27.5459 17.3327 27.6232 17.0264 27.6904C17.0163 27.6926 17.0062 27.6951 16.9961 27.6973C16.8475 27.7295 16.6981 27.7596 16.5479 27.7871C16.5374 27.789 16.527 27.7911 16.5166 27.793C16.359 27.8215 16.2004 27.847 16.041 27.8701C16.0322 27.8714 16.0234 27.8728 16.0146 27.874C15.8747 27.8941 15.734 27.9118 15.5928 27.9277C15.5622 27.9312 15.5316 27.9343 15.501 27.9375C15.3474 27.9538 15.1931 27.9682 15.0381 27.9795C15.029 27.9802 15.0199 27.9808 15.0107 27.9814C14.8645 27.9918 14.7177 28 14.5703 28.0059C14.5401 28.0071 14.5098 28.0078 14.4795 28.0088C14.3232 28.0139 14.1663 28.0176 14.0088 28.0176L14.0078 28.0166V28.0176L14.0059 28.0166C13.8496 28.0166 13.6941 28.0139 13.5391 28.0088C13.5058 28.0077 13.4726 28.0062 13.4395 28.0049C13.2983 27.9992 13.1577 27.9912 13.0176 27.9814C13.0023 27.9804 12.987 27.9796 12.9717 27.9785C12.8213 27.9675 12.6715 27.9542 12.5225 27.9385C12.4834 27.9344 12.4443 27.9302 12.4053 27.9258C12.2771 27.9112 12.1495 27.895 12.0225 27.877C12.0023 27.8741 11.9821 27.8711 11.9619 27.8682C11.8107 27.846 11.6603 27.8218 11.5107 27.7949C11.484 27.7901 11.4574 27.7843 11.4307 27.7793C11.3008 27.7551 11.1715 27.7299 11.043 27.7021C11.0176 27.6967 10.9922 27.6912 10.9668 27.6855C10.6725 27.6204 10.3817 27.5462 10.0947 27.4629C10.0548 27.4513 10.0153 27.4387 9.97559 27.4268C9.87545 27.3967 9.77593 27.3652 9.67676 27.333C9.63022 27.3179 9.58343 27.3037 9.53711 27.2881C9.40674 27.2442 9.27706 27.199 9.14844 27.1514C9.11509 27.139 9.08206 27.1259 9.04883 27.1133C8.94565 27.0742 8.84321 27.0336 8.74121 26.9922C8.7021 26.9763 8.66296 26.9606 8.62402 26.9443C8.49654 26.8912 8.36969 26.837 8.24414 26.7803C8.21494 26.7671 8.18632 26.7527 8.15723 26.7393C8.04124 26.6859 7.92578 26.6317 7.81152 26.5752C7.79481 26.5669 7.77839 26.5581 7.76172 26.5498C7.48834 26.4134 7.21988 26.2687 6.95703 26.1152C6.93408 26.1018 6.91154 26.0877 6.88867 26.0742C6.78196 26.0111 6.67616 25.9467 6.57129 25.8809C6.55147 25.8684 6.53147 25.8563 6.51172 25.8438C6.39631 25.7705 6.28203 25.6957 6.16895 25.6191C6.12765 25.5912 6.08687 25.5625 6.0459 25.5342C5.95771 25.4731 5.86991 25.4116 5.7832 25.3486C5.75439 25.3277 5.72591 25.3063 5.69727 25.2852C5.46448 25.1133 5.23708 24.9347 5.01562 24.749C4.99349 24.7305 4.97124 24.7121 4.94922 24.6934C4.84875 24.6081 4.74937 24.5216 4.65137 24.4336C4.63576 24.4196 4.62004 24.4057 4.60449 24.3916C4.50379 24.3003 4.40464 24.2074 4.30664 24.1133C4.27875 24.0865 4.2513 24.0592 4.22363 24.0322C4.14325 23.9537 4.06383 23.8743 3.98535 23.7939C3.96059 23.7686 3.93571 23.7433 3.91113 23.7178C3.48438 23.274 3.08647 22.8025 2.7207 22.3057C2.70603 22.2857 2.6923 22.2651 2.67773 22.2451C2.6081 22.1495 2.53893 22.0535 2.47168 21.9561C2.45214 21.9277 2.43242 21.8996 2.41309 21.8711C2.33413 21.7549 2.25716 21.6372 2.18164 21.5186C2.16351 21.4901 2.14586 21.4613 2.12793 21.4326C2.07089 21.3415 2.01495 21.2497 1.95996 21.1572C1.93275 21.1115 1.90561 21.0656 1.87891 21.0195C1.7375 20.7754 1.60336 20.5266 1.47656 20.2734C1.46998 20.2603 1.4626 20.2475 1.45605 20.2344H1.45703C0.525022 18.3589 0 16.2452 0 14.0088C0.000119056 6.272 6.272 0.000117518 14.0088 0ZM14.0088 1C6.82429 1.00012 1.00012 6.82429 1 14.0088C1 16.2641 1.57425 18.3853 2.58398 20.2344H25.4336C26.4433 18.3852 27.0176 16.2641 27.0176 14.0088C27.0175 6.82422 21.1934 1 14.0088 1Z", fill: "#9EA2AE" }) }));
21
+ }
22
+ function SleepIconNeutral() {
23
+ return ((0, jsx_runtime_1.jsx)("svg", { width: "29", height: "29", viewBox: "0 0 29 29", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "flex-shrink-0", children: (0, jsx_runtime_1.jsx)("path", { d: "M14.0088 0C21.7457 0 28.0175 6.27193 28.0176 14.0088C28.0176 21.7458 21.7457 28.0176 14.0088 28.0176L14.0078 28.0166V28.0176C14.0065 28.0176 14.0052 28.0166 14.0039 28.0166C13.7017 28.0165 13.4019 28.0063 13.1045 27.9873C12.9967 27.9804 12.8893 27.9722 12.7822 27.9629C12.6321 27.9499 12.4827 27.9347 12.334 27.917C12.3001 27.913 12.2662 27.9095 12.2324 27.9053C12.1733 27.8978 12.1145 27.8891 12.0557 27.8809C11.999 27.873 11.9422 27.866 11.8857 27.8574C11.8123 27.8462 11.7391 27.8336 11.666 27.8213C11.6253 27.8144 11.5845 27.808 11.5439 27.8008C11.3656 27.7691 11.1886 27.7336 11.0127 27.6953C10.9602 27.6839 10.9077 27.6731 10.8555 27.6611C10.6747 27.6195 10.4954 27.5739 10.3174 27.5254C10.274 27.5136 10.2307 27.5015 10.1875 27.4893C10.1362 27.4747 10.0852 27.4594 10.0342 27.4443C9.97774 27.4277 9.92138 27.4109 9.86523 27.3936C9.79721 27.3725 9.72969 27.3502 9.66211 27.3281C9.62176 27.315 9.5812 27.3026 9.54102 27.2891C9.48643 27.2707 9.43221 27.2514 9.37793 27.2324C9.32261 27.2131 9.26692 27.1948 9.21191 27.1748C9.1756 27.1616 9.13969 27.1473 9.10352 27.1338C8.9277 27.0681 8.75344 26.9993 8.58105 26.9268C8.52578 26.9035 8.47092 26.8794 8.41602 26.8555C8.36548 26.8334 8.31487 26.8117 8.26465 26.7891C8.22798 26.7726 8.19177 26.7551 8.15527 26.7383C8.08869 26.7076 8.02207 26.6772 7.95605 26.6455C7.91128 26.624 7.86678 26.602 7.82227 26.5801C7.76779 26.5532 7.71325 26.5266 7.65918 26.499C7.61272 26.4754 7.56667 26.4509 7.52051 26.4268C7.4654 26.3979 7.41014 26.3694 7.35547 26.3398C7.31329 26.317 7.27141 26.2937 7.22949 26.2705C7.17236 26.2389 7.11524 26.2072 7.05859 26.1748C7.02453 26.1553 6.99092 26.135 6.95703 26.1152C6.79243 26.0192 6.62996 25.9199 6.46973 25.8174C6.45147 25.8057 6.43324 25.794 6.41504 25.7822C6.25186 25.6768 6.09103 25.568 5.93262 25.4561C5.88214 25.4204 5.83221 25.384 5.78223 25.3477C5.74172 25.3182 5.70131 25.2887 5.66113 25.2588C5.62512 25.232 5.58945 25.2048 5.55371 25.1777C5.49559 25.1337 5.43729 25.0899 5.37988 25.0449C5.35835 25.0281 5.33687 25.0111 5.31543 24.9941C5.26622 24.9551 5.21664 24.9166 5.16797 24.877L5.09766 24.8184C5.07039 24.7959 5.04369 24.7727 5.0166 24.75C4.97552 24.7156 4.93424 24.6814 4.89355 24.6465C4.84399 24.604 4.79505 24.5608 4.74609 24.5176C4.70459 24.481 4.66313 24.4443 4.62207 24.4072C4.58138 24.3705 4.54123 24.3331 4.50098 24.2959C4.45988 24.2579 4.41857 24.2201 4.37793 24.1816C4.33096 24.1372 4.28463 24.092 4.23828 24.0469C4.19935 24.009 4.16056 23.971 4.12207 23.9326C4.10348 23.9141 4.08489 23.8956 4.06641 23.877C4.00479 23.8149 3.94327 23.7527 3.88281 23.6895C3.86689 23.6728 3.85178 23.6554 3.83594 23.6387C3.70253 23.4978 3.57185 23.3543 3.44434 23.208C3.41309 23.1722 3.38245 23.1358 3.35156 23.0996C3.30748 23.048 3.26307 22.9966 3.21973 22.9443C3.2035 22.9248 3.18702 22.9054 3.1709 22.8857C2.9743 22.646 2.78608 22.3992 2.60547 22.1465C2.57638 22.1058 2.5482 22.0645 2.51953 22.0234C2.49599 21.9898 2.47149 21.9567 2.44824 21.9229C2.4074 21.8633 2.36709 21.8034 2.32715 21.7432C2.29856 21.7001 2.27031 21.6567 2.24219 21.6133C2.21068 21.5646 2.17935 21.5159 2.14844 21.4668C2.12109 21.4234 2.09426 21.3797 2.06738 21.3359C2.04282 21.296 2.01831 21.256 1.99414 21.2158C1.90287 21.064 1.81412 20.9104 1.72852 20.7549C1.69958 20.7023 1.67085 20.6496 1.64258 20.5967C1.61763 20.5499 1.59279 20.5031 1.56836 20.4561C1.54013 20.4017 1.51289 20.3468 1.48535 20.292C1.46058 20.2427 1.43631 20.1932 1.41211 20.1436C1.3862 20.0904 1.3612 20.0369 1.33594 19.9834C1.31934 19.9483 1.30245 19.9132 1.28613 19.8779C1.25095 19.8018 1.21646 19.7253 1.18262 19.6484C1.17041 19.6207 1.15754 19.5933 1.14551 19.5654C1.11634 19.498 1.0877 19.4303 1.05957 19.3623C1.0397 19.3143 1.02033 19.2661 1.00098 19.2178C0.979893 19.1652 0.958938 19.1125 0.938477 19.0596C0.920761 19.0138 0.902988 18.9679 0.885742 18.9219C0.860369 18.8541 0.835873 18.786 0.811523 18.7178C0.796343 18.6752 0.781381 18.6326 0.766602 18.5898C0.756476 18.5606 0.746264 18.5313 0.736328 18.502L0.682617 18.3408C0.672699 18.3103 0.663034 18.2797 0.65332 18.249C0.637266 18.1984 0.621938 18.1475 0.606445 18.0967C0.589441 18.0409 0.572964 17.9848 0.556641 17.9287C0.541514 17.8767 0.526257 17.8247 0.511719 17.7725C0.493048 17.7054 0.475701 17.6378 0.458008 17.5703C0.452704 17.5501 0.446622 17.53 0.441406 17.5098L0.402344 17.3535C0.399001 17.3399 0.395881 17.3262 0.392578 17.3125C0.291636 16.895 0.209082 16.4703 0.146484 16.0391C0.140682 15.9991 0.135347 15.959 0.129883 15.9189C0.120448 15.8497 0.110959 15.7805 0.102539 15.7109C0.0961227 15.658 0.0898078 15.6049 0.0839844 15.5518C0.0771533 15.4894 0.0714396 15.4269 0.0654297 15.3643C0.060219 15.31 0.0553709 15.2556 0.0507812 15.2012C0.0452488 15.1355 0.0397804 15.0698 0.0351562 15.0039C0.0311651 14.947 0.0277245 14.8901 0.0244141 14.833C0.0214348 14.7817 0.0190261 14.7302 0.0166016 14.6787C0.012915 14.6004 0.00923216 14.522 0.00683594 14.4434C0.00550874 14.3998 0.00483472 14.3562 0.00390625 14.3125C0.00335243 14.2865 0.00236481 14.2604 0.00195312 14.2344H0.00292969C0.00174577 14.1594 0 14.0841 0 14.0088C0.000118836 6.272 6.272 0.000117426 14.0088 0ZM14.0088 1C6.82429 1.00012 1.00012 6.82429 1 14.0088C1 14.0841 1.00165 14.1594 1.00293 14.2344H27.0146C27.0159 14.1594 27.0176 14.0841 27.0176 14.0088C27.0175 6.82422 21.1934 1 14.0088 1Z", fill: "#9EA2AE" }) }));
24
+ }
25
+ function SleepIconSomeEnergy() {
26
+ return ((0, jsx_runtime_1.jsx)("svg", { width: "29", height: "29", viewBox: "0 0 29 29", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "flex-shrink-0", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.0088 0C19.036 0 23.4435 2.64871 25.915 6.62598C25.9258 6.64324 25.9366 6.66042 25.9473 6.67773C26.4649 7.5189 26.896 8.41871 27.2285 9.36523C27.2341 9.38116 27.2396 9.39713 27.2451 9.41309C27.5726 10.3564 27.8016 11.3454 27.9209 12.3682C27.9244 12.3984 27.9283 12.4287 27.9316 12.459C27.9668 12.7788 27.9916 13.1018 28.0049 13.4277C28.006 13.456 28.0068 13.4844 28.0078 13.5127C28.0135 13.6774 28.0176 13.8427 28.0176 14.0088C28.0176 21.7458 21.7457 28.0176 14.0088 28.0176C6.27193 28.0175 0 21.7457 0 14.0088C2.29367e-06 13.8595 0.00317187 13.7107 0.0078125 13.5625C0.00976332 13.5002 0.0118866 13.438 0.0146484 13.376C0.0283622 13.0676 0.0516245 12.7618 0.0849609 12.459C0.0883005 12.4287 0.0921702 12.3984 0.0957031 12.3682C0.173423 11.702 0.297998 11.0503 0.46582 10.416C0.473928 10.3854 0.481925 10.3548 0.490234 10.3242C0.573996 10.0162 0.667619 9.71229 0.771484 9.41309C0.777024 9.39713 0.78249 9.38116 0.788086 9.36523C1.0627 8.58337 1.40519 7.83352 1.80762 7.12207C1.81752 7.10457 1.82694 7.08679 1.83691 7.06934C1.91228 6.93742 1.98984 6.80692 2.06934 6.67773C2.07999 6.66042 2.09084 6.64324 2.10156 6.62598C4.57299 2.64846 8.98148 7.63025e-05 14.0088 0ZM14.0088 1C9.73887 1.00007 5.94901 3.05701 3.57715 6.23438H24.4404C22.0685 3.05702 18.2787 1 14.0088 1Z", fill: "#9EA2AE" }) }));
27
+ }
28
+ function SleepIconFullEnergy() {
29
+ return ((0, jsx_runtime_1.jsx)("svg", { width: "29", height: "29", viewBox: "0 0 29 29", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "flex-shrink-0", children: (0, jsx_runtime_1.jsx)("path", { d: "M14.0078 0C21.7447 0 28.0166 6.27189 28.0166 14.0088C28.0165 21.7456 21.7447 28.0176 14.0078 28.0176C6.271 28.0175 5.61822e-05 21.7457 0 14.0089C0 6.27203 6.27096 5.87605e-05 14.0078 0Z", fill: "#9EA2AE" }) }));
30
+ }
31
+ function renderSleepIcon(variant) {
32
+ switch (variant) {
33
+ case "noEnergy":
34
+ return (0, jsx_runtime_1.jsx)(SleepIconNoEnergy, {});
35
+ case "littleEnergy":
36
+ return (0, jsx_runtime_1.jsx)(SleepIconLittleEnergy, {});
37
+ case "neutral":
38
+ return (0, jsx_runtime_1.jsx)(SleepIconNeutral, {});
39
+ case "someEnergy":
40
+ return (0, jsx_runtime_1.jsx)(SleepIconSomeEnergy, {});
41
+ case "fullEnergy":
42
+ return (0, jsx_runtime_1.jsx)(SleepIconFullEnergy, {});
43
+ }
44
+ }
45
+ const itemBase = "w-16 h-16 rounded-lg border flex items-center justify-center cursor-pointer transition-all duration-200";
46
+ function getItemClasses(selected, disabled) {
47
+ if (disabled) {
48
+ return "border-gray-200 bg-gray-100 cursor-not-allowed";
49
+ }
50
+ if (selected) {
51
+ return "border-primary-500 bg-primary-100";
52
+ }
53
+ return "border-gray-200 bg-white-100 hover:bg-gray-50";
54
+ }
55
+ const SleepTrackerItem = ({ variant, selected = false, onClick, label, disabled = false, className, }) => {
56
+ const button = ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick()), disabled: disabled, className: (0, clsx_1.default)(itemBase, getItemClasses(selected, disabled), className), "aria-pressed": selected, "aria-label": variant, children: renderSleepIcon(variant) }));
57
+ if (label) {
58
+ return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-1 shrink-0", children: [button, (0, jsx_runtime_1.jsx)("span", { className: "text-c1 text-gray-500 text-center", children: label })] }));
59
+ }
60
+ return (0, jsx_runtime_1.jsx)("div", { className: "shrink-0", children: button });
24
61
  };
25
- exports.SleepTracker = SleepTracker;
62
+ exports.SleepTrackerItem = SleepTrackerItem;
63
+ exports.default = exports.SleepTrackerItem;
@@ -0,0 +1,13 @@
1
+ import React from "react";
2
+ import { MoodVariant } from "../molecules/MoodTracker";
3
+ export interface MoodTrackerCardProps {
4
+ title?: string;
5
+ value?: MoodVariant | null;
6
+ onChange?: (value: MoodVariant) => void;
7
+ labelMin?: string;
8
+ labelMax?: string;
9
+ disabled?: boolean;
10
+ className?: string;
11
+ }
12
+ export declare const MoodTrackerCard: React.FC<MoodTrackerCardProps>;
13
+ export default MoodTrackerCard;
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.MoodTrackerCard = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const MoodTracker_1 = require("../molecules/MoodTracker");
6
+ const MoodTrackerCard = ({ title = "¿Cómo te sientes?", value = null, onChange, labelMin = "Muy mal", labelMax = "Muy bien", disabled = false, className = "", }) => {
7
+ return ((0, jsx_runtime_1.jsxs)("div", { className: `bg-white rounded-lg border border-gray-200 p-6 ${className}`, children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-center text-textAtenea-900 text-b1 mb-4", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-start justify-center gap-4", role: "group", children: MoodTracker_1.MOOD_VARIANTS.map((variant, index) => ((0, jsx_runtime_1.jsx)(MoodTracker_1.MoodTrackerItem, { variant: variant, selected: value === variant, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(variant), label: index === 0 ? labelMin : index === MoodTracker_1.MOOD_VARIANTS.length - 1 ? labelMax : undefined, disabled: disabled }, variant))) })] }));
8
+ };
9
+ exports.MoodTrackerCard = MoodTrackerCard;
10
+ exports.default = exports.MoodTrackerCard;
@@ -0,0 +1,13 @@
1
+ import React from "react";
2
+ import { SleepVariant } from "../molecules/SleepTracker";
3
+ export interface SleepTrackerCardProps {
4
+ title?: string;
5
+ value?: SleepVariant | null;
6
+ onChange?: (value: SleepVariant) => void;
7
+ labelMin?: string;
8
+ labelMax?: string;
9
+ disabled?: boolean;
10
+ className?: string;
11
+ }
12
+ export declare const SleepTrackerCard: React.FC<SleepTrackerCardProps>;
13
+ export default SleepTrackerCard;
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.SleepTrackerCard = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const SleepTracker_1 = require("../molecules/SleepTracker");
6
+ const SleepTrackerCard = ({ title = "¿Cómo has dormido?", value = null, onChange, labelMin = "Nada", labelMax = "Mucho", disabled = false, className = "", }) => {
7
+ return ((0, jsx_runtime_1.jsxs)("div", { className: `bg-white rounded-lg border border-gray-200 p-6 ${className}`, children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-center text-textAtenea-900 text-b1 mb-4", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-start justify-center gap-4", role: "group", children: SleepTracker_1.SLEEP_VARIANTS.map((variant, index) => ((0, jsx_runtime_1.jsx)(SleepTracker_1.SleepTrackerItem, { variant: variant, selected: value === variant, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(variant), label: index === 0 ? labelMin : index === SleepTracker_1.SLEEP_VARIANTS.length - 1 ? labelMax : undefined, disabled: disabled }, variant))) })] }));
8
+ };
9
+ exports.SleepTrackerCard = SleepTrackerCard;
10
+ exports.default = exports.SleepTrackerCard;
package/dist/index.d.ts CHANGED
@@ -21,10 +21,14 @@ export * from "./components/molecules/PercentageItem";
21
21
  export * from "./components/molecules/NewsItem";
22
22
  export * from "./components/molecules/CommentCard";
23
23
  export * from "./components/molecules/FilterBar";
24
+ export * from "./components/molecules/MoodTracker";
25
+ export * from "./components/molecules/SleepTracker";
24
26
  export { default as StudyMaterialIntro } from "./components/molecules/StudyMaterialIntro";
25
27
  export * from "./components/organisms/PercentageCard";
26
28
  export * from "./components/organisms/FeatureList";
27
29
  export * from "./components/organisms/NewsList";
30
+ export * from "./components/organisms/MoodTrackerCard";
31
+ export * from "./components/organisms/SleepTrackerCard";
28
32
  export * from "./tokens";
29
33
  export * from "./components/icons/IconArrowLeft";
30
34
  export * from "./components/icons/IconArrowRight";
package/dist/index.js CHANGED
@@ -28,12 +28,16 @@ tslib_1.__exportStar(require("./components/molecules/PercentageItem"), exports);
28
28
  tslib_1.__exportStar(require("./components/molecules/NewsItem"), exports);
29
29
  tslib_1.__exportStar(require("./components/molecules/CommentCard"), exports);
30
30
  tslib_1.__exportStar(require("./components/molecules/FilterBar"), exports);
31
+ tslib_1.__exportStar(require("./components/molecules/MoodTracker"), exports);
32
+ tslib_1.__exportStar(require("./components/molecules/SleepTracker"), exports);
31
33
  var StudyMaterialIntro_1 = require("./components/molecules/StudyMaterialIntro");
32
34
  Object.defineProperty(exports, "StudyMaterialIntro", { enumerable: true, get: function () { return tslib_1.__importDefault(StudyMaterialIntro_1).default; } });
33
35
  // Organisms
34
36
  tslib_1.__exportStar(require("./components/organisms/PercentageCard"), exports);
35
37
  tslib_1.__exportStar(require("./components/organisms/FeatureList"), exports);
36
38
  tslib_1.__exportStar(require("./components/organisms/NewsList"), exports);
39
+ tslib_1.__exportStar(require("./components/organisms/MoodTrackerCard"), exports);
40
+ tslib_1.__exportStar(require("./components/organisms/SleepTrackerCard"), exports);
37
41
  // Tokens
38
42
  tslib_1.__exportStar(require("./tokens"), exports);
39
43
  // Icons
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "atenea-components",
3
- "version": "1.4.24",
3
+ "version": "1.4.25",
4
4
  "description": "React component library for Atenea",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",