analytica-frontend-lib 1.0.42 → 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/index.css +98 -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 +576 -77
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +556 -58
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +98 -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,
|
|
@@ -1788,11 +1789,508 @@ var ProgressCircle = ({
|
|
|
1788
1789
|
};
|
|
1789
1790
|
var ProgressCircle_default = ProgressCircle;
|
|
1790
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
|
+
|
|
1791
2289
|
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
1792
2290
|
var import_phosphor_react7 = require("phosphor-react");
|
|
1793
|
-
var
|
|
2291
|
+
var import_react10 = require("react");
|
|
1794
2292
|
var import_zustand2 = require("zustand");
|
|
1795
|
-
var
|
|
2293
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1796
2294
|
function createDropdownStore() {
|
|
1797
2295
|
return (0, import_zustand2.create)((set) => ({
|
|
1798
2296
|
open: false,
|
|
@@ -1808,8 +2306,8 @@ var useDropdownStore = (externalStore) => {
|
|
|
1808
2306
|
return externalStore;
|
|
1809
2307
|
};
|
|
1810
2308
|
var injectStore = (children, store) => {
|
|
1811
|
-
return
|
|
1812
|
-
if ((0,
|
|
2309
|
+
return import_react10.Children.map(children, (child) => {
|
|
2310
|
+
if ((0, import_react10.isValidElement)(child)) {
|
|
1813
2311
|
const typedChild = child;
|
|
1814
2312
|
const newProps = {
|
|
1815
2313
|
store
|
|
@@ -1817,13 +2315,13 @@ var injectStore = (children, store) => {
|
|
|
1817
2315
|
if (typedChild.props.children) {
|
|
1818
2316
|
newProps.children = injectStore(typedChild.props.children, store);
|
|
1819
2317
|
}
|
|
1820
|
-
return (0,
|
|
2318
|
+
return (0, import_react10.cloneElement)(typedChild, newProps);
|
|
1821
2319
|
}
|
|
1822
2320
|
return child;
|
|
1823
2321
|
});
|
|
1824
2322
|
};
|
|
1825
2323
|
var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
1826
|
-
const storeRef = (0,
|
|
2324
|
+
const storeRef = (0, import_react10.useRef)(null);
|
|
1827
2325
|
storeRef.current ??= createDropdownStore();
|
|
1828
2326
|
const store = storeRef.current;
|
|
1829
2327
|
const isControlled = open !== void 0;
|
|
@@ -1833,7 +2331,7 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
|
1833
2331
|
onOpenChange?.(newOpen);
|
|
1834
2332
|
if (!isControlled) store.setState({ open: newOpen });
|
|
1835
2333
|
};
|
|
1836
|
-
const menuRef = (0,
|
|
2334
|
+
const menuRef = (0, import_react10.useRef)(null);
|
|
1837
2335
|
const handleArrowDownOrArrowUp = (event) => {
|
|
1838
2336
|
const menuContent = menuRef.current?.querySelector('[role="menu"]');
|
|
1839
2337
|
if (menuContent) {
|
|
@@ -1867,7 +2365,7 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
|
1867
2365
|
setOpen(false);
|
|
1868
2366
|
}
|
|
1869
2367
|
};
|
|
1870
|
-
(0,
|
|
2368
|
+
(0, import_react10.useEffect)(() => {
|
|
1871
2369
|
onOpenChange?.(currentOpen);
|
|
1872
2370
|
if (currentOpen) {
|
|
1873
2371
|
document.addEventListener("mousedown", handleClickOutside);
|
|
@@ -1878,12 +2376,12 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
|
1878
2376
|
document.removeEventListener("keydown", handleDownkey);
|
|
1879
2377
|
};
|
|
1880
2378
|
}, [currentOpen]);
|
|
1881
|
-
(0,
|
|
2379
|
+
(0, import_react10.useEffect)(() => {
|
|
1882
2380
|
if (isControlled) {
|
|
1883
2381
|
store.setState({ open });
|
|
1884
2382
|
}
|
|
1885
2383
|
}, []);
|
|
1886
|
-
return /* @__PURE__ */ (0,
|
|
2384
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
|
|
1887
2385
|
};
|
|
1888
2386
|
var DropdownMenuTrigger = ({
|
|
1889
2387
|
className,
|
|
@@ -1895,7 +2393,7 @@ var DropdownMenuTrigger = ({
|
|
|
1895
2393
|
const store = useDropdownStore(externalStore);
|
|
1896
2394
|
const open = (0, import_zustand2.useStore)(store, (s) => s.open);
|
|
1897
2395
|
const toggleOpen = () => store.setState({ open: !open });
|
|
1898
|
-
return /* @__PURE__ */ (0,
|
|
2396
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1899
2397
|
Button_default,
|
|
1900
2398
|
{
|
|
1901
2399
|
variant: "outline",
|
|
@@ -1931,8 +2429,8 @@ var MENUCONTENT_VARIANT_CLASSES = {
|
|
|
1931
2429
|
menu: "p-1",
|
|
1932
2430
|
profile: "p-6"
|
|
1933
2431
|
};
|
|
1934
|
-
var MenuLabel = (0,
|
|
1935
|
-
return /* @__PURE__ */ (0,
|
|
2432
|
+
var MenuLabel = (0, import_react10.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
|
|
2433
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1936
2434
|
"div",
|
|
1937
2435
|
{
|
|
1938
2436
|
ref,
|
|
@@ -1942,7 +2440,7 @@ var MenuLabel = (0, import_react9.forwardRef)(({ className, inset, store: _store
|
|
|
1942
2440
|
);
|
|
1943
2441
|
});
|
|
1944
2442
|
MenuLabel.displayName = "MenuLabel";
|
|
1945
|
-
var MenuContent = (0,
|
|
2443
|
+
var MenuContent = (0, import_react10.forwardRef)(
|
|
1946
2444
|
({
|
|
1947
2445
|
className,
|
|
1948
2446
|
align = "start",
|
|
@@ -1955,8 +2453,8 @@ var MenuContent = (0, import_react9.forwardRef)(
|
|
|
1955
2453
|
}, ref) => {
|
|
1956
2454
|
const store = useDropdownStore(externalStore);
|
|
1957
2455
|
const open = (0, import_zustand2.useStore)(store, (s) => s.open);
|
|
1958
|
-
const [isVisible, setIsVisible] = (0,
|
|
1959
|
-
(0,
|
|
2456
|
+
const [isVisible, setIsVisible] = (0, import_react10.useState)(open);
|
|
2457
|
+
(0, import_react10.useEffect)(() => {
|
|
1960
2458
|
if (open) {
|
|
1961
2459
|
setIsVisible(true);
|
|
1962
2460
|
} else {
|
|
@@ -1971,7 +2469,7 @@ var MenuContent = (0, import_react9.forwardRef)(
|
|
|
1971
2469
|
return `absolute ${vertical} ${horizontal}`;
|
|
1972
2470
|
};
|
|
1973
2471
|
const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
|
|
1974
|
-
return /* @__PURE__ */ (0,
|
|
2472
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1975
2473
|
"div",
|
|
1976
2474
|
{
|
|
1977
2475
|
ref,
|
|
@@ -1996,7 +2494,7 @@ var MenuContent = (0, import_react9.forwardRef)(
|
|
|
1996
2494
|
}
|
|
1997
2495
|
);
|
|
1998
2496
|
MenuContent.displayName = "MenuContent";
|
|
1999
|
-
var DropdownMenuItem = (0,
|
|
2497
|
+
var DropdownMenuItem = (0, import_react10.forwardRef)(
|
|
2000
2498
|
({
|
|
2001
2499
|
className,
|
|
2002
2500
|
size = "small",
|
|
@@ -2030,7 +2528,7 @@ var DropdownMenuItem = (0, import_react9.forwardRef)(
|
|
|
2030
2528
|
const getVariantProps = () => {
|
|
2031
2529
|
return variant === "profile" ? { "data-variant": "profile" } : {};
|
|
2032
2530
|
};
|
|
2033
|
-
return /* @__PURE__ */ (0,
|
|
2531
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
2034
2532
|
"div",
|
|
2035
2533
|
{
|
|
2036
2534
|
ref,
|
|
@@ -2052,7 +2550,7 @@ var DropdownMenuItem = (0, import_react9.forwardRef)(
|
|
|
2052
2550
|
...props,
|
|
2053
2551
|
children: [
|
|
2054
2552
|
iconLeft,
|
|
2055
|
-
/* @__PURE__ */ (0,
|
|
2553
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "w-full text-md", children }),
|
|
2056
2554
|
iconRight
|
|
2057
2555
|
]
|
|
2058
2556
|
}
|
|
@@ -2060,7 +2558,7 @@ var DropdownMenuItem = (0, import_react9.forwardRef)(
|
|
|
2060
2558
|
}
|
|
2061
2559
|
);
|
|
2062
2560
|
DropdownMenuItem.displayName = "DropdownMenuItem";
|
|
2063
|
-
var DropdownMenuSeparator = (0,
|
|
2561
|
+
var DropdownMenuSeparator = (0, import_react10.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2064
2562
|
"div",
|
|
2065
2563
|
{
|
|
2066
2564
|
ref,
|
|
@@ -2069,11 +2567,11 @@ var DropdownMenuSeparator = (0, import_react9.forwardRef)(({ className, store: _
|
|
|
2069
2567
|
}
|
|
2070
2568
|
));
|
|
2071
2569
|
DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
|
|
2072
|
-
var ProfileMenuTrigger = (0,
|
|
2570
|
+
var ProfileMenuTrigger = (0, import_react10.forwardRef)(({ className, onClick, store: externalStore, ...props }, ref) => {
|
|
2073
2571
|
const store = useDropdownStore(externalStore);
|
|
2074
2572
|
const open = (0, import_zustand2.useStore)(store, (s) => s.open);
|
|
2075
2573
|
const toggleOpen = () => store.setState({ open: !open });
|
|
2076
|
-
return /* @__PURE__ */ (0,
|
|
2574
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2077
2575
|
"button",
|
|
2078
2576
|
{
|
|
2079
2577
|
ref,
|
|
@@ -2085,13 +2583,13 @@ var ProfileMenuTrigger = (0, import_react9.forwardRef)(({ className, onClick, st
|
|
|
2085
2583
|
},
|
|
2086
2584
|
"aria-expanded": open,
|
|
2087
2585
|
...props,
|
|
2088
|
-
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 }) })
|
|
2089
2587
|
}
|
|
2090
2588
|
);
|
|
2091
2589
|
});
|
|
2092
2590
|
ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
|
|
2093
|
-
var ProfileMenuHeader = (0,
|
|
2094
|
-
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)(
|
|
2095
2593
|
"div",
|
|
2096
2594
|
{
|
|
2097
2595
|
ref,
|
|
@@ -2102,18 +2600,18 @@ var ProfileMenuHeader = (0, import_react9.forwardRef)(({ className, name, email,
|
|
|
2102
2600
|
`,
|
|
2103
2601
|
...props,
|
|
2104
2602
|
children: [
|
|
2105
|
-
/* @__PURE__ */ (0,
|
|
2106
|
-
/* @__PURE__ */ (0,
|
|
2107
|
-
/* @__PURE__ */ (0,
|
|
2108
|
-
/* @__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 })
|
|
2109
2607
|
] })
|
|
2110
2608
|
]
|
|
2111
2609
|
}
|
|
2112
2610
|
);
|
|
2113
2611
|
});
|
|
2114
2612
|
ProfileMenuHeader.displayName = "ProfileMenuHeader";
|
|
2115
|
-
var ProfileMenuSection = (0,
|
|
2116
|
-
return /* @__PURE__ */ (0,
|
|
2613
|
+
var ProfileMenuSection = (0, import_react10.forwardRef)(({ className, children, store: _store, ...props }, ref) => {
|
|
2614
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2117
2615
|
"div",
|
|
2118
2616
|
{
|
|
2119
2617
|
ref,
|
|
@@ -2136,7 +2634,7 @@ var ProfileMenuFooter = ({
|
|
|
2136
2634
|
}) => {
|
|
2137
2635
|
const store = useDropdownStore(externalStore);
|
|
2138
2636
|
const setOpen = (0, import_zustand2.useStore)(store, (s) => s.setOpen);
|
|
2139
|
-
return /* @__PURE__ */ (0,
|
|
2637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
2140
2638
|
Button_default,
|
|
2141
2639
|
{
|
|
2142
2640
|
variant: "outline",
|
|
@@ -2148,8 +2646,8 @@ var ProfileMenuFooter = ({
|
|
|
2148
2646
|
},
|
|
2149
2647
|
...props,
|
|
2150
2648
|
children: [
|
|
2151
|
-
/* @__PURE__ */ (0,
|
|
2152
|
-
/* @__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" })
|
|
2153
2651
|
]
|
|
2154
2652
|
}
|
|
2155
2653
|
);
|
|
@@ -2159,9 +2657,9 @@ var DropdownMenu_default = DropdownMenu;
|
|
|
2159
2657
|
|
|
2160
2658
|
// src/components/Select/Select.tsx
|
|
2161
2659
|
var import_zustand3 = require("zustand");
|
|
2162
|
-
var
|
|
2660
|
+
var import_react11 = require("react");
|
|
2163
2661
|
var import_phosphor_react8 = require("phosphor-react");
|
|
2164
|
-
var
|
|
2662
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2165
2663
|
var VARIANT_CLASSES4 = {
|
|
2166
2664
|
outlined: "border-2 rounded-sm focus:border-primary-950",
|
|
2167
2665
|
underlined: "border-b-2 focus:border-primary-950",
|
|
@@ -2205,13 +2703,13 @@ function getLabelAsNode(children) {
|
|
|
2205
2703
|
if (typeof children === "string" || typeof children === "number") {
|
|
2206
2704
|
return children;
|
|
2207
2705
|
}
|
|
2208
|
-
const flattened =
|
|
2706
|
+
const flattened = import_react11.Children.toArray(children);
|
|
2209
2707
|
if (flattened.length === 1) return flattened[0];
|
|
2210
|
-
return /* @__PURE__ */ (0,
|
|
2708
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: flattened });
|
|
2211
2709
|
}
|
|
2212
2710
|
var injectStore2 = (children, store) => {
|
|
2213
|
-
return
|
|
2214
|
-
if ((0,
|
|
2711
|
+
return import_react11.Children.map(children, (child) => {
|
|
2712
|
+
if ((0, import_react11.isValidElement)(child)) {
|
|
2215
2713
|
const typedChild = child;
|
|
2216
2714
|
const newProps = {
|
|
2217
2715
|
store
|
|
@@ -2219,7 +2717,7 @@ var injectStore2 = (children, store) => {
|
|
|
2219
2717
|
if (typedChild.props.children) {
|
|
2220
2718
|
newProps.children = injectStore2(typedChild.props.children, store);
|
|
2221
2719
|
}
|
|
2222
|
-
return (0,
|
|
2720
|
+
return (0, import_react11.cloneElement)(typedChild, newProps);
|
|
2223
2721
|
}
|
|
2224
2722
|
return child;
|
|
2225
2723
|
});
|
|
@@ -2231,10 +2729,10 @@ var Select = ({
|
|
|
2231
2729
|
onValueChange,
|
|
2232
2730
|
size = "small"
|
|
2233
2731
|
}) => {
|
|
2234
|
-
const storeRef = (0,
|
|
2732
|
+
const storeRef = (0, import_react11.useRef)(null);
|
|
2235
2733
|
storeRef.current ??= createSelectStore();
|
|
2236
2734
|
const store = storeRef.current;
|
|
2237
|
-
const selectRef = (0,
|
|
2735
|
+
const selectRef = (0, import_react11.useRef)(null);
|
|
2238
2736
|
const { open, setOpen, setValue, value, selectedLabel } = (0, import_zustand3.useStore)(
|
|
2239
2737
|
store,
|
|
2240
2738
|
(s) => s
|
|
@@ -2244,8 +2742,8 @@ var Select = ({
|
|
|
2244
2742
|
const findLabelForValue = (children2, targetValue) => {
|
|
2245
2743
|
let found = null;
|
|
2246
2744
|
const search = (nodes) => {
|
|
2247
|
-
|
|
2248
|
-
if (!(0,
|
|
2745
|
+
import_react11.Children.forEach(nodes, (child) => {
|
|
2746
|
+
if (!(0, import_react11.isValidElement)(child)) return;
|
|
2249
2747
|
const typedChild = child;
|
|
2250
2748
|
if (typedChild.type === SelectItem && typedChild.props.value === targetValue) {
|
|
2251
2749
|
if (typeof typedChild.props.children === "string")
|
|
@@ -2258,13 +2756,13 @@ var Select = ({
|
|
|
2258
2756
|
search(children2);
|
|
2259
2757
|
return found;
|
|
2260
2758
|
};
|
|
2261
|
-
(0,
|
|
2759
|
+
(0, import_react11.useEffect)(() => {
|
|
2262
2760
|
if (!selectedLabel && defaultValue) {
|
|
2263
2761
|
const label = findLabelForValue(children, defaultValue);
|
|
2264
2762
|
if (label) store.setState({ selectedLabel: label });
|
|
2265
2763
|
}
|
|
2266
2764
|
}, [children, defaultValue, selectedLabel]);
|
|
2267
|
-
(0,
|
|
2765
|
+
(0, import_react11.useEffect)(() => {
|
|
2268
2766
|
setValue(currentValue);
|
|
2269
2767
|
const handleClickOutside = (event) => {
|
|
2270
2768
|
if (selectRef.current && !selectRef.current.contains(event.target)) {
|
|
@@ -2300,13 +2798,13 @@ var Select = ({
|
|
|
2300
2798
|
document.removeEventListener("keydown", handleArrowKeys);
|
|
2301
2799
|
};
|
|
2302
2800
|
}, [open]);
|
|
2303
|
-
(0,
|
|
2801
|
+
(0, import_react11.useEffect)(() => {
|
|
2304
2802
|
if (onValueChange) {
|
|
2305
2803
|
onValueChange(value);
|
|
2306
2804
|
}
|
|
2307
2805
|
}, [value]);
|
|
2308
2806
|
const sizeClasses = SIZE_CLASSES9[size];
|
|
2309
|
-
return /* @__PURE__ */ (0,
|
|
2807
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore2(children, store) });
|
|
2310
2808
|
};
|
|
2311
2809
|
var SelectValue = ({
|
|
2312
2810
|
placeholder,
|
|
@@ -2315,9 +2813,9 @@ var SelectValue = ({
|
|
|
2315
2813
|
const store = useSelectStore(externalStore);
|
|
2316
2814
|
const selectedLabel = (0, import_zustand3.useStore)(store, (s) => s.selectedLabel);
|
|
2317
2815
|
const value = (0, import_zustand3.useStore)(store, (s) => s.value);
|
|
2318
|
-
return /* @__PURE__ */ (0,
|
|
2816
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
|
|
2319
2817
|
};
|
|
2320
|
-
var SelectTrigger = (0,
|
|
2818
|
+
var SelectTrigger = (0, import_react11.forwardRef)(
|
|
2321
2819
|
({
|
|
2322
2820
|
className,
|
|
2323
2821
|
invalid = false,
|
|
@@ -2330,7 +2828,7 @@ var SelectTrigger = (0, import_react10.forwardRef)(
|
|
|
2330
2828
|
const open = (0, import_zustand3.useStore)(store, (s) => s.open);
|
|
2331
2829
|
const toggleOpen = () => store.setState({ open: !open });
|
|
2332
2830
|
const variantClasses = VARIANT_CLASSES4[variant];
|
|
2333
|
-
return /* @__PURE__ */ (0,
|
|
2831
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
2334
2832
|
"button",
|
|
2335
2833
|
{
|
|
2336
2834
|
ref,
|
|
@@ -2349,7 +2847,7 @@ var SelectTrigger = (0, import_react10.forwardRef)(
|
|
|
2349
2847
|
...props,
|
|
2350
2848
|
children: [
|
|
2351
2849
|
props.children,
|
|
2352
|
-
/* @__PURE__ */ (0,
|
|
2850
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2353
2851
|
import_phosphor_react8.CaretDown,
|
|
2354
2852
|
{
|
|
2355
2853
|
className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
|
|
@@ -2361,7 +2859,7 @@ var SelectTrigger = (0, import_react10.forwardRef)(
|
|
|
2361
2859
|
}
|
|
2362
2860
|
);
|
|
2363
2861
|
SelectTrigger.displayName = "SelectTrigger";
|
|
2364
|
-
var SelectContent = (0,
|
|
2862
|
+
var SelectContent = (0, import_react11.forwardRef)(
|
|
2365
2863
|
({
|
|
2366
2864
|
children,
|
|
2367
2865
|
className,
|
|
@@ -2374,7 +2872,7 @@ var SelectContent = (0, import_react10.forwardRef)(
|
|
|
2374
2872
|
const open = (0, import_zustand3.useStore)(store, (s) => s.open);
|
|
2375
2873
|
if (!open) return null;
|
|
2376
2874
|
const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
|
|
2377
|
-
return /* @__PURE__ */ (0,
|
|
2875
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2378
2876
|
"div",
|
|
2379
2877
|
{
|
|
2380
2878
|
role: "menu",
|
|
@@ -2387,7 +2885,7 @@ var SelectContent = (0, import_react10.forwardRef)(
|
|
|
2387
2885
|
}
|
|
2388
2886
|
);
|
|
2389
2887
|
SelectContent.displayName = "SelectContent";
|
|
2390
|
-
var SelectItem = (0,
|
|
2888
|
+
var SelectItem = (0, import_react11.forwardRef)(
|
|
2391
2889
|
({
|
|
2392
2890
|
className,
|
|
2393
2891
|
children,
|
|
@@ -2408,7 +2906,7 @@ var SelectItem = (0, import_react10.forwardRef)(
|
|
|
2408
2906
|
}
|
|
2409
2907
|
props.onClick?.(e);
|
|
2410
2908
|
};
|
|
2411
|
-
return /* @__PURE__ */ (0,
|
|
2909
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
2412
2910
|
"div",
|
|
2413
2911
|
{
|
|
2414
2912
|
role: "menuitem",
|
|
@@ -2428,7 +2926,7 @@ var SelectItem = (0, import_react10.forwardRef)(
|
|
|
2428
2926
|
tabIndex: disabled ? -1 : 0,
|
|
2429
2927
|
...props,
|
|
2430
2928
|
children: [
|
|
2431
|
-
/* @__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: "" }) }),
|
|
2432
2930
|
children
|
|
2433
2931
|
]
|
|
2434
2932
|
}
|
|
@@ -2440,9 +2938,9 @@ var Select_default = Select;
|
|
|
2440
2938
|
|
|
2441
2939
|
// src/components/Menu/Menu.tsx
|
|
2442
2940
|
var import_zustand4 = require("zustand");
|
|
2443
|
-
var
|
|
2941
|
+
var import_react12 = require("react");
|
|
2444
2942
|
var import_phosphor_react9 = require("phosphor-react");
|
|
2445
|
-
var
|
|
2943
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2446
2944
|
var createMenuStore = () => (0, import_zustand4.create)((set) => ({
|
|
2447
2945
|
value: "",
|
|
2448
2946
|
setValue: (value) => set({ value })
|
|
@@ -2456,7 +2954,7 @@ var VARIANT_CLASSES5 = {
|
|
|
2456
2954
|
menu2: "overflow-x-auto scroll-smooth",
|
|
2457
2955
|
breadcrumb: ""
|
|
2458
2956
|
};
|
|
2459
|
-
var Menu = (0,
|
|
2957
|
+
var Menu = (0, import_react12.forwardRef)(
|
|
2460
2958
|
({
|
|
2461
2959
|
className,
|
|
2462
2960
|
children,
|
|
@@ -2466,19 +2964,19 @@ var Menu = (0, import_react11.forwardRef)(
|
|
|
2466
2964
|
onValueChange,
|
|
2467
2965
|
...props
|
|
2468
2966
|
}, ref) => {
|
|
2469
|
-
const storeRef = (0,
|
|
2967
|
+
const storeRef = (0, import_react12.useRef)(null);
|
|
2470
2968
|
storeRef.current ??= createMenuStore();
|
|
2471
2969
|
const store = storeRef.current;
|
|
2472
2970
|
const { setValue, value } = (0, import_zustand4.useStore)(store, (s) => s);
|
|
2473
|
-
(0,
|
|
2971
|
+
(0, import_react12.useEffect)(() => {
|
|
2474
2972
|
setValue(propValue ?? defaultValue);
|
|
2475
2973
|
}, [defaultValue, propValue, setValue]);
|
|
2476
|
-
(0,
|
|
2974
|
+
(0, import_react12.useEffect)(() => {
|
|
2477
2975
|
onValueChange?.(value);
|
|
2478
2976
|
}, [value, onValueChange]);
|
|
2479
2977
|
const baseClasses = "w-full flex flex-row items-center gap-2 py-2 px-6";
|
|
2480
2978
|
const variantClasses = VARIANT_CLASSES5[variant];
|
|
2481
|
-
return /* @__PURE__ */ (0,
|
|
2979
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2482
2980
|
"ul",
|
|
2483
2981
|
{
|
|
2484
2982
|
ref,
|
|
@@ -2495,7 +2993,7 @@ var Menu = (0, import_react11.forwardRef)(
|
|
|
2495
2993
|
}
|
|
2496
2994
|
);
|
|
2497
2995
|
Menu.displayName = "Menu";
|
|
2498
|
-
var MenuItem = (0,
|
|
2996
|
+
var MenuItem = (0, import_react12.forwardRef)(
|
|
2499
2997
|
({
|
|
2500
2998
|
className,
|
|
2501
2999
|
children,
|
|
@@ -2523,7 +3021,7 @@ var MenuItem = (0, import_react11.forwardRef)(
|
|
|
2523
3021
|
...props
|
|
2524
3022
|
};
|
|
2525
3023
|
const variants = {
|
|
2526
|
-
menu: /* @__PURE__ */ (0,
|
|
3024
|
+
menu: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2527
3025
|
"li",
|
|
2528
3026
|
{
|
|
2529
3027
|
"data-variant": "menu",
|
|
@@ -2538,7 +3036,7 @@ var MenuItem = (0, import_react11.forwardRef)(
|
|
|
2538
3036
|
children
|
|
2539
3037
|
}
|
|
2540
3038
|
),
|
|
2541
|
-
menu2: /* @__PURE__ */ (0,
|
|
3039
|
+
menu2: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2542
3040
|
"li",
|
|
2543
3041
|
{
|
|
2544
3042
|
"data-variant": "menu2",
|
|
@@ -2550,7 +3048,7 @@ var MenuItem = (0, import_react11.forwardRef)(
|
|
|
2550
3048
|
children
|
|
2551
3049
|
}
|
|
2552
3050
|
),
|
|
2553
|
-
breadcrumb: /* @__PURE__ */ (0,
|
|
3051
|
+
breadcrumb: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2554
3052
|
"li",
|
|
2555
3053
|
{
|
|
2556
3054
|
"data-variant": "breadcrumb",
|
|
@@ -2561,7 +3059,7 @@ var MenuItem = (0, import_react11.forwardRef)(
|
|
|
2561
3059
|
${className ?? ""}
|
|
2562
3060
|
`,
|
|
2563
3061
|
...commonProps,
|
|
2564
|
-
children: /* @__PURE__ */ (0,
|
|
3062
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2565
3063
|
"span",
|
|
2566
3064
|
{
|
|
2567
3065
|
className: `
|
|
@@ -2578,24 +3076,24 @@ var MenuItem = (0, import_react11.forwardRef)(
|
|
|
2578
3076
|
}
|
|
2579
3077
|
);
|
|
2580
3078
|
MenuItem.displayName = "MenuItem";
|
|
2581
|
-
var MenuSeparator = (0,
|
|
2582
|
-
({ className, children, ...props }, ref) => /* @__PURE__ */ (0,
|
|
3079
|
+
var MenuSeparator = (0, import_react12.forwardRef)(
|
|
3080
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2583
3081
|
"li",
|
|
2584
3082
|
{
|
|
2585
3083
|
ref,
|
|
2586
3084
|
"aria-hidden": "true",
|
|
2587
3085
|
className: `[&>svg]:w-4 [&>svg]:h-4 text-text-600 ${className ?? ""}`,
|
|
2588
3086
|
...props,
|
|
2589
|
-
children: children ?? /* @__PURE__ */ (0,
|
|
3087
|
+
children: children ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_phosphor_react9.CaretRight, {})
|
|
2590
3088
|
}
|
|
2591
3089
|
)
|
|
2592
3090
|
);
|
|
2593
3091
|
MenuSeparator.displayName = "MenuSeparator";
|
|
2594
|
-
var injectStore3 = (children, store) =>
|
|
2595
|
-
if (!(0,
|
|
3092
|
+
var injectStore3 = (children, store) => import_react12.Children.map(children, (child) => {
|
|
3093
|
+
if (!(0, import_react12.isValidElement)(child)) return child;
|
|
2596
3094
|
const typedChild = child;
|
|
2597
3095
|
const shouldInject = typedChild.type === MenuItem;
|
|
2598
|
-
return (0,
|
|
3096
|
+
return (0, import_react12.cloneElement)(typedChild, {
|
|
2599
3097
|
...shouldInject ? { store } : {},
|
|
2600
3098
|
...typedChild.props.children ? { children: injectStore3(typedChild.props.children, store) } : {}
|
|
2601
3099
|
});
|
|
@@ -2606,6 +3104,7 @@ var Menu_default = Menu;
|
|
|
2606
3104
|
Alert,
|
|
2607
3105
|
Badge,
|
|
2608
3106
|
Button,
|
|
3107
|
+
Calendar,
|
|
2609
3108
|
CheckBox,
|
|
2610
3109
|
Chips,
|
|
2611
3110
|
Divider,
|