analytica-frontend-lib 1.0.41 → 1.0.43
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.
- package/dist/Calendar/index.d.mts +60 -0
- package/dist/Calendar/index.d.ts +60 -0
- package/dist/Calendar/index.js +526 -0
- package/dist/Calendar/index.js.map +1 -0
- package/dist/Calendar/index.mjs +501 -0
- package/dist/Calendar/index.mjs.map +1 -0
- package/dist/ProgressCircle/index.js +11 -7
- package/dist/ProgressCircle/index.js.map +1 -1
- package/dist/ProgressCircle/index.mjs +11 -7
- package/dist/ProgressCircle/index.mjs.map +1 -1
- package/dist/index.css +114 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +587 -84
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +567 -65
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +114 -0
- package/dist/styles.css.map +1 -1
- package/package.json +2 -1
package/dist/index.js
CHANGED
|
@@ -23,6 +23,7 @@ __export(src_exports, {
|
|
|
23
23
|
Alert: () => Alert_default,
|
|
24
24
|
Badge: () => Badge_default,
|
|
25
25
|
Button: () => Button_default,
|
|
26
|
+
Calendar: () => Calendar_default,
|
|
26
27
|
CheckBox: () => CheckBox_default,
|
|
27
28
|
Chips: () => Chips_default,
|
|
28
29
|
Divider: () => Divider_default,
|
|
@@ -1631,11 +1632,13 @@ var SIZE_CLASSES8 = {
|
|
|
1631
1632
|
textWeight: "medium",
|
|
1632
1633
|
// font-weight: 500
|
|
1633
1634
|
labelSize: "2xs",
|
|
1634
|
-
//
|
|
1635
|
+
// Will be overridden with custom 8px in className
|
|
1635
1636
|
labelWeight: "bold",
|
|
1636
1637
|
// font-weight: 700
|
|
1637
|
-
spacing: "gap-
|
|
1638
|
-
//
|
|
1638
|
+
spacing: "gap-0",
|
|
1639
|
+
// Reduced gap between percentage and label for better spacing
|
|
1640
|
+
contentWidth: "max-w-[50px]"
|
|
1641
|
+
// Reduced width to fit text inside circle
|
|
1639
1642
|
},
|
|
1640
1643
|
medium: {
|
|
1641
1644
|
container: "w-[152px] h-[152px]",
|
|
@@ -1650,8 +1653,10 @@ var SIZE_CLASSES8 = {
|
|
|
1650
1653
|
// 12px for status label (font-size: 12px)
|
|
1651
1654
|
labelWeight: "medium",
|
|
1652
1655
|
// font-weight: 500 (changed from bold)
|
|
1653
|
-
spacing: "gap-1"
|
|
1656
|
+
spacing: "gap-1",
|
|
1654
1657
|
// 4px gap between percentage and label
|
|
1658
|
+
contentWidth: "max-w-[90px]"
|
|
1659
|
+
// Reduced width to fit text inside circle
|
|
1655
1660
|
}
|
|
1656
1661
|
};
|
|
1657
1662
|
var VARIANT_CLASSES3 = {
|
|
@@ -1751,14 +1756,14 @@ var ProgressCircle = ({
|
|
|
1751
1756
|
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1752
1757
|
"div",
|
|
1753
1758
|
{
|
|
1754
|
-
className: `relative z-10 flex flex-col items-center justify-center ${sizeClasses.spacing}`,
|
|
1759
|
+
className: `relative z-10 flex flex-col items-center justify-center ${sizeClasses.spacing} ${sizeClasses.contentWidth}`,
|
|
1755
1760
|
children: [
|
|
1756
1761
|
showPercentage && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1757
1762
|
Text_default,
|
|
1758
1763
|
{
|
|
1759
1764
|
size: sizeClasses.textSize,
|
|
1760
1765
|
weight: sizeClasses.textWeight,
|
|
1761
|
-
className: `text-center ${variantClasses.textColor} ${percentageClassName}`,
|
|
1766
|
+
className: `text-center w-full ${variantClasses.textColor} ${percentageClassName}`,
|
|
1762
1767
|
children: [
|
|
1763
1768
|
Math.round(percentage),
|
|
1764
1769
|
"%"
|
|
@@ -1771,7 +1776,7 @@ var ProgressCircle = ({
|
|
|
1771
1776
|
as: "span",
|
|
1772
1777
|
size: sizeClasses.labelSize,
|
|
1773
1778
|
weight: sizeClasses.labelWeight,
|
|
1774
|
-
className: `${variantClasses.labelColor} text-center uppercase tracking-wide ${labelClassName}`,
|
|
1779
|
+
className: `${variantClasses.labelColor} text-center uppercase tracking-wide truncate w-full ${size === "small" ? "text-[8px] leading-[9px]" : ""} ${labelClassName}`,
|
|
1775
1780
|
children: label
|
|
1776
1781
|
}
|
|
1777
1782
|
)
|
|
@@ -1784,11 +1789,508 @@ var ProgressCircle = ({
|
|
|
1784
1789
|
};
|
|
1785
1790
|
var ProgressCircle_default = ProgressCircle;
|
|
1786
1791
|
|
|
1792
|
+
// src/components/Calendar/Calendar.tsx
|
|
1793
|
+
var import_react9 = require("react");
|
|
1794
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1795
|
+
var WEEK_DAYS = ["SEG", "TER", "QUA", "QUI", "SEX", "S\xC1B", "DOM"];
|
|
1796
|
+
var WEEK_DAYS_SHORT = ["S", "T", "Q", "Q", "S", "S", "D"];
|
|
1797
|
+
var MONTH_NAMES = [
|
|
1798
|
+
"Janeiro",
|
|
1799
|
+
"Fevereiro",
|
|
1800
|
+
"Mar\xE7o",
|
|
1801
|
+
"Abril",
|
|
1802
|
+
"Maio",
|
|
1803
|
+
"Junho",
|
|
1804
|
+
"Julho",
|
|
1805
|
+
"Agosto",
|
|
1806
|
+
"Setembro",
|
|
1807
|
+
"Outubro",
|
|
1808
|
+
"Novembro",
|
|
1809
|
+
"Dezembro"
|
|
1810
|
+
];
|
|
1811
|
+
var MonthYearPicker = ({
|
|
1812
|
+
monthPickerRef,
|
|
1813
|
+
availableYears,
|
|
1814
|
+
currentDate,
|
|
1815
|
+
onYearChange,
|
|
1816
|
+
onMonthChange
|
|
1817
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1818
|
+
"div",
|
|
1819
|
+
{
|
|
1820
|
+
ref: monthPickerRef,
|
|
1821
|
+
className: "absolute top-full left-0 z-50 mt-1 bg-white rounded-lg shadow-lg border border-border-200 p-4 min-w-[280px]",
|
|
1822
|
+
children: [
|
|
1823
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mb-4", children: [
|
|
1824
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "text-sm font-medium text-text-700 mb-2", children: "Selecionar Ano" }),
|
|
1825
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "grid grid-cols-4 gap-1 max-h-32 overflow-y-auto", children: availableYears.map((year) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1826
|
+
"button",
|
|
1827
|
+
{
|
|
1828
|
+
onClick: () => onYearChange(year),
|
|
1829
|
+
className: `
|
|
1830
|
+
px-2 py-1 text-xs rounded text-center hover:bg-background-100 transition-colors
|
|
1831
|
+
${year === currentDate.getFullYear() ? "bg-primary-800 text-text font-medium hover:text-text-950" : "text-text-700"}
|
|
1832
|
+
`,
|
|
1833
|
+
children: year
|
|
1834
|
+
},
|
|
1835
|
+
year
|
|
1836
|
+
)) })
|
|
1837
|
+
] }),
|
|
1838
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
|
|
1839
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "text-sm font-medium text-text-700 mb-2", children: "Selecionar M\xEAs" }),
|
|
1840
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "grid grid-cols-3 gap-1", children: MONTH_NAMES.map((month, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1841
|
+
"button",
|
|
1842
|
+
{
|
|
1843
|
+
onClick: () => onMonthChange(index, currentDate.getFullYear()),
|
|
1844
|
+
className: `
|
|
1845
|
+
px-2 py-2 text-xs rounded text-center hover:bg-background-100 transition-colors
|
|
1846
|
+
${index === currentDate.getMonth() ? "bg-primary-800 text-text font-medium hover:text-text-950" : "text-text-700"}
|
|
1847
|
+
`,
|
|
1848
|
+
children: month.substring(0, 3)
|
|
1849
|
+
},
|
|
1850
|
+
month
|
|
1851
|
+
)) })
|
|
1852
|
+
] })
|
|
1853
|
+
]
|
|
1854
|
+
}
|
|
1855
|
+
);
|
|
1856
|
+
var getDayStyles = (day, variant, showActivities) => {
|
|
1857
|
+
let dayStyle = "";
|
|
1858
|
+
let textStyle = "";
|
|
1859
|
+
if (variant === "selection" && day.isSelected) {
|
|
1860
|
+
dayStyle = "bg-primary-800";
|
|
1861
|
+
textStyle = "text-white";
|
|
1862
|
+
} else if (day.isToday) {
|
|
1863
|
+
textStyle = "text-[#1c61b2]";
|
|
1864
|
+
} else if (variant === "navigation" && showActivities && day.activities?.length) {
|
|
1865
|
+
const primaryActivity = day.activities[0];
|
|
1866
|
+
if (primaryActivity.status === "near-deadline") {
|
|
1867
|
+
dayStyle = "bg-warning-background border-2 border-warning-400";
|
|
1868
|
+
textStyle = "text-text-950";
|
|
1869
|
+
} else if (primaryActivity.status === "in-deadline") {
|
|
1870
|
+
dayStyle = "bg-success-background border-2 border-success-300";
|
|
1871
|
+
textStyle = "text-text-950";
|
|
1872
|
+
} else if (primaryActivity.status === "overdue") {
|
|
1873
|
+
dayStyle = "bg-error-background border-2 border-error-300";
|
|
1874
|
+
textStyle = "text-text-950";
|
|
1875
|
+
} else {
|
|
1876
|
+
dayStyle = "border-2 border-blue-500";
|
|
1877
|
+
textStyle = "text-blue-500";
|
|
1878
|
+
}
|
|
1879
|
+
} else {
|
|
1880
|
+
textStyle = "text-text-950 hover:bg-background-100";
|
|
1881
|
+
}
|
|
1882
|
+
return { dayStyle, textStyle };
|
|
1883
|
+
};
|
|
1884
|
+
var Calendar = ({
|
|
1885
|
+
variant = "selection",
|
|
1886
|
+
selectedDate,
|
|
1887
|
+
onDateSelect,
|
|
1888
|
+
onMonthChange,
|
|
1889
|
+
activities = {},
|
|
1890
|
+
showActivities = true,
|
|
1891
|
+
className = ""
|
|
1892
|
+
}) => {
|
|
1893
|
+
const [currentDate, setCurrentDate] = (0, import_react9.useState)(selectedDate || /* @__PURE__ */ new Date());
|
|
1894
|
+
const [isMonthPickerOpen, setIsMonthPickerOpen] = (0, import_react9.useState)(false);
|
|
1895
|
+
const monthPickerRef = (0, import_react9.useRef)(null);
|
|
1896
|
+
const monthPickerContainerRef = (0, import_react9.useRef)(null);
|
|
1897
|
+
(0, import_react9.useEffect)(() => {
|
|
1898
|
+
const handleClickOutside = (event) => {
|
|
1899
|
+
if (monthPickerContainerRef.current && !monthPickerContainerRef.current.contains(event.target)) {
|
|
1900
|
+
setIsMonthPickerOpen(false);
|
|
1901
|
+
}
|
|
1902
|
+
};
|
|
1903
|
+
if (isMonthPickerOpen) {
|
|
1904
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
1905
|
+
}
|
|
1906
|
+
return () => {
|
|
1907
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
1908
|
+
};
|
|
1909
|
+
}, [isMonthPickerOpen]);
|
|
1910
|
+
const today = /* @__PURE__ */ new Date();
|
|
1911
|
+
const availableYears = (0, import_react9.useMemo)(() => {
|
|
1912
|
+
const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
|
|
1913
|
+
const years = [];
|
|
1914
|
+
for (let year = currentYear - 10; year <= currentYear + 10; year++) {
|
|
1915
|
+
years.push(year);
|
|
1916
|
+
}
|
|
1917
|
+
return years;
|
|
1918
|
+
}, []);
|
|
1919
|
+
const calendarData = (0, import_react9.useMemo)(() => {
|
|
1920
|
+
const year = currentDate.getFullYear();
|
|
1921
|
+
const month = currentDate.getMonth();
|
|
1922
|
+
const firstDay = new Date(year, month, 1);
|
|
1923
|
+
const startDate = new Date(firstDay);
|
|
1924
|
+
const firstDayOfWeek = (firstDay.getDay() + 6) % 7;
|
|
1925
|
+
startDate.setDate(startDate.getDate() - firstDayOfWeek);
|
|
1926
|
+
const days = [];
|
|
1927
|
+
const currentCalendarDate = new Date(startDate);
|
|
1928
|
+
for (let i = 0; i < 42; i++) {
|
|
1929
|
+
const dateKey = currentCalendarDate.toISOString().split("T")[0];
|
|
1930
|
+
const dayActivities = activities[dateKey] || [];
|
|
1931
|
+
days.push({
|
|
1932
|
+
date: new Date(currentCalendarDate),
|
|
1933
|
+
isCurrentMonth: currentCalendarDate.getMonth() === month,
|
|
1934
|
+
isToday: currentCalendarDate.getFullYear() === today.getFullYear() && currentCalendarDate.getMonth() === today.getMonth() && currentCalendarDate.getDate() === today.getDate(),
|
|
1935
|
+
isSelected: selectedDate ? currentCalendarDate.getFullYear() === selectedDate.getFullYear() && currentCalendarDate.getMonth() === selectedDate.getMonth() && currentCalendarDate.getDate() === selectedDate.getDate() : false,
|
|
1936
|
+
activities: dayActivities
|
|
1937
|
+
});
|
|
1938
|
+
currentCalendarDate.setDate(currentCalendarDate.getDate() + 1);
|
|
1939
|
+
}
|
|
1940
|
+
return days;
|
|
1941
|
+
}, [currentDate, selectedDate, activities]);
|
|
1942
|
+
const goToPreviousMonth = () => {
|
|
1943
|
+
const newDate = new Date(currentDate);
|
|
1944
|
+
newDate.setMonth(newDate.getMonth() - 1);
|
|
1945
|
+
setCurrentDate(newDate);
|
|
1946
|
+
onMonthChange?.(newDate);
|
|
1947
|
+
};
|
|
1948
|
+
const goToNextMonth = () => {
|
|
1949
|
+
const newDate = new Date(currentDate);
|
|
1950
|
+
newDate.setMonth(newDate.getMonth() + 1);
|
|
1951
|
+
setCurrentDate(newDate);
|
|
1952
|
+
onMonthChange?.(newDate);
|
|
1953
|
+
};
|
|
1954
|
+
const goToMonth = (month, year) => {
|
|
1955
|
+
const newDate = new Date(year, month, 1);
|
|
1956
|
+
setCurrentDate(newDate);
|
|
1957
|
+
setIsMonthPickerOpen(false);
|
|
1958
|
+
onMonthChange?.(newDate);
|
|
1959
|
+
};
|
|
1960
|
+
const handleYearChange = (year) => {
|
|
1961
|
+
const newDate = new Date(year, currentDate.getMonth(), 1);
|
|
1962
|
+
setCurrentDate(newDate);
|
|
1963
|
+
};
|
|
1964
|
+
const toggleMonthPicker = (event) => {
|
|
1965
|
+
event.stopPropagation();
|
|
1966
|
+
setIsMonthPickerOpen(!isMonthPickerOpen);
|
|
1967
|
+
};
|
|
1968
|
+
const handleDateSelect = (day) => {
|
|
1969
|
+
onDateSelect?.(day.date);
|
|
1970
|
+
};
|
|
1971
|
+
if (variant === "navigation") {
|
|
1972
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `bg-background rounded-xl p-3 ${className}`, children: [
|
|
1973
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between mb-4 px-6", children: [
|
|
1974
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", ref: monthPickerContainerRef, children: [
|
|
1975
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1976
|
+
"button",
|
|
1977
|
+
{
|
|
1978
|
+
onClick: toggleMonthPicker,
|
|
1979
|
+
className: "flex items-center gap-1 hover:bg-background-100 rounded px-2 py-1 transition-colors",
|
|
1980
|
+
children: [
|
|
1981
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "text-sm font-medium text-text-600", children: [
|
|
1982
|
+
MONTH_NAMES[currentDate.getMonth()],
|
|
1983
|
+
" ",
|
|
1984
|
+
currentDate.getFullYear()
|
|
1985
|
+
] }),
|
|
1986
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1987
|
+
"svg",
|
|
1988
|
+
{
|
|
1989
|
+
className: `w-4 h-4 text-primary-950 transition-transform ${isMonthPickerOpen ? "rotate-180" : ""}`,
|
|
1990
|
+
fill: "none",
|
|
1991
|
+
stroke: "currentColor",
|
|
1992
|
+
viewBox: "0 0 24 24",
|
|
1993
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1994
|
+
"path",
|
|
1995
|
+
{
|
|
1996
|
+
strokeLinecap: "round",
|
|
1997
|
+
strokeLinejoin: "round",
|
|
1998
|
+
strokeWidth: 2,
|
|
1999
|
+
d: "M19 9l-7 7-7-7"
|
|
2000
|
+
}
|
|
2001
|
+
)
|
|
2002
|
+
}
|
|
2003
|
+
)
|
|
2004
|
+
]
|
|
2005
|
+
}
|
|
2006
|
+
),
|
|
2007
|
+
isMonthPickerOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2008
|
+
MonthYearPicker,
|
|
2009
|
+
{
|
|
2010
|
+
monthPickerRef,
|
|
2011
|
+
availableYears,
|
|
2012
|
+
currentDate,
|
|
2013
|
+
onYearChange: handleYearChange,
|
|
2014
|
+
onMonthChange: goToMonth
|
|
2015
|
+
}
|
|
2016
|
+
)
|
|
2017
|
+
] }),
|
|
2018
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-10", children: [
|
|
2019
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2020
|
+
"button",
|
|
2021
|
+
{
|
|
2022
|
+
onClick: goToPreviousMonth,
|
|
2023
|
+
className: "p-1 rounded hover:bg-background-100 transition-colors",
|
|
2024
|
+
"aria-label": "M\xEAs anterior",
|
|
2025
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2026
|
+
"svg",
|
|
2027
|
+
{
|
|
2028
|
+
className: "w-6 h-6 text-primary-950",
|
|
2029
|
+
fill: "none",
|
|
2030
|
+
stroke: "currentColor",
|
|
2031
|
+
viewBox: "0 0 24 24",
|
|
2032
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2033
|
+
"path",
|
|
2034
|
+
{
|
|
2035
|
+
strokeLinecap: "round",
|
|
2036
|
+
strokeLinejoin: "round",
|
|
2037
|
+
strokeWidth: 2,
|
|
2038
|
+
d: "M15 19l-7-7 7-7"
|
|
2039
|
+
}
|
|
2040
|
+
)
|
|
2041
|
+
}
|
|
2042
|
+
)
|
|
2043
|
+
}
|
|
2044
|
+
),
|
|
2045
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2046
|
+
"button",
|
|
2047
|
+
{
|
|
2048
|
+
onClick: goToNextMonth,
|
|
2049
|
+
className: "p-1 rounded hover:bg-background-100 transition-colors",
|
|
2050
|
+
"aria-label": "Pr\xF3ximo m\xEAs",
|
|
2051
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2052
|
+
"svg",
|
|
2053
|
+
{
|
|
2054
|
+
className: "w-6 h-6 text-primary-950",
|
|
2055
|
+
fill: "none",
|
|
2056
|
+
stroke: "currentColor",
|
|
2057
|
+
viewBox: "0 0 24 24",
|
|
2058
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2059
|
+
"path",
|
|
2060
|
+
{
|
|
2061
|
+
strokeLinecap: "round",
|
|
2062
|
+
strokeLinejoin: "round",
|
|
2063
|
+
strokeWidth: 2,
|
|
2064
|
+
d: "M9 5l7 7-7 7"
|
|
2065
|
+
}
|
|
2066
|
+
)
|
|
2067
|
+
}
|
|
2068
|
+
)
|
|
2069
|
+
}
|
|
2070
|
+
)
|
|
2071
|
+
] })
|
|
2072
|
+
] }),
|
|
2073
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEK_DAYS_SHORT.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2074
|
+
"div",
|
|
2075
|
+
{
|
|
2076
|
+
className: "h-9 flex items-center justify-center text-xs font-normal text-text-600",
|
|
2077
|
+
children: day
|
|
2078
|
+
},
|
|
2079
|
+
`${day}-${index}`
|
|
2080
|
+
)) }),
|
|
2081
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "grid grid-cols-7 gap-1", children: calendarData.map((day) => {
|
|
2082
|
+
if (!day.isCurrentMonth) {
|
|
2083
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2084
|
+
"div",
|
|
2085
|
+
{
|
|
2086
|
+
className: "flex items-center justify-center",
|
|
2087
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-9 h-9" })
|
|
2088
|
+
},
|
|
2089
|
+
day.date.getTime()
|
|
2090
|
+
);
|
|
2091
|
+
}
|
|
2092
|
+
const { dayStyle, textStyle } = getDayStyles(
|
|
2093
|
+
day,
|
|
2094
|
+
variant,
|
|
2095
|
+
showActivities
|
|
2096
|
+
);
|
|
2097
|
+
let spanClass = "";
|
|
2098
|
+
if (day.isSelected && day.isToday) {
|
|
2099
|
+
spanClass = "h-6 w-6 rounded-full bg-[#1c61b2] text-text";
|
|
2100
|
+
} else if (day.isSelected) {
|
|
2101
|
+
spanClass = "h-6 w-6 rounded-full bg-primary-950 text-text";
|
|
2102
|
+
}
|
|
2103
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2104
|
+
"div",
|
|
2105
|
+
{
|
|
2106
|
+
className: "flex items-center justify-center",
|
|
2107
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2108
|
+
"button",
|
|
2109
|
+
{
|
|
2110
|
+
className: `
|
|
2111
|
+
w-9 h-9
|
|
2112
|
+
flex items-center justify-center
|
|
2113
|
+
text-md font-normal
|
|
2114
|
+
cursor-pointer
|
|
2115
|
+
rounded-full
|
|
2116
|
+
${dayStyle}
|
|
2117
|
+
${textStyle}
|
|
2118
|
+
`,
|
|
2119
|
+
onClick: () => handleDateSelect(day),
|
|
2120
|
+
"aria-label": `${day.date.getDate()} de ${MONTH_NAMES[day.date.getMonth()]}`,
|
|
2121
|
+
"aria-current": day.isToday ? "date" : void 0,
|
|
2122
|
+
tabIndex: 0,
|
|
2123
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: spanClass, children: day.date.getDate() })
|
|
2124
|
+
}
|
|
2125
|
+
)
|
|
2126
|
+
},
|
|
2127
|
+
day.date.getTime()
|
|
2128
|
+
);
|
|
2129
|
+
}) })
|
|
2130
|
+
] });
|
|
2131
|
+
}
|
|
2132
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `bg-background rounded-xl p-4 ${className}`, children: [
|
|
2133
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between mb-3.5", children: [
|
|
2134
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative", ref: monthPickerContainerRef, children: [
|
|
2135
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
2136
|
+
"button",
|
|
2137
|
+
{
|
|
2138
|
+
onClick: toggleMonthPicker,
|
|
2139
|
+
className: "flex items-center gap-2 hover:bg-background-100 rounded px-2 py-1 transition-colors",
|
|
2140
|
+
children: [
|
|
2141
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("h2", { className: "text-lg font-semibold text-text-950", children: [
|
|
2142
|
+
MONTH_NAMES[currentDate.getMonth()],
|
|
2143
|
+
" ",
|
|
2144
|
+
currentDate.getFullYear()
|
|
2145
|
+
] }),
|
|
2146
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2147
|
+
"svg",
|
|
2148
|
+
{
|
|
2149
|
+
className: `w-4 h-4 text-text-400 transition-transform ${isMonthPickerOpen ? "rotate-180" : ""}`,
|
|
2150
|
+
fill: "none",
|
|
2151
|
+
stroke: "currentColor",
|
|
2152
|
+
viewBox: "0 0 24 24",
|
|
2153
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2154
|
+
"path",
|
|
2155
|
+
{
|
|
2156
|
+
strokeLinecap: "round",
|
|
2157
|
+
strokeLinejoin: "round",
|
|
2158
|
+
strokeWidth: 2,
|
|
2159
|
+
d: "M19 9l-7 7-7-7"
|
|
2160
|
+
}
|
|
2161
|
+
)
|
|
2162
|
+
}
|
|
2163
|
+
)
|
|
2164
|
+
]
|
|
2165
|
+
}
|
|
2166
|
+
),
|
|
2167
|
+
isMonthPickerOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2168
|
+
MonthYearPicker,
|
|
2169
|
+
{
|
|
2170
|
+
monthPickerRef,
|
|
2171
|
+
availableYears,
|
|
2172
|
+
currentDate,
|
|
2173
|
+
onYearChange: handleYearChange,
|
|
2174
|
+
onMonthChange: goToMonth
|
|
2175
|
+
}
|
|
2176
|
+
)
|
|
2177
|
+
] }),
|
|
2178
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
2179
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2180
|
+
"button",
|
|
2181
|
+
{
|
|
2182
|
+
onClick: goToPreviousMonth,
|
|
2183
|
+
className: "p-1 rounded-md hover:bg-background-100 transition-colors",
|
|
2184
|
+
"aria-label": "M\xEAs anterior",
|
|
2185
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2186
|
+
"svg",
|
|
2187
|
+
{
|
|
2188
|
+
className: "w-6 h-6 text-primary-950",
|
|
2189
|
+
fill: "none",
|
|
2190
|
+
stroke: "currentColor",
|
|
2191
|
+
viewBox: "0 0 24 24",
|
|
2192
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2193
|
+
"path",
|
|
2194
|
+
{
|
|
2195
|
+
strokeLinecap: "round",
|
|
2196
|
+
strokeLinejoin: "round",
|
|
2197
|
+
strokeWidth: 2,
|
|
2198
|
+
d: "M15 19l-7-7 7-7"
|
|
2199
|
+
}
|
|
2200
|
+
)
|
|
2201
|
+
}
|
|
2202
|
+
)
|
|
2203
|
+
}
|
|
2204
|
+
),
|
|
2205
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2206
|
+
"button",
|
|
2207
|
+
{
|
|
2208
|
+
onClick: goToNextMonth,
|
|
2209
|
+
className: "p-1 rounded-md hover:bg-background-100 transition-colors",
|
|
2210
|
+
"aria-label": "Pr\xF3ximo m\xEAs",
|
|
2211
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2212
|
+
"svg",
|
|
2213
|
+
{
|
|
2214
|
+
className: "w-6 h-6 text-primary-950",
|
|
2215
|
+
fill: "none",
|
|
2216
|
+
stroke: "currentColor",
|
|
2217
|
+
viewBox: "0 0 24 24",
|
|
2218
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2219
|
+
"path",
|
|
2220
|
+
{
|
|
2221
|
+
strokeLinecap: "round",
|
|
2222
|
+
strokeLinejoin: "round",
|
|
2223
|
+
strokeWidth: 2,
|
|
2224
|
+
d: "M9 5l7 7-7 7"
|
|
2225
|
+
}
|
|
2226
|
+
)
|
|
2227
|
+
}
|
|
2228
|
+
)
|
|
2229
|
+
}
|
|
2230
|
+
)
|
|
2231
|
+
] })
|
|
2232
|
+
] }),
|
|
2233
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEK_DAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2234
|
+
"div",
|
|
2235
|
+
{
|
|
2236
|
+
className: "h-4 flex items-center justify-center text-xs font-semibold text-text-500",
|
|
2237
|
+
children: day
|
|
2238
|
+
},
|
|
2239
|
+
day
|
|
2240
|
+
)) }),
|
|
2241
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "grid grid-cols-7 gap-1", children: calendarData.map((day) => {
|
|
2242
|
+
if (!day.isCurrentMonth) {
|
|
2243
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2244
|
+
"div",
|
|
2245
|
+
{
|
|
2246
|
+
className: "flex items-center justify-center",
|
|
2247
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-10 h-10" })
|
|
2248
|
+
},
|
|
2249
|
+
day.date.getTime()
|
|
2250
|
+
);
|
|
2251
|
+
}
|
|
2252
|
+
const { dayStyle, textStyle } = getDayStyles(
|
|
2253
|
+
day,
|
|
2254
|
+
variant,
|
|
2255
|
+
showActivities
|
|
2256
|
+
);
|
|
2257
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2258
|
+
"div",
|
|
2259
|
+
{
|
|
2260
|
+
className: "flex items-center justify-center",
|
|
2261
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2262
|
+
"button",
|
|
2263
|
+
{
|
|
2264
|
+
className: `
|
|
2265
|
+
w-10 h-10
|
|
2266
|
+
flex items-center justify-center
|
|
2267
|
+
text-xl font-normal
|
|
2268
|
+
cursor-pointer
|
|
2269
|
+
rounded-full
|
|
2270
|
+
focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-1
|
|
2271
|
+
${dayStyle}
|
|
2272
|
+
${textStyle}
|
|
2273
|
+
`,
|
|
2274
|
+
onClick: () => handleDateSelect(day),
|
|
2275
|
+
"aria-label": `${day.date.getDate()} de ${MONTH_NAMES[day.date.getMonth()]}`,
|
|
2276
|
+
"aria-current": day.isToday ? "date" : void 0,
|
|
2277
|
+
tabIndex: 0,
|
|
2278
|
+
children: day.date.getDate()
|
|
2279
|
+
}
|
|
2280
|
+
)
|
|
2281
|
+
},
|
|
2282
|
+
day.date.getTime()
|
|
2283
|
+
);
|
|
2284
|
+
}) })
|
|
2285
|
+
] });
|
|
2286
|
+
};
|
|
2287
|
+
var Calendar_default = Calendar;
|
|
2288
|
+
|
|
1787
2289
|
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
1788
2290
|
var import_phosphor_react7 = require("phosphor-react");
|
|
1789
|
-
var
|
|
2291
|
+
var import_react10 = require("react");
|
|
1790
2292
|
var import_zustand2 = require("zustand");
|
|
1791
|
-
var
|
|
2293
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1792
2294
|
function createDropdownStore() {
|
|
1793
2295
|
return (0, import_zustand2.create)((set) => ({
|
|
1794
2296
|
open: false,
|
|
@@ -1804,8 +2306,8 @@ var useDropdownStore = (externalStore) => {
|
|
|
1804
2306
|
return externalStore;
|
|
1805
2307
|
};
|
|
1806
2308
|
var injectStore = (children, store) => {
|
|
1807
|
-
return
|
|
1808
|
-
if ((0,
|
|
2309
|
+
return import_react10.Children.map(children, (child) => {
|
|
2310
|
+
if ((0, import_react10.isValidElement)(child)) {
|
|
1809
2311
|
const typedChild = child;
|
|
1810
2312
|
const newProps = {
|
|
1811
2313
|
store
|
|
@@ -1813,13 +2315,13 @@ var injectStore = (children, store) => {
|
|
|
1813
2315
|
if (typedChild.props.children) {
|
|
1814
2316
|
newProps.children = injectStore(typedChild.props.children, store);
|
|
1815
2317
|
}
|
|
1816
|
-
return (0,
|
|
2318
|
+
return (0, import_react10.cloneElement)(typedChild, newProps);
|
|
1817
2319
|
}
|
|
1818
2320
|
return child;
|
|
1819
2321
|
});
|
|
1820
2322
|
};
|
|
1821
2323
|
var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
1822
|
-
const storeRef = (0,
|
|
2324
|
+
const storeRef = (0, import_react10.useRef)(null);
|
|
1823
2325
|
storeRef.current ??= createDropdownStore();
|
|
1824
2326
|
const store = storeRef.current;
|
|
1825
2327
|
const isControlled = open !== void 0;
|
|
@@ -1829,7 +2331,7 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
|
1829
2331
|
onOpenChange?.(newOpen);
|
|
1830
2332
|
if (!isControlled) store.setState({ open: newOpen });
|
|
1831
2333
|
};
|
|
1832
|
-
const menuRef = (0,
|
|
2334
|
+
const menuRef = (0, import_react10.useRef)(null);
|
|
1833
2335
|
const handleArrowDownOrArrowUp = (event) => {
|
|
1834
2336
|
const menuContent = menuRef.current?.querySelector('[role="menu"]');
|
|
1835
2337
|
if (menuContent) {
|
|
@@ -1863,7 +2365,7 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
|
1863
2365
|
setOpen(false);
|
|
1864
2366
|
}
|
|
1865
2367
|
};
|
|
1866
|
-
(0,
|
|
2368
|
+
(0, import_react10.useEffect)(() => {
|
|
1867
2369
|
onOpenChange?.(currentOpen);
|
|
1868
2370
|
if (currentOpen) {
|
|
1869
2371
|
document.addEventListener("mousedown", handleClickOutside);
|
|
@@ -1874,12 +2376,12 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
|
1874
2376
|
document.removeEventListener("keydown", handleDownkey);
|
|
1875
2377
|
};
|
|
1876
2378
|
}, [currentOpen]);
|
|
1877
|
-
(0,
|
|
2379
|
+
(0, import_react10.useEffect)(() => {
|
|
1878
2380
|
if (isControlled) {
|
|
1879
2381
|
store.setState({ open });
|
|
1880
2382
|
}
|
|
1881
2383
|
}, []);
|
|
1882
|
-
return /* @__PURE__ */ (0,
|
|
2384
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
|
|
1883
2385
|
};
|
|
1884
2386
|
var DropdownMenuTrigger = ({
|
|
1885
2387
|
className,
|
|
@@ -1891,7 +2393,7 @@ var DropdownMenuTrigger = ({
|
|
|
1891
2393
|
const store = useDropdownStore(externalStore);
|
|
1892
2394
|
const open = (0, import_zustand2.useStore)(store, (s) => s.open);
|
|
1893
2395
|
const toggleOpen = () => store.setState({ open: !open });
|
|
1894
|
-
return /* @__PURE__ */ (0,
|
|
2396
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1895
2397
|
Button_default,
|
|
1896
2398
|
{
|
|
1897
2399
|
variant: "outline",
|
|
@@ -1927,8 +2429,8 @@ var MENUCONTENT_VARIANT_CLASSES = {
|
|
|
1927
2429
|
menu: "p-1",
|
|
1928
2430
|
profile: "p-6"
|
|
1929
2431
|
};
|
|
1930
|
-
var MenuLabel = (0,
|
|
1931
|
-
return /* @__PURE__ */ (0,
|
|
2432
|
+
var MenuLabel = (0, import_react10.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
|
|
2433
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1932
2434
|
"div",
|
|
1933
2435
|
{
|
|
1934
2436
|
ref,
|
|
@@ -1938,7 +2440,7 @@ var MenuLabel = (0, import_react9.forwardRef)(({ className, inset, store: _store
|
|
|
1938
2440
|
);
|
|
1939
2441
|
});
|
|
1940
2442
|
MenuLabel.displayName = "MenuLabel";
|
|
1941
|
-
var MenuContent = (0,
|
|
2443
|
+
var MenuContent = (0, import_react10.forwardRef)(
|
|
1942
2444
|
({
|
|
1943
2445
|
className,
|
|
1944
2446
|
align = "start",
|
|
@@ -1951,8 +2453,8 @@ var MenuContent = (0, import_react9.forwardRef)(
|
|
|
1951
2453
|
}, ref) => {
|
|
1952
2454
|
const store = useDropdownStore(externalStore);
|
|
1953
2455
|
const open = (0, import_zustand2.useStore)(store, (s) => s.open);
|
|
1954
|
-
const [isVisible, setIsVisible] = (0,
|
|
1955
|
-
(0,
|
|
2456
|
+
const [isVisible, setIsVisible] = (0, import_react10.useState)(open);
|
|
2457
|
+
(0, import_react10.useEffect)(() => {
|
|
1956
2458
|
if (open) {
|
|
1957
2459
|
setIsVisible(true);
|
|
1958
2460
|
} else {
|
|
@@ -1967,7 +2469,7 @@ var MenuContent = (0, import_react9.forwardRef)(
|
|
|
1967
2469
|
return `absolute ${vertical} ${horizontal}`;
|
|
1968
2470
|
};
|
|
1969
2471
|
const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
|
|
1970
|
-
return /* @__PURE__ */ (0,
|
|
2472
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1971
2473
|
"div",
|
|
1972
2474
|
{
|
|
1973
2475
|
ref,
|
|
@@ -1992,7 +2494,7 @@ var MenuContent = (0, import_react9.forwardRef)(
|
|
|
1992
2494
|
}
|
|
1993
2495
|
);
|
|
1994
2496
|
MenuContent.displayName = "MenuContent";
|
|
1995
|
-
var DropdownMenuItem = (0,
|
|
2497
|
+
var DropdownMenuItem = (0, import_react10.forwardRef)(
|
|
1996
2498
|
({
|
|
1997
2499
|
className,
|
|
1998
2500
|
size = "small",
|
|
@@ -2026,7 +2528,7 @@ var DropdownMenuItem = (0, import_react9.forwardRef)(
|
|
|
2026
2528
|
const getVariantProps = () => {
|
|
2027
2529
|
return variant === "profile" ? { "data-variant": "profile" } : {};
|
|
2028
2530
|
};
|
|
2029
|
-
return /* @__PURE__ */ (0,
|
|
2531
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
2030
2532
|
"div",
|
|
2031
2533
|
{
|
|
2032
2534
|
ref,
|
|
@@ -2048,7 +2550,7 @@ var DropdownMenuItem = (0, import_react9.forwardRef)(
|
|
|
2048
2550
|
...props,
|
|
2049
2551
|
children: [
|
|
2050
2552
|
iconLeft,
|
|
2051
|
-
/* @__PURE__ */ (0,
|
|
2553
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "w-full text-md", children }),
|
|
2052
2554
|
iconRight
|
|
2053
2555
|
]
|
|
2054
2556
|
}
|
|
@@ -2056,7 +2558,7 @@ var DropdownMenuItem = (0, import_react9.forwardRef)(
|
|
|
2056
2558
|
}
|
|
2057
2559
|
);
|
|
2058
2560
|
DropdownMenuItem.displayName = "DropdownMenuItem";
|
|
2059
|
-
var DropdownMenuSeparator = (0,
|
|
2561
|
+
var DropdownMenuSeparator = (0, import_react10.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2060
2562
|
"div",
|
|
2061
2563
|
{
|
|
2062
2564
|
ref,
|
|
@@ -2065,11 +2567,11 @@ var DropdownMenuSeparator = (0, import_react9.forwardRef)(({ className, store: _
|
|
|
2065
2567
|
}
|
|
2066
2568
|
));
|
|
2067
2569
|
DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
|
|
2068
|
-
var ProfileMenuTrigger = (0,
|
|
2570
|
+
var ProfileMenuTrigger = (0, import_react10.forwardRef)(({ className, onClick, store: externalStore, ...props }, ref) => {
|
|
2069
2571
|
const store = useDropdownStore(externalStore);
|
|
2070
2572
|
const open = (0, import_zustand2.useStore)(store, (s) => s.open);
|
|
2071
2573
|
const toggleOpen = () => store.setState({ open: !open });
|
|
2072
|
-
return /* @__PURE__ */ (0,
|
|
2574
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2073
2575
|
"button",
|
|
2074
2576
|
{
|
|
2075
2577
|
ref,
|
|
@@ -2081,13 +2583,13 @@ var ProfileMenuTrigger = (0, import_react9.forwardRef)(({ className, onClick, st
|
|
|
2081
2583
|
},
|
|
2082
2584
|
"aria-expanded": open,
|
|
2083
2585
|
...props,
|
|
2084
|
-
children: /* @__PURE__ */ (0,
|
|
2586
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_phosphor_react7.User, { className: "text-background-950", size: 18 }) })
|
|
2085
2587
|
}
|
|
2086
2588
|
);
|
|
2087
2589
|
});
|
|
2088
2590
|
ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
|
|
2089
|
-
var ProfileMenuHeader = (0,
|
|
2090
|
-
return /* @__PURE__ */ (0,
|
|
2591
|
+
var ProfileMenuHeader = (0, import_react10.forwardRef)(({ className, name, email, store: _store, ...props }, ref) => {
|
|
2592
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
2091
2593
|
"div",
|
|
2092
2594
|
{
|
|
2093
2595
|
ref,
|
|
@@ -2098,18 +2600,18 @@ var ProfileMenuHeader = (0, import_react9.forwardRef)(({ className, name, email,
|
|
|
2098
2600
|
`,
|
|
2099
2601
|
...props,
|
|
2100
2602
|
children: [
|
|
2101
|
-
/* @__PURE__ */ (0,
|
|
2102
|
-
/* @__PURE__ */ (0,
|
|
2103
|
-
/* @__PURE__ */ (0,
|
|
2104
|
-
/* @__PURE__ */ (0,
|
|
2603
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_phosphor_react7.User, { size: 34, className: "text-background-950" }) }),
|
|
2604
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col ", children: [
|
|
2605
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-xl font-bold text-text-950", children: name }),
|
|
2606
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-md text-text-600", children: email })
|
|
2105
2607
|
] })
|
|
2106
2608
|
]
|
|
2107
2609
|
}
|
|
2108
2610
|
);
|
|
2109
2611
|
});
|
|
2110
2612
|
ProfileMenuHeader.displayName = "ProfileMenuHeader";
|
|
2111
|
-
var ProfileMenuSection = (0,
|
|
2112
|
-
return /* @__PURE__ */ (0,
|
|
2613
|
+
var ProfileMenuSection = (0, import_react10.forwardRef)(({ className, children, store: _store, ...props }, ref) => {
|
|
2614
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2113
2615
|
"div",
|
|
2114
2616
|
{
|
|
2115
2617
|
ref,
|
|
@@ -2132,7 +2634,7 @@ var ProfileMenuFooter = ({
|
|
|
2132
2634
|
}) => {
|
|
2133
2635
|
const store = useDropdownStore(externalStore);
|
|
2134
2636
|
const setOpen = (0, import_zustand2.useStore)(store, (s) => s.setOpen);
|
|
2135
|
-
return /* @__PURE__ */ (0,
|
|
2637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
2136
2638
|
Button_default,
|
|
2137
2639
|
{
|
|
2138
2640
|
variant: "outline",
|
|
@@ -2144,8 +2646,8 @@ var ProfileMenuFooter = ({
|
|
|
2144
2646
|
},
|
|
2145
2647
|
...props,
|
|
2146
2648
|
children: [
|
|
2147
|
-
/* @__PURE__ */ (0,
|
|
2148
|
-
/* @__PURE__ */ (0,
|
|
2649
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_phosphor_react7.SignOut, {}) }),
|
|
2650
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Sair" })
|
|
2149
2651
|
]
|
|
2150
2652
|
}
|
|
2151
2653
|
);
|
|
@@ -2155,9 +2657,9 @@ var DropdownMenu_default = DropdownMenu;
|
|
|
2155
2657
|
|
|
2156
2658
|
// src/components/Select/Select.tsx
|
|
2157
2659
|
var import_zustand3 = require("zustand");
|
|
2158
|
-
var
|
|
2660
|
+
var import_react11 = require("react");
|
|
2159
2661
|
var import_phosphor_react8 = require("phosphor-react");
|
|
2160
|
-
var
|
|
2662
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2161
2663
|
var VARIANT_CLASSES4 = {
|
|
2162
2664
|
outlined: "border-2 rounded-sm focus:border-primary-950",
|
|
2163
2665
|
underlined: "border-b-2 focus:border-primary-950",
|
|
@@ -2201,13 +2703,13 @@ function getLabelAsNode(children) {
|
|
|
2201
2703
|
if (typeof children === "string" || typeof children === "number") {
|
|
2202
2704
|
return children;
|
|
2203
2705
|
}
|
|
2204
|
-
const flattened =
|
|
2706
|
+
const flattened = import_react11.Children.toArray(children);
|
|
2205
2707
|
if (flattened.length === 1) return flattened[0];
|
|
2206
|
-
return /* @__PURE__ */ (0,
|
|
2708
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: flattened });
|
|
2207
2709
|
}
|
|
2208
2710
|
var injectStore2 = (children, store) => {
|
|
2209
|
-
return
|
|
2210
|
-
if ((0,
|
|
2711
|
+
return import_react11.Children.map(children, (child) => {
|
|
2712
|
+
if ((0, import_react11.isValidElement)(child)) {
|
|
2211
2713
|
const typedChild = child;
|
|
2212
2714
|
const newProps = {
|
|
2213
2715
|
store
|
|
@@ -2215,7 +2717,7 @@ var injectStore2 = (children, store) => {
|
|
|
2215
2717
|
if (typedChild.props.children) {
|
|
2216
2718
|
newProps.children = injectStore2(typedChild.props.children, store);
|
|
2217
2719
|
}
|
|
2218
|
-
return (0,
|
|
2720
|
+
return (0, import_react11.cloneElement)(typedChild, newProps);
|
|
2219
2721
|
}
|
|
2220
2722
|
return child;
|
|
2221
2723
|
});
|
|
@@ -2227,10 +2729,10 @@ var Select = ({
|
|
|
2227
2729
|
onValueChange,
|
|
2228
2730
|
size = "small"
|
|
2229
2731
|
}) => {
|
|
2230
|
-
const storeRef = (0,
|
|
2732
|
+
const storeRef = (0, import_react11.useRef)(null);
|
|
2231
2733
|
storeRef.current ??= createSelectStore();
|
|
2232
2734
|
const store = storeRef.current;
|
|
2233
|
-
const selectRef = (0,
|
|
2735
|
+
const selectRef = (0, import_react11.useRef)(null);
|
|
2234
2736
|
const { open, setOpen, setValue, value, selectedLabel } = (0, import_zustand3.useStore)(
|
|
2235
2737
|
store,
|
|
2236
2738
|
(s) => s
|
|
@@ -2240,8 +2742,8 @@ var Select = ({
|
|
|
2240
2742
|
const findLabelForValue = (children2, targetValue) => {
|
|
2241
2743
|
let found = null;
|
|
2242
2744
|
const search = (nodes) => {
|
|
2243
|
-
|
|
2244
|
-
if (!(0,
|
|
2745
|
+
import_react11.Children.forEach(nodes, (child) => {
|
|
2746
|
+
if (!(0, import_react11.isValidElement)(child)) return;
|
|
2245
2747
|
const typedChild = child;
|
|
2246
2748
|
if (typedChild.type === SelectItem && typedChild.props.value === targetValue) {
|
|
2247
2749
|
if (typeof typedChild.props.children === "string")
|
|
@@ -2254,13 +2756,13 @@ var Select = ({
|
|
|
2254
2756
|
search(children2);
|
|
2255
2757
|
return found;
|
|
2256
2758
|
};
|
|
2257
|
-
(0,
|
|
2759
|
+
(0, import_react11.useEffect)(() => {
|
|
2258
2760
|
if (!selectedLabel && defaultValue) {
|
|
2259
2761
|
const label = findLabelForValue(children, defaultValue);
|
|
2260
2762
|
if (label) store.setState({ selectedLabel: label });
|
|
2261
2763
|
}
|
|
2262
2764
|
}, [children, defaultValue, selectedLabel]);
|
|
2263
|
-
(0,
|
|
2765
|
+
(0, import_react11.useEffect)(() => {
|
|
2264
2766
|
setValue(currentValue);
|
|
2265
2767
|
const handleClickOutside = (event) => {
|
|
2266
2768
|
if (selectRef.current && !selectRef.current.contains(event.target)) {
|
|
@@ -2296,13 +2798,13 @@ var Select = ({
|
|
|
2296
2798
|
document.removeEventListener("keydown", handleArrowKeys);
|
|
2297
2799
|
};
|
|
2298
2800
|
}, [open]);
|
|
2299
|
-
(0,
|
|
2801
|
+
(0, import_react11.useEffect)(() => {
|
|
2300
2802
|
if (onValueChange) {
|
|
2301
2803
|
onValueChange(value);
|
|
2302
2804
|
}
|
|
2303
2805
|
}, [value]);
|
|
2304
2806
|
const sizeClasses = SIZE_CLASSES9[size];
|
|
2305
|
-
return /* @__PURE__ */ (0,
|
|
2807
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore2(children, store) });
|
|
2306
2808
|
};
|
|
2307
2809
|
var SelectValue = ({
|
|
2308
2810
|
placeholder,
|
|
@@ -2311,9 +2813,9 @@ var SelectValue = ({
|
|
|
2311
2813
|
const store = useSelectStore(externalStore);
|
|
2312
2814
|
const selectedLabel = (0, import_zustand3.useStore)(store, (s) => s.selectedLabel);
|
|
2313
2815
|
const value = (0, import_zustand3.useStore)(store, (s) => s.value);
|
|
2314
|
-
return /* @__PURE__ */ (0,
|
|
2816
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
|
|
2315
2817
|
};
|
|
2316
|
-
var SelectTrigger = (0,
|
|
2818
|
+
var SelectTrigger = (0, import_react11.forwardRef)(
|
|
2317
2819
|
({
|
|
2318
2820
|
className,
|
|
2319
2821
|
invalid = false,
|
|
@@ -2326,7 +2828,7 @@ var SelectTrigger = (0, import_react10.forwardRef)(
|
|
|
2326
2828
|
const open = (0, import_zustand3.useStore)(store, (s) => s.open);
|
|
2327
2829
|
const toggleOpen = () => store.setState({ open: !open });
|
|
2328
2830
|
const variantClasses = VARIANT_CLASSES4[variant];
|
|
2329
|
-
return /* @__PURE__ */ (0,
|
|
2831
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
2330
2832
|
"button",
|
|
2331
2833
|
{
|
|
2332
2834
|
ref,
|
|
@@ -2345,7 +2847,7 @@ var SelectTrigger = (0, import_react10.forwardRef)(
|
|
|
2345
2847
|
...props,
|
|
2346
2848
|
children: [
|
|
2347
2849
|
props.children,
|
|
2348
|
-
/* @__PURE__ */ (0,
|
|
2850
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2349
2851
|
import_phosphor_react8.CaretDown,
|
|
2350
2852
|
{
|
|
2351
2853
|
className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
|
|
@@ -2357,7 +2859,7 @@ var SelectTrigger = (0, import_react10.forwardRef)(
|
|
|
2357
2859
|
}
|
|
2358
2860
|
);
|
|
2359
2861
|
SelectTrigger.displayName = "SelectTrigger";
|
|
2360
|
-
var SelectContent = (0,
|
|
2862
|
+
var SelectContent = (0, import_react11.forwardRef)(
|
|
2361
2863
|
({
|
|
2362
2864
|
children,
|
|
2363
2865
|
className,
|
|
@@ -2370,7 +2872,7 @@ var SelectContent = (0, import_react10.forwardRef)(
|
|
|
2370
2872
|
const open = (0, import_zustand3.useStore)(store, (s) => s.open);
|
|
2371
2873
|
if (!open) return null;
|
|
2372
2874
|
const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
|
|
2373
|
-
return /* @__PURE__ */ (0,
|
|
2875
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2374
2876
|
"div",
|
|
2375
2877
|
{
|
|
2376
2878
|
role: "menu",
|
|
@@ -2383,7 +2885,7 @@ var SelectContent = (0, import_react10.forwardRef)(
|
|
|
2383
2885
|
}
|
|
2384
2886
|
);
|
|
2385
2887
|
SelectContent.displayName = "SelectContent";
|
|
2386
|
-
var SelectItem = (0,
|
|
2888
|
+
var SelectItem = (0, import_react11.forwardRef)(
|
|
2387
2889
|
({
|
|
2388
2890
|
className,
|
|
2389
2891
|
children,
|
|
@@ -2404,7 +2906,7 @@ var SelectItem = (0, import_react10.forwardRef)(
|
|
|
2404
2906
|
}
|
|
2405
2907
|
props.onClick?.(e);
|
|
2406
2908
|
};
|
|
2407
|
-
return /* @__PURE__ */ (0,
|
|
2909
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
2408
2910
|
"div",
|
|
2409
2911
|
{
|
|
2410
2912
|
role: "menuitem",
|
|
@@ -2424,7 +2926,7 @@ var SelectItem = (0, import_react10.forwardRef)(
|
|
|
2424
2926
|
tabIndex: disabled ? -1 : 0,
|
|
2425
2927
|
...props,
|
|
2426
2928
|
children: [
|
|
2427
|
-
/* @__PURE__ */ (0,
|
|
2929
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_phosphor_react8.Check, { className: "" }) }),
|
|
2428
2930
|
children
|
|
2429
2931
|
]
|
|
2430
2932
|
}
|
|
@@ -2436,9 +2938,9 @@ var Select_default = Select;
|
|
|
2436
2938
|
|
|
2437
2939
|
// src/components/Menu/Menu.tsx
|
|
2438
2940
|
var import_zustand4 = require("zustand");
|
|
2439
|
-
var
|
|
2941
|
+
var import_react12 = require("react");
|
|
2440
2942
|
var import_phosphor_react9 = require("phosphor-react");
|
|
2441
|
-
var
|
|
2943
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2442
2944
|
var createMenuStore = () => (0, import_zustand4.create)((set) => ({
|
|
2443
2945
|
value: "",
|
|
2444
2946
|
setValue: (value) => set({ value })
|
|
@@ -2452,7 +2954,7 @@ var VARIANT_CLASSES5 = {
|
|
|
2452
2954
|
menu2: "overflow-x-auto scroll-smooth",
|
|
2453
2955
|
breadcrumb: ""
|
|
2454
2956
|
};
|
|
2455
|
-
var Menu = (0,
|
|
2957
|
+
var Menu = (0, import_react12.forwardRef)(
|
|
2456
2958
|
({
|
|
2457
2959
|
className,
|
|
2458
2960
|
children,
|
|
@@ -2462,19 +2964,19 @@ var Menu = (0, import_react11.forwardRef)(
|
|
|
2462
2964
|
onValueChange,
|
|
2463
2965
|
...props
|
|
2464
2966
|
}, ref) => {
|
|
2465
|
-
const storeRef = (0,
|
|
2967
|
+
const storeRef = (0, import_react12.useRef)(null);
|
|
2466
2968
|
storeRef.current ??= createMenuStore();
|
|
2467
2969
|
const store = storeRef.current;
|
|
2468
2970
|
const { setValue, value } = (0, import_zustand4.useStore)(store, (s) => s);
|
|
2469
|
-
(0,
|
|
2971
|
+
(0, import_react12.useEffect)(() => {
|
|
2470
2972
|
setValue(propValue ?? defaultValue);
|
|
2471
2973
|
}, [defaultValue, propValue, setValue]);
|
|
2472
|
-
(0,
|
|
2974
|
+
(0, import_react12.useEffect)(() => {
|
|
2473
2975
|
onValueChange?.(value);
|
|
2474
2976
|
}, [value, onValueChange]);
|
|
2475
2977
|
const baseClasses = "w-full flex flex-row items-center gap-2 py-2 px-6";
|
|
2476
2978
|
const variantClasses = VARIANT_CLASSES5[variant];
|
|
2477
|
-
return /* @__PURE__ */ (0,
|
|
2979
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2478
2980
|
"ul",
|
|
2479
2981
|
{
|
|
2480
2982
|
ref,
|
|
@@ -2491,7 +2993,7 @@ var Menu = (0, import_react11.forwardRef)(
|
|
|
2491
2993
|
}
|
|
2492
2994
|
);
|
|
2493
2995
|
Menu.displayName = "Menu";
|
|
2494
|
-
var MenuItem = (0,
|
|
2996
|
+
var MenuItem = (0, import_react12.forwardRef)(
|
|
2495
2997
|
({
|
|
2496
2998
|
className,
|
|
2497
2999
|
children,
|
|
@@ -2519,7 +3021,7 @@ var MenuItem = (0, import_react11.forwardRef)(
|
|
|
2519
3021
|
...props
|
|
2520
3022
|
};
|
|
2521
3023
|
const variants = {
|
|
2522
|
-
menu: /* @__PURE__ */ (0,
|
|
3024
|
+
menu: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2523
3025
|
"li",
|
|
2524
3026
|
{
|
|
2525
3027
|
"data-variant": "menu",
|
|
@@ -2534,7 +3036,7 @@ var MenuItem = (0, import_react11.forwardRef)(
|
|
|
2534
3036
|
children
|
|
2535
3037
|
}
|
|
2536
3038
|
),
|
|
2537
|
-
menu2: /* @__PURE__ */ (0,
|
|
3039
|
+
menu2: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2538
3040
|
"li",
|
|
2539
3041
|
{
|
|
2540
3042
|
"data-variant": "menu2",
|
|
@@ -2546,7 +3048,7 @@ var MenuItem = (0, import_react11.forwardRef)(
|
|
|
2546
3048
|
children
|
|
2547
3049
|
}
|
|
2548
3050
|
),
|
|
2549
|
-
breadcrumb: /* @__PURE__ */ (0,
|
|
3051
|
+
breadcrumb: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2550
3052
|
"li",
|
|
2551
3053
|
{
|
|
2552
3054
|
"data-variant": "breadcrumb",
|
|
@@ -2557,7 +3059,7 @@ var MenuItem = (0, import_react11.forwardRef)(
|
|
|
2557
3059
|
${className ?? ""}
|
|
2558
3060
|
`,
|
|
2559
3061
|
...commonProps,
|
|
2560
|
-
children: /* @__PURE__ */ (0,
|
|
3062
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2561
3063
|
"span",
|
|
2562
3064
|
{
|
|
2563
3065
|
className: `
|
|
@@ -2574,24 +3076,24 @@ var MenuItem = (0, import_react11.forwardRef)(
|
|
|
2574
3076
|
}
|
|
2575
3077
|
);
|
|
2576
3078
|
MenuItem.displayName = "MenuItem";
|
|
2577
|
-
var MenuSeparator = (0,
|
|
2578
|
-
({ className, children, ...props }, ref) => /* @__PURE__ */ (0,
|
|
3079
|
+
var MenuSeparator = (0, import_react12.forwardRef)(
|
|
3080
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2579
3081
|
"li",
|
|
2580
3082
|
{
|
|
2581
3083
|
ref,
|
|
2582
3084
|
"aria-hidden": "true",
|
|
2583
3085
|
className: `[&>svg]:w-4 [&>svg]:h-4 text-text-600 ${className ?? ""}`,
|
|
2584
3086
|
...props,
|
|
2585
|
-
children: children ?? /* @__PURE__ */ (0,
|
|
3087
|
+
children: children ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react9.CaretRight, {})
|
|
2586
3088
|
}
|
|
2587
3089
|
)
|
|
2588
3090
|
);
|
|
2589
3091
|
MenuSeparator.displayName = "MenuSeparator";
|
|
2590
|
-
var injectStore3 = (children, store) =>
|
|
2591
|
-
if (!(0,
|
|
3092
|
+
var injectStore3 = (children, store) => import_react12.Children.map(children, (child) => {
|
|
3093
|
+
if (!(0, import_react12.isValidElement)(child)) return child;
|
|
2592
3094
|
const typedChild = child;
|
|
2593
3095
|
const shouldInject = typedChild.type === MenuItem;
|
|
2594
|
-
return (0,
|
|
3096
|
+
return (0, import_react12.cloneElement)(typedChild, {
|
|
2595
3097
|
...shouldInject ? { store } : {},
|
|
2596
3098
|
...typedChild.props.children ? { children: injectStore3(typedChild.props.children, store) } : {}
|
|
2597
3099
|
});
|
|
@@ -2602,6 +3104,7 @@ var Menu_default = Menu;
|
|
|
2602
3104
|
Alert,
|
|
2603
3105
|
Badge,
|
|
2604
3106
|
Button,
|
|
3107
|
+
Calendar,
|
|
2605
3108
|
CheckBox,
|
|
2606
3109
|
Chips,
|
|
2607
3110
|
Divider,
|