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.mjs
CHANGED
|
@@ -1585,11 +1585,13 @@ var SIZE_CLASSES8 = {
|
|
|
1585
1585
|
textWeight: "medium",
|
|
1586
1586
|
// font-weight: 500
|
|
1587
1587
|
labelSize: "2xs",
|
|
1588
|
-
//
|
|
1588
|
+
// Will be overridden with custom 8px in className
|
|
1589
1589
|
labelWeight: "bold",
|
|
1590
1590
|
// font-weight: 700
|
|
1591
|
-
spacing: "gap-
|
|
1592
|
-
//
|
|
1591
|
+
spacing: "gap-0",
|
|
1592
|
+
// Reduced gap between percentage and label for better spacing
|
|
1593
|
+
contentWidth: "max-w-[50px]"
|
|
1594
|
+
// Reduced width to fit text inside circle
|
|
1593
1595
|
},
|
|
1594
1596
|
medium: {
|
|
1595
1597
|
container: "w-[152px] h-[152px]",
|
|
@@ -1604,8 +1606,10 @@ var SIZE_CLASSES8 = {
|
|
|
1604
1606
|
// 12px for status label (font-size: 12px)
|
|
1605
1607
|
labelWeight: "medium",
|
|
1606
1608
|
// font-weight: 500 (changed from bold)
|
|
1607
|
-
spacing: "gap-1"
|
|
1609
|
+
spacing: "gap-1",
|
|
1608
1610
|
// 4px gap between percentage and label
|
|
1611
|
+
contentWidth: "max-w-[90px]"
|
|
1612
|
+
// Reduced width to fit text inside circle
|
|
1609
1613
|
}
|
|
1610
1614
|
};
|
|
1611
1615
|
var VARIANT_CLASSES3 = {
|
|
@@ -1705,14 +1709,14 @@ var ProgressCircle = ({
|
|
|
1705
1709
|
/* @__PURE__ */ jsxs14(
|
|
1706
1710
|
"div",
|
|
1707
1711
|
{
|
|
1708
|
-
className: `relative z-10 flex flex-col items-center justify-center ${sizeClasses.spacing}`,
|
|
1712
|
+
className: `relative z-10 flex flex-col items-center justify-center ${sizeClasses.spacing} ${sizeClasses.contentWidth}`,
|
|
1709
1713
|
children: [
|
|
1710
1714
|
showPercentage && /* @__PURE__ */ jsxs14(
|
|
1711
1715
|
Text_default,
|
|
1712
1716
|
{
|
|
1713
1717
|
size: sizeClasses.textSize,
|
|
1714
1718
|
weight: sizeClasses.textWeight,
|
|
1715
|
-
className: `text-center ${variantClasses.textColor} ${percentageClassName}`,
|
|
1719
|
+
className: `text-center w-full ${variantClasses.textColor} ${percentageClassName}`,
|
|
1716
1720
|
children: [
|
|
1717
1721
|
Math.round(percentage),
|
|
1718
1722
|
"%"
|
|
@@ -1725,7 +1729,7 @@ var ProgressCircle = ({
|
|
|
1725
1729
|
as: "span",
|
|
1726
1730
|
size: sizeClasses.labelSize,
|
|
1727
1731
|
weight: sizeClasses.labelWeight,
|
|
1728
|
-
className: `${variantClasses.labelColor} text-center uppercase tracking-wide ${labelClassName}`,
|
|
1732
|
+
className: `${variantClasses.labelColor} text-center uppercase tracking-wide truncate w-full ${size === "small" ? "text-[8px] leading-[9px]" : ""} ${labelClassName}`,
|
|
1729
1733
|
children: label
|
|
1730
1734
|
}
|
|
1731
1735
|
)
|
|
@@ -1738,19 +1742,516 @@ var ProgressCircle = ({
|
|
|
1738
1742
|
};
|
|
1739
1743
|
var ProgressCircle_default = ProgressCircle;
|
|
1740
1744
|
|
|
1745
|
+
// src/components/Calendar/Calendar.tsx
|
|
1746
|
+
import { useState as useState5, useMemo as useMemo2, useEffect, useRef } from "react";
|
|
1747
|
+
import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1748
|
+
var WEEK_DAYS = ["SEG", "TER", "QUA", "QUI", "SEX", "S\xC1B", "DOM"];
|
|
1749
|
+
var WEEK_DAYS_SHORT = ["S", "T", "Q", "Q", "S", "S", "D"];
|
|
1750
|
+
var MONTH_NAMES = [
|
|
1751
|
+
"Janeiro",
|
|
1752
|
+
"Fevereiro",
|
|
1753
|
+
"Mar\xE7o",
|
|
1754
|
+
"Abril",
|
|
1755
|
+
"Maio",
|
|
1756
|
+
"Junho",
|
|
1757
|
+
"Julho",
|
|
1758
|
+
"Agosto",
|
|
1759
|
+
"Setembro",
|
|
1760
|
+
"Outubro",
|
|
1761
|
+
"Novembro",
|
|
1762
|
+
"Dezembro"
|
|
1763
|
+
];
|
|
1764
|
+
var MonthYearPicker = ({
|
|
1765
|
+
monthPickerRef,
|
|
1766
|
+
availableYears,
|
|
1767
|
+
currentDate,
|
|
1768
|
+
onYearChange,
|
|
1769
|
+
onMonthChange
|
|
1770
|
+
}) => /* @__PURE__ */ jsxs15(
|
|
1771
|
+
"div",
|
|
1772
|
+
{
|
|
1773
|
+
ref: monthPickerRef,
|
|
1774
|
+
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]",
|
|
1775
|
+
children: [
|
|
1776
|
+
/* @__PURE__ */ jsxs15("div", { className: "mb-4", children: [
|
|
1777
|
+
/* @__PURE__ */ jsx20("h3", { className: "text-sm font-medium text-text-700 mb-2", children: "Selecionar Ano" }),
|
|
1778
|
+
/* @__PURE__ */ jsx20("div", { className: "grid grid-cols-4 gap-1 max-h-32 overflow-y-auto", children: availableYears.map((year) => /* @__PURE__ */ jsx20(
|
|
1779
|
+
"button",
|
|
1780
|
+
{
|
|
1781
|
+
onClick: () => onYearChange(year),
|
|
1782
|
+
className: `
|
|
1783
|
+
px-2 py-1 text-xs rounded text-center hover:bg-background-100 transition-colors
|
|
1784
|
+
${year === currentDate.getFullYear() ? "bg-primary-800 text-text font-medium hover:text-text-950" : "text-text-700"}
|
|
1785
|
+
`,
|
|
1786
|
+
children: year
|
|
1787
|
+
},
|
|
1788
|
+
year
|
|
1789
|
+
)) })
|
|
1790
|
+
] }),
|
|
1791
|
+
/* @__PURE__ */ jsxs15("div", { children: [
|
|
1792
|
+
/* @__PURE__ */ jsx20("h3", { className: "text-sm font-medium text-text-700 mb-2", children: "Selecionar M\xEAs" }),
|
|
1793
|
+
/* @__PURE__ */ jsx20("div", { className: "grid grid-cols-3 gap-1", children: MONTH_NAMES.map((month, index) => /* @__PURE__ */ jsx20(
|
|
1794
|
+
"button",
|
|
1795
|
+
{
|
|
1796
|
+
onClick: () => onMonthChange(index, currentDate.getFullYear()),
|
|
1797
|
+
className: `
|
|
1798
|
+
px-2 py-2 text-xs rounded text-center hover:bg-background-100 transition-colors
|
|
1799
|
+
${index === currentDate.getMonth() ? "bg-primary-800 text-text font-medium hover:text-text-950" : "text-text-700"}
|
|
1800
|
+
`,
|
|
1801
|
+
children: month.substring(0, 3)
|
|
1802
|
+
},
|
|
1803
|
+
month
|
|
1804
|
+
)) })
|
|
1805
|
+
] })
|
|
1806
|
+
]
|
|
1807
|
+
}
|
|
1808
|
+
);
|
|
1809
|
+
var getDayStyles = (day, variant, showActivities) => {
|
|
1810
|
+
let dayStyle = "";
|
|
1811
|
+
let textStyle = "";
|
|
1812
|
+
if (variant === "selection" && day.isSelected) {
|
|
1813
|
+
dayStyle = "bg-primary-800";
|
|
1814
|
+
textStyle = "text-white";
|
|
1815
|
+
} else if (day.isToday) {
|
|
1816
|
+
textStyle = "text-[#1c61b2]";
|
|
1817
|
+
} else if (variant === "navigation" && showActivities && day.activities?.length) {
|
|
1818
|
+
const primaryActivity = day.activities[0];
|
|
1819
|
+
if (primaryActivity.status === "near-deadline") {
|
|
1820
|
+
dayStyle = "bg-warning-background border-2 border-warning-400";
|
|
1821
|
+
textStyle = "text-text-950";
|
|
1822
|
+
} else if (primaryActivity.status === "in-deadline") {
|
|
1823
|
+
dayStyle = "bg-success-background border-2 border-success-300";
|
|
1824
|
+
textStyle = "text-text-950";
|
|
1825
|
+
} else if (primaryActivity.status === "overdue") {
|
|
1826
|
+
dayStyle = "bg-error-background border-2 border-error-300";
|
|
1827
|
+
textStyle = "text-text-950";
|
|
1828
|
+
} else {
|
|
1829
|
+
dayStyle = "border-2 border-blue-500";
|
|
1830
|
+
textStyle = "text-blue-500";
|
|
1831
|
+
}
|
|
1832
|
+
} else {
|
|
1833
|
+
textStyle = "text-text-950 hover:bg-background-100";
|
|
1834
|
+
}
|
|
1835
|
+
return { dayStyle, textStyle };
|
|
1836
|
+
};
|
|
1837
|
+
var Calendar = ({
|
|
1838
|
+
variant = "selection",
|
|
1839
|
+
selectedDate,
|
|
1840
|
+
onDateSelect,
|
|
1841
|
+
onMonthChange,
|
|
1842
|
+
activities = {},
|
|
1843
|
+
showActivities = true,
|
|
1844
|
+
className = ""
|
|
1845
|
+
}) => {
|
|
1846
|
+
const [currentDate, setCurrentDate] = useState5(selectedDate || /* @__PURE__ */ new Date());
|
|
1847
|
+
const [isMonthPickerOpen, setIsMonthPickerOpen] = useState5(false);
|
|
1848
|
+
const monthPickerRef = useRef(null);
|
|
1849
|
+
const monthPickerContainerRef = useRef(null);
|
|
1850
|
+
useEffect(() => {
|
|
1851
|
+
const handleClickOutside = (event) => {
|
|
1852
|
+
if (monthPickerContainerRef.current && !monthPickerContainerRef.current.contains(event.target)) {
|
|
1853
|
+
setIsMonthPickerOpen(false);
|
|
1854
|
+
}
|
|
1855
|
+
};
|
|
1856
|
+
if (isMonthPickerOpen) {
|
|
1857
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
1858
|
+
}
|
|
1859
|
+
return () => {
|
|
1860
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
1861
|
+
};
|
|
1862
|
+
}, [isMonthPickerOpen]);
|
|
1863
|
+
const today = /* @__PURE__ */ new Date();
|
|
1864
|
+
const availableYears = useMemo2(() => {
|
|
1865
|
+
const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
|
|
1866
|
+
const years = [];
|
|
1867
|
+
for (let year = currentYear - 10; year <= currentYear + 10; year++) {
|
|
1868
|
+
years.push(year);
|
|
1869
|
+
}
|
|
1870
|
+
return years;
|
|
1871
|
+
}, []);
|
|
1872
|
+
const calendarData = useMemo2(() => {
|
|
1873
|
+
const year = currentDate.getFullYear();
|
|
1874
|
+
const month = currentDate.getMonth();
|
|
1875
|
+
const firstDay = new Date(year, month, 1);
|
|
1876
|
+
const startDate = new Date(firstDay);
|
|
1877
|
+
const firstDayOfWeek = (firstDay.getDay() + 6) % 7;
|
|
1878
|
+
startDate.setDate(startDate.getDate() - firstDayOfWeek);
|
|
1879
|
+
const days = [];
|
|
1880
|
+
const currentCalendarDate = new Date(startDate);
|
|
1881
|
+
for (let i = 0; i < 42; i++) {
|
|
1882
|
+
const dateKey = currentCalendarDate.toISOString().split("T")[0];
|
|
1883
|
+
const dayActivities = activities[dateKey] || [];
|
|
1884
|
+
days.push({
|
|
1885
|
+
date: new Date(currentCalendarDate),
|
|
1886
|
+
isCurrentMonth: currentCalendarDate.getMonth() === month,
|
|
1887
|
+
isToday: currentCalendarDate.getFullYear() === today.getFullYear() && currentCalendarDate.getMonth() === today.getMonth() && currentCalendarDate.getDate() === today.getDate(),
|
|
1888
|
+
isSelected: selectedDate ? currentCalendarDate.getFullYear() === selectedDate.getFullYear() && currentCalendarDate.getMonth() === selectedDate.getMonth() && currentCalendarDate.getDate() === selectedDate.getDate() : false,
|
|
1889
|
+
activities: dayActivities
|
|
1890
|
+
});
|
|
1891
|
+
currentCalendarDate.setDate(currentCalendarDate.getDate() + 1);
|
|
1892
|
+
}
|
|
1893
|
+
return days;
|
|
1894
|
+
}, [currentDate, selectedDate, activities]);
|
|
1895
|
+
const goToPreviousMonth = () => {
|
|
1896
|
+
const newDate = new Date(currentDate);
|
|
1897
|
+
newDate.setMonth(newDate.getMonth() - 1);
|
|
1898
|
+
setCurrentDate(newDate);
|
|
1899
|
+
onMonthChange?.(newDate);
|
|
1900
|
+
};
|
|
1901
|
+
const goToNextMonth = () => {
|
|
1902
|
+
const newDate = new Date(currentDate);
|
|
1903
|
+
newDate.setMonth(newDate.getMonth() + 1);
|
|
1904
|
+
setCurrentDate(newDate);
|
|
1905
|
+
onMonthChange?.(newDate);
|
|
1906
|
+
};
|
|
1907
|
+
const goToMonth = (month, year) => {
|
|
1908
|
+
const newDate = new Date(year, month, 1);
|
|
1909
|
+
setCurrentDate(newDate);
|
|
1910
|
+
setIsMonthPickerOpen(false);
|
|
1911
|
+
onMonthChange?.(newDate);
|
|
1912
|
+
};
|
|
1913
|
+
const handleYearChange = (year) => {
|
|
1914
|
+
const newDate = new Date(year, currentDate.getMonth(), 1);
|
|
1915
|
+
setCurrentDate(newDate);
|
|
1916
|
+
};
|
|
1917
|
+
const toggleMonthPicker = (event) => {
|
|
1918
|
+
event.stopPropagation();
|
|
1919
|
+
setIsMonthPickerOpen(!isMonthPickerOpen);
|
|
1920
|
+
};
|
|
1921
|
+
const handleDateSelect = (day) => {
|
|
1922
|
+
onDateSelect?.(day.date);
|
|
1923
|
+
};
|
|
1924
|
+
if (variant === "navigation") {
|
|
1925
|
+
return /* @__PURE__ */ jsxs15("div", { className: `bg-background rounded-xl p-3 ${className}`, children: [
|
|
1926
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between mb-4 px-6", children: [
|
|
1927
|
+
/* @__PURE__ */ jsxs15("div", { className: "relative", ref: monthPickerContainerRef, children: [
|
|
1928
|
+
/* @__PURE__ */ jsxs15(
|
|
1929
|
+
"button",
|
|
1930
|
+
{
|
|
1931
|
+
onClick: toggleMonthPicker,
|
|
1932
|
+
className: "flex items-center gap-1 hover:bg-background-100 rounded px-2 py-1 transition-colors",
|
|
1933
|
+
children: [
|
|
1934
|
+
/* @__PURE__ */ jsxs15("span", { className: "text-sm font-medium text-text-600", children: [
|
|
1935
|
+
MONTH_NAMES[currentDate.getMonth()],
|
|
1936
|
+
" ",
|
|
1937
|
+
currentDate.getFullYear()
|
|
1938
|
+
] }),
|
|
1939
|
+
/* @__PURE__ */ jsx20(
|
|
1940
|
+
"svg",
|
|
1941
|
+
{
|
|
1942
|
+
className: `w-4 h-4 text-primary-950 transition-transform ${isMonthPickerOpen ? "rotate-180" : ""}`,
|
|
1943
|
+
fill: "none",
|
|
1944
|
+
stroke: "currentColor",
|
|
1945
|
+
viewBox: "0 0 24 24",
|
|
1946
|
+
children: /* @__PURE__ */ jsx20(
|
|
1947
|
+
"path",
|
|
1948
|
+
{
|
|
1949
|
+
strokeLinecap: "round",
|
|
1950
|
+
strokeLinejoin: "round",
|
|
1951
|
+
strokeWidth: 2,
|
|
1952
|
+
d: "M19 9l-7 7-7-7"
|
|
1953
|
+
}
|
|
1954
|
+
)
|
|
1955
|
+
}
|
|
1956
|
+
)
|
|
1957
|
+
]
|
|
1958
|
+
}
|
|
1959
|
+
),
|
|
1960
|
+
isMonthPickerOpen && /* @__PURE__ */ jsx20(
|
|
1961
|
+
MonthYearPicker,
|
|
1962
|
+
{
|
|
1963
|
+
monthPickerRef,
|
|
1964
|
+
availableYears,
|
|
1965
|
+
currentDate,
|
|
1966
|
+
onYearChange: handleYearChange,
|
|
1967
|
+
onMonthChange: goToMonth
|
|
1968
|
+
}
|
|
1969
|
+
)
|
|
1970
|
+
] }),
|
|
1971
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-10", children: [
|
|
1972
|
+
/* @__PURE__ */ jsx20(
|
|
1973
|
+
"button",
|
|
1974
|
+
{
|
|
1975
|
+
onClick: goToPreviousMonth,
|
|
1976
|
+
className: "p-1 rounded hover:bg-background-100 transition-colors",
|
|
1977
|
+
"aria-label": "M\xEAs anterior",
|
|
1978
|
+
children: /* @__PURE__ */ jsx20(
|
|
1979
|
+
"svg",
|
|
1980
|
+
{
|
|
1981
|
+
className: "w-6 h-6 text-primary-950",
|
|
1982
|
+
fill: "none",
|
|
1983
|
+
stroke: "currentColor",
|
|
1984
|
+
viewBox: "0 0 24 24",
|
|
1985
|
+
children: /* @__PURE__ */ jsx20(
|
|
1986
|
+
"path",
|
|
1987
|
+
{
|
|
1988
|
+
strokeLinecap: "round",
|
|
1989
|
+
strokeLinejoin: "round",
|
|
1990
|
+
strokeWidth: 2,
|
|
1991
|
+
d: "M15 19l-7-7 7-7"
|
|
1992
|
+
}
|
|
1993
|
+
)
|
|
1994
|
+
}
|
|
1995
|
+
)
|
|
1996
|
+
}
|
|
1997
|
+
),
|
|
1998
|
+
/* @__PURE__ */ jsx20(
|
|
1999
|
+
"button",
|
|
2000
|
+
{
|
|
2001
|
+
onClick: goToNextMonth,
|
|
2002
|
+
className: "p-1 rounded hover:bg-background-100 transition-colors",
|
|
2003
|
+
"aria-label": "Pr\xF3ximo m\xEAs",
|
|
2004
|
+
children: /* @__PURE__ */ jsx20(
|
|
2005
|
+
"svg",
|
|
2006
|
+
{
|
|
2007
|
+
className: "w-6 h-6 text-primary-950",
|
|
2008
|
+
fill: "none",
|
|
2009
|
+
stroke: "currentColor",
|
|
2010
|
+
viewBox: "0 0 24 24",
|
|
2011
|
+
children: /* @__PURE__ */ jsx20(
|
|
2012
|
+
"path",
|
|
2013
|
+
{
|
|
2014
|
+
strokeLinecap: "round",
|
|
2015
|
+
strokeLinejoin: "round",
|
|
2016
|
+
strokeWidth: 2,
|
|
2017
|
+
d: "M9 5l7 7-7 7"
|
|
2018
|
+
}
|
|
2019
|
+
)
|
|
2020
|
+
}
|
|
2021
|
+
)
|
|
2022
|
+
}
|
|
2023
|
+
)
|
|
2024
|
+
] })
|
|
2025
|
+
] }),
|
|
2026
|
+
/* @__PURE__ */ jsx20("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEK_DAYS_SHORT.map((day, index) => /* @__PURE__ */ jsx20(
|
|
2027
|
+
"div",
|
|
2028
|
+
{
|
|
2029
|
+
className: "h-9 flex items-center justify-center text-xs font-normal text-text-600",
|
|
2030
|
+
children: day
|
|
2031
|
+
},
|
|
2032
|
+
`${day}-${index}`
|
|
2033
|
+
)) }),
|
|
2034
|
+
/* @__PURE__ */ jsx20("div", { className: "grid grid-cols-7 gap-1", children: calendarData.map((day) => {
|
|
2035
|
+
if (!day.isCurrentMonth) {
|
|
2036
|
+
return /* @__PURE__ */ jsx20(
|
|
2037
|
+
"div",
|
|
2038
|
+
{
|
|
2039
|
+
className: "flex items-center justify-center",
|
|
2040
|
+
children: /* @__PURE__ */ jsx20("div", { className: "w-9 h-9" })
|
|
2041
|
+
},
|
|
2042
|
+
day.date.getTime()
|
|
2043
|
+
);
|
|
2044
|
+
}
|
|
2045
|
+
const { dayStyle, textStyle } = getDayStyles(
|
|
2046
|
+
day,
|
|
2047
|
+
variant,
|
|
2048
|
+
showActivities
|
|
2049
|
+
);
|
|
2050
|
+
let spanClass = "";
|
|
2051
|
+
if (day.isSelected && day.isToday) {
|
|
2052
|
+
spanClass = "h-6 w-6 rounded-full bg-[#1c61b2] text-text";
|
|
2053
|
+
} else if (day.isSelected) {
|
|
2054
|
+
spanClass = "h-6 w-6 rounded-full bg-primary-950 text-text";
|
|
2055
|
+
}
|
|
2056
|
+
return /* @__PURE__ */ jsx20(
|
|
2057
|
+
"div",
|
|
2058
|
+
{
|
|
2059
|
+
className: "flex items-center justify-center",
|
|
2060
|
+
children: /* @__PURE__ */ jsx20(
|
|
2061
|
+
"button",
|
|
2062
|
+
{
|
|
2063
|
+
className: `
|
|
2064
|
+
w-9 h-9
|
|
2065
|
+
flex items-center justify-center
|
|
2066
|
+
text-md font-normal
|
|
2067
|
+
cursor-pointer
|
|
2068
|
+
rounded-full
|
|
2069
|
+
${dayStyle}
|
|
2070
|
+
${textStyle}
|
|
2071
|
+
`,
|
|
2072
|
+
onClick: () => handleDateSelect(day),
|
|
2073
|
+
"aria-label": `${day.date.getDate()} de ${MONTH_NAMES[day.date.getMonth()]}`,
|
|
2074
|
+
"aria-current": day.isToday ? "date" : void 0,
|
|
2075
|
+
tabIndex: 0,
|
|
2076
|
+
children: /* @__PURE__ */ jsx20("span", { className: spanClass, children: day.date.getDate() })
|
|
2077
|
+
}
|
|
2078
|
+
)
|
|
2079
|
+
},
|
|
2080
|
+
day.date.getTime()
|
|
2081
|
+
);
|
|
2082
|
+
}) })
|
|
2083
|
+
] });
|
|
2084
|
+
}
|
|
2085
|
+
return /* @__PURE__ */ jsxs15("div", { className: `bg-background rounded-xl p-4 ${className}`, children: [
|
|
2086
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between mb-3.5", children: [
|
|
2087
|
+
/* @__PURE__ */ jsxs15("div", { className: "relative", ref: monthPickerContainerRef, children: [
|
|
2088
|
+
/* @__PURE__ */ jsxs15(
|
|
2089
|
+
"button",
|
|
2090
|
+
{
|
|
2091
|
+
onClick: toggleMonthPicker,
|
|
2092
|
+
className: "flex items-center gap-2 hover:bg-background-100 rounded px-2 py-1 transition-colors",
|
|
2093
|
+
children: [
|
|
2094
|
+
/* @__PURE__ */ jsxs15("h2", { className: "text-lg font-semibold text-text-950", children: [
|
|
2095
|
+
MONTH_NAMES[currentDate.getMonth()],
|
|
2096
|
+
" ",
|
|
2097
|
+
currentDate.getFullYear()
|
|
2098
|
+
] }),
|
|
2099
|
+
/* @__PURE__ */ jsx20(
|
|
2100
|
+
"svg",
|
|
2101
|
+
{
|
|
2102
|
+
className: `w-4 h-4 text-text-400 transition-transform ${isMonthPickerOpen ? "rotate-180" : ""}`,
|
|
2103
|
+
fill: "none",
|
|
2104
|
+
stroke: "currentColor",
|
|
2105
|
+
viewBox: "0 0 24 24",
|
|
2106
|
+
children: /* @__PURE__ */ jsx20(
|
|
2107
|
+
"path",
|
|
2108
|
+
{
|
|
2109
|
+
strokeLinecap: "round",
|
|
2110
|
+
strokeLinejoin: "round",
|
|
2111
|
+
strokeWidth: 2,
|
|
2112
|
+
d: "M19 9l-7 7-7-7"
|
|
2113
|
+
}
|
|
2114
|
+
)
|
|
2115
|
+
}
|
|
2116
|
+
)
|
|
2117
|
+
]
|
|
2118
|
+
}
|
|
2119
|
+
),
|
|
2120
|
+
isMonthPickerOpen && /* @__PURE__ */ jsx20(
|
|
2121
|
+
MonthYearPicker,
|
|
2122
|
+
{
|
|
2123
|
+
monthPickerRef,
|
|
2124
|
+
availableYears,
|
|
2125
|
+
currentDate,
|
|
2126
|
+
onYearChange: handleYearChange,
|
|
2127
|
+
onMonthChange: goToMonth
|
|
2128
|
+
}
|
|
2129
|
+
)
|
|
2130
|
+
] }),
|
|
2131
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
|
|
2132
|
+
/* @__PURE__ */ jsx20(
|
|
2133
|
+
"button",
|
|
2134
|
+
{
|
|
2135
|
+
onClick: goToPreviousMonth,
|
|
2136
|
+
className: "p-1 rounded-md hover:bg-background-100 transition-colors",
|
|
2137
|
+
"aria-label": "M\xEAs anterior",
|
|
2138
|
+
children: /* @__PURE__ */ jsx20(
|
|
2139
|
+
"svg",
|
|
2140
|
+
{
|
|
2141
|
+
className: "w-6 h-6 text-primary-950",
|
|
2142
|
+
fill: "none",
|
|
2143
|
+
stroke: "currentColor",
|
|
2144
|
+
viewBox: "0 0 24 24",
|
|
2145
|
+
children: /* @__PURE__ */ jsx20(
|
|
2146
|
+
"path",
|
|
2147
|
+
{
|
|
2148
|
+
strokeLinecap: "round",
|
|
2149
|
+
strokeLinejoin: "round",
|
|
2150
|
+
strokeWidth: 2,
|
|
2151
|
+
d: "M15 19l-7-7 7-7"
|
|
2152
|
+
}
|
|
2153
|
+
)
|
|
2154
|
+
}
|
|
2155
|
+
)
|
|
2156
|
+
}
|
|
2157
|
+
),
|
|
2158
|
+
/* @__PURE__ */ jsx20(
|
|
2159
|
+
"button",
|
|
2160
|
+
{
|
|
2161
|
+
onClick: goToNextMonth,
|
|
2162
|
+
className: "p-1 rounded-md hover:bg-background-100 transition-colors",
|
|
2163
|
+
"aria-label": "Pr\xF3ximo m\xEAs",
|
|
2164
|
+
children: /* @__PURE__ */ jsx20(
|
|
2165
|
+
"svg",
|
|
2166
|
+
{
|
|
2167
|
+
className: "w-6 h-6 text-primary-950",
|
|
2168
|
+
fill: "none",
|
|
2169
|
+
stroke: "currentColor",
|
|
2170
|
+
viewBox: "0 0 24 24",
|
|
2171
|
+
children: /* @__PURE__ */ jsx20(
|
|
2172
|
+
"path",
|
|
2173
|
+
{
|
|
2174
|
+
strokeLinecap: "round",
|
|
2175
|
+
strokeLinejoin: "round",
|
|
2176
|
+
strokeWidth: 2,
|
|
2177
|
+
d: "M9 5l7 7-7 7"
|
|
2178
|
+
}
|
|
2179
|
+
)
|
|
2180
|
+
}
|
|
2181
|
+
)
|
|
2182
|
+
}
|
|
2183
|
+
)
|
|
2184
|
+
] })
|
|
2185
|
+
] }),
|
|
2186
|
+
/* @__PURE__ */ jsx20("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEK_DAYS.map((day) => /* @__PURE__ */ jsx20(
|
|
2187
|
+
"div",
|
|
2188
|
+
{
|
|
2189
|
+
className: "h-4 flex items-center justify-center text-xs font-semibold text-text-500",
|
|
2190
|
+
children: day
|
|
2191
|
+
},
|
|
2192
|
+
day
|
|
2193
|
+
)) }),
|
|
2194
|
+
/* @__PURE__ */ jsx20("div", { className: "grid grid-cols-7 gap-1", children: calendarData.map((day) => {
|
|
2195
|
+
if (!day.isCurrentMonth) {
|
|
2196
|
+
return /* @__PURE__ */ jsx20(
|
|
2197
|
+
"div",
|
|
2198
|
+
{
|
|
2199
|
+
className: "flex items-center justify-center",
|
|
2200
|
+
children: /* @__PURE__ */ jsx20("div", { className: "w-10 h-10" })
|
|
2201
|
+
},
|
|
2202
|
+
day.date.getTime()
|
|
2203
|
+
);
|
|
2204
|
+
}
|
|
2205
|
+
const { dayStyle, textStyle } = getDayStyles(
|
|
2206
|
+
day,
|
|
2207
|
+
variant,
|
|
2208
|
+
showActivities
|
|
2209
|
+
);
|
|
2210
|
+
return /* @__PURE__ */ jsx20(
|
|
2211
|
+
"div",
|
|
2212
|
+
{
|
|
2213
|
+
className: "flex items-center justify-center",
|
|
2214
|
+
children: /* @__PURE__ */ jsx20(
|
|
2215
|
+
"button",
|
|
2216
|
+
{
|
|
2217
|
+
className: `
|
|
2218
|
+
w-10 h-10
|
|
2219
|
+
flex items-center justify-center
|
|
2220
|
+
text-xl font-normal
|
|
2221
|
+
cursor-pointer
|
|
2222
|
+
rounded-full
|
|
2223
|
+
focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-1
|
|
2224
|
+
${dayStyle}
|
|
2225
|
+
${textStyle}
|
|
2226
|
+
`,
|
|
2227
|
+
onClick: () => handleDateSelect(day),
|
|
2228
|
+
"aria-label": `${day.date.getDate()} de ${MONTH_NAMES[day.date.getMonth()]}`,
|
|
2229
|
+
"aria-current": day.isToday ? "date" : void 0,
|
|
2230
|
+
tabIndex: 0,
|
|
2231
|
+
children: day.date.getDate()
|
|
2232
|
+
}
|
|
2233
|
+
)
|
|
2234
|
+
},
|
|
2235
|
+
day.date.getTime()
|
|
2236
|
+
);
|
|
2237
|
+
}) })
|
|
2238
|
+
] });
|
|
2239
|
+
};
|
|
2240
|
+
var Calendar_default = Calendar;
|
|
2241
|
+
|
|
1741
2242
|
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
1742
2243
|
import { SignOut, User } from "phosphor-react";
|
|
1743
2244
|
import {
|
|
1744
2245
|
forwardRef as forwardRef9,
|
|
1745
|
-
useEffect,
|
|
1746
|
-
useRef,
|
|
2246
|
+
useEffect as useEffect2,
|
|
2247
|
+
useRef as useRef2,
|
|
1747
2248
|
isValidElement,
|
|
1748
2249
|
Children,
|
|
1749
2250
|
cloneElement,
|
|
1750
|
-
useState as
|
|
2251
|
+
useState as useState6
|
|
1751
2252
|
} from "react";
|
|
1752
2253
|
import { create as create2, useStore } from "zustand";
|
|
1753
|
-
import { jsx as
|
|
2254
|
+
import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1754
2255
|
function createDropdownStore() {
|
|
1755
2256
|
return create2((set) => ({
|
|
1756
2257
|
open: false,
|
|
@@ -1781,7 +2282,7 @@ var injectStore = (children, store) => {
|
|
|
1781
2282
|
});
|
|
1782
2283
|
};
|
|
1783
2284
|
var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
1784
|
-
const storeRef =
|
|
2285
|
+
const storeRef = useRef2(null);
|
|
1785
2286
|
storeRef.current ??= createDropdownStore();
|
|
1786
2287
|
const store = storeRef.current;
|
|
1787
2288
|
const isControlled = open !== void 0;
|
|
@@ -1791,7 +2292,7 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
|
1791
2292
|
onOpenChange?.(newOpen);
|
|
1792
2293
|
if (!isControlled) store.setState({ open: newOpen });
|
|
1793
2294
|
};
|
|
1794
|
-
const menuRef =
|
|
2295
|
+
const menuRef = useRef2(null);
|
|
1795
2296
|
const handleArrowDownOrArrowUp = (event) => {
|
|
1796
2297
|
const menuContent = menuRef.current?.querySelector('[role="menu"]');
|
|
1797
2298
|
if (menuContent) {
|
|
@@ -1825,7 +2326,7 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
|
1825
2326
|
setOpen(false);
|
|
1826
2327
|
}
|
|
1827
2328
|
};
|
|
1828
|
-
|
|
2329
|
+
useEffect2(() => {
|
|
1829
2330
|
onOpenChange?.(currentOpen);
|
|
1830
2331
|
if (currentOpen) {
|
|
1831
2332
|
document.addEventListener("mousedown", handleClickOutside);
|
|
@@ -1836,12 +2337,12 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
|
1836
2337
|
document.removeEventListener("keydown", handleDownkey);
|
|
1837
2338
|
};
|
|
1838
2339
|
}, [currentOpen]);
|
|
1839
|
-
|
|
2340
|
+
useEffect2(() => {
|
|
1840
2341
|
if (isControlled) {
|
|
1841
2342
|
store.setState({ open });
|
|
1842
2343
|
}
|
|
1843
2344
|
}, []);
|
|
1844
|
-
return /* @__PURE__ */
|
|
2345
|
+
return /* @__PURE__ */ jsx21("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
|
|
1845
2346
|
};
|
|
1846
2347
|
var DropdownMenuTrigger = ({
|
|
1847
2348
|
className,
|
|
@@ -1853,7 +2354,7 @@ var DropdownMenuTrigger = ({
|
|
|
1853
2354
|
const store = useDropdownStore(externalStore);
|
|
1854
2355
|
const open = useStore(store, (s) => s.open);
|
|
1855
2356
|
const toggleOpen = () => store.setState({ open: !open });
|
|
1856
|
-
return /* @__PURE__ */
|
|
2357
|
+
return /* @__PURE__ */ jsx21(
|
|
1857
2358
|
Button_default,
|
|
1858
2359
|
{
|
|
1859
2360
|
variant: "outline",
|
|
@@ -1890,7 +2391,7 @@ var MENUCONTENT_VARIANT_CLASSES = {
|
|
|
1890
2391
|
profile: "p-6"
|
|
1891
2392
|
};
|
|
1892
2393
|
var MenuLabel = forwardRef9(({ className, inset, store: _store, ...props }, ref) => {
|
|
1893
|
-
return /* @__PURE__ */
|
|
2394
|
+
return /* @__PURE__ */ jsx21(
|
|
1894
2395
|
"div",
|
|
1895
2396
|
{
|
|
1896
2397
|
ref,
|
|
@@ -1913,8 +2414,8 @@ var MenuContent = forwardRef9(
|
|
|
1913
2414
|
}, ref) => {
|
|
1914
2415
|
const store = useDropdownStore(externalStore);
|
|
1915
2416
|
const open = useStore(store, (s) => s.open);
|
|
1916
|
-
const [isVisible, setIsVisible] =
|
|
1917
|
-
|
|
2417
|
+
const [isVisible, setIsVisible] = useState6(open);
|
|
2418
|
+
useEffect2(() => {
|
|
1918
2419
|
if (open) {
|
|
1919
2420
|
setIsVisible(true);
|
|
1920
2421
|
} else {
|
|
@@ -1929,7 +2430,7 @@ var MenuContent = forwardRef9(
|
|
|
1929
2430
|
return `absolute ${vertical} ${horizontal}`;
|
|
1930
2431
|
};
|
|
1931
2432
|
const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
|
|
1932
|
-
return /* @__PURE__ */
|
|
2433
|
+
return /* @__PURE__ */ jsx21(
|
|
1933
2434
|
"div",
|
|
1934
2435
|
{
|
|
1935
2436
|
ref,
|
|
@@ -1988,7 +2489,7 @@ var DropdownMenuItem = forwardRef9(
|
|
|
1988
2489
|
const getVariantProps = () => {
|
|
1989
2490
|
return variant === "profile" ? { "data-variant": "profile" } : {};
|
|
1990
2491
|
};
|
|
1991
|
-
return /* @__PURE__ */
|
|
2492
|
+
return /* @__PURE__ */ jsxs16(
|
|
1992
2493
|
"div",
|
|
1993
2494
|
{
|
|
1994
2495
|
ref,
|
|
@@ -2010,7 +2511,7 @@ var DropdownMenuItem = forwardRef9(
|
|
|
2010
2511
|
...props,
|
|
2011
2512
|
children: [
|
|
2012
2513
|
iconLeft,
|
|
2013
|
-
/* @__PURE__ */
|
|
2514
|
+
/* @__PURE__ */ jsx21("span", { className: "w-full text-md", children }),
|
|
2014
2515
|
iconRight
|
|
2015
2516
|
]
|
|
2016
2517
|
}
|
|
@@ -2018,7 +2519,7 @@ var DropdownMenuItem = forwardRef9(
|
|
|
2018
2519
|
}
|
|
2019
2520
|
);
|
|
2020
2521
|
DropdownMenuItem.displayName = "DropdownMenuItem";
|
|
2021
|
-
var DropdownMenuSeparator = forwardRef9(({ className, store: _store, ...props }, ref) => /* @__PURE__ */
|
|
2522
|
+
var DropdownMenuSeparator = forwardRef9(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ jsx21(
|
|
2022
2523
|
"div",
|
|
2023
2524
|
{
|
|
2024
2525
|
ref,
|
|
@@ -2031,7 +2532,7 @@ var ProfileMenuTrigger = forwardRef9(({ className, onClick, store: externalStore
|
|
|
2031
2532
|
const store = useDropdownStore(externalStore);
|
|
2032
2533
|
const open = useStore(store, (s) => s.open);
|
|
2033
2534
|
const toggleOpen = () => store.setState({ open: !open });
|
|
2034
|
-
return /* @__PURE__ */
|
|
2535
|
+
return /* @__PURE__ */ jsx21(
|
|
2035
2536
|
"button",
|
|
2036
2537
|
{
|
|
2037
2538
|
ref,
|
|
@@ -2043,13 +2544,13 @@ var ProfileMenuTrigger = forwardRef9(({ className, onClick, store: externalStore
|
|
|
2043
2544
|
},
|
|
2044
2545
|
"aria-expanded": open,
|
|
2045
2546
|
...props,
|
|
2046
|
-
children: /* @__PURE__ */
|
|
2547
|
+
children: /* @__PURE__ */ jsx21("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ jsx21(User, { className: "text-background-950", size: 18 }) })
|
|
2047
2548
|
}
|
|
2048
2549
|
);
|
|
2049
2550
|
});
|
|
2050
2551
|
ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
|
|
2051
2552
|
var ProfileMenuHeader = forwardRef9(({ className, name, email, store: _store, ...props }, ref) => {
|
|
2052
|
-
return /* @__PURE__ */
|
|
2553
|
+
return /* @__PURE__ */ jsxs16(
|
|
2053
2554
|
"div",
|
|
2054
2555
|
{
|
|
2055
2556
|
ref,
|
|
@@ -2060,10 +2561,10 @@ var ProfileMenuHeader = forwardRef9(({ className, name, email, store: _store, ..
|
|
|
2060
2561
|
`,
|
|
2061
2562
|
...props,
|
|
2062
2563
|
children: [
|
|
2063
|
-
/* @__PURE__ */
|
|
2064
|
-
/* @__PURE__ */
|
|
2065
|
-
/* @__PURE__ */
|
|
2066
|
-
/* @__PURE__ */
|
|
2564
|
+
/* @__PURE__ */ jsx21("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx21(User, { size: 34, className: "text-background-950" }) }),
|
|
2565
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex flex-col ", children: [
|
|
2566
|
+
/* @__PURE__ */ jsx21("p", { className: "text-xl font-bold text-text-950", children: name }),
|
|
2567
|
+
/* @__PURE__ */ jsx21("p", { className: "text-md text-text-600", children: email })
|
|
2067
2568
|
] })
|
|
2068
2569
|
]
|
|
2069
2570
|
}
|
|
@@ -2071,7 +2572,7 @@ var ProfileMenuHeader = forwardRef9(({ className, name, email, store: _store, ..
|
|
|
2071
2572
|
});
|
|
2072
2573
|
ProfileMenuHeader.displayName = "ProfileMenuHeader";
|
|
2073
2574
|
var ProfileMenuSection = forwardRef9(({ className, children, store: _store, ...props }, ref) => {
|
|
2074
|
-
return /* @__PURE__ */
|
|
2575
|
+
return /* @__PURE__ */ jsx21(
|
|
2075
2576
|
"div",
|
|
2076
2577
|
{
|
|
2077
2578
|
ref,
|
|
@@ -2094,7 +2595,7 @@ var ProfileMenuFooter = ({
|
|
|
2094
2595
|
}) => {
|
|
2095
2596
|
const store = useDropdownStore(externalStore);
|
|
2096
2597
|
const setOpen = useStore(store, (s) => s.setOpen);
|
|
2097
|
-
return /* @__PURE__ */
|
|
2598
|
+
return /* @__PURE__ */ jsxs16(
|
|
2098
2599
|
Button_default,
|
|
2099
2600
|
{
|
|
2100
2601
|
variant: "outline",
|
|
@@ -2106,8 +2607,8 @@ var ProfileMenuFooter = ({
|
|
|
2106
2607
|
},
|
|
2107
2608
|
...props,
|
|
2108
2609
|
children: [
|
|
2109
|
-
/* @__PURE__ */
|
|
2110
|
-
/* @__PURE__ */
|
|
2610
|
+
/* @__PURE__ */ jsx21("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ jsx21(SignOut, {}) }),
|
|
2611
|
+
/* @__PURE__ */ jsx21("span", { children: "Sair" })
|
|
2111
2612
|
]
|
|
2112
2613
|
}
|
|
2113
2614
|
);
|
|
@@ -2118,15 +2619,15 @@ var DropdownMenu_default = DropdownMenu;
|
|
|
2118
2619
|
// src/components/Select/Select.tsx
|
|
2119
2620
|
import { create as create3, useStore as useStore2 } from "zustand";
|
|
2120
2621
|
import {
|
|
2121
|
-
useEffect as
|
|
2122
|
-
useRef as
|
|
2622
|
+
useEffect as useEffect3,
|
|
2623
|
+
useRef as useRef3,
|
|
2123
2624
|
forwardRef as forwardRef10,
|
|
2124
2625
|
isValidElement as isValidElement2,
|
|
2125
2626
|
Children as Children2,
|
|
2126
2627
|
cloneElement as cloneElement2
|
|
2127
2628
|
} from "react";
|
|
2128
2629
|
import { CaretDown, Check as Check3 } from "phosphor-react";
|
|
2129
|
-
import { Fragment as Fragment2, jsx as
|
|
2630
|
+
import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2130
2631
|
var VARIANT_CLASSES4 = {
|
|
2131
2632
|
outlined: "border-2 rounded-sm focus:border-primary-950",
|
|
2132
2633
|
underlined: "border-b-2 focus:border-primary-950",
|
|
@@ -2172,7 +2673,7 @@ function getLabelAsNode(children) {
|
|
|
2172
2673
|
}
|
|
2173
2674
|
const flattened = Children2.toArray(children);
|
|
2174
2675
|
if (flattened.length === 1) return flattened[0];
|
|
2175
|
-
return /* @__PURE__ */
|
|
2676
|
+
return /* @__PURE__ */ jsx22(Fragment2, { children: flattened });
|
|
2176
2677
|
}
|
|
2177
2678
|
var injectStore2 = (children, store) => {
|
|
2178
2679
|
return Children2.map(children, (child) => {
|
|
@@ -2196,10 +2697,10 @@ var Select = ({
|
|
|
2196
2697
|
onValueChange,
|
|
2197
2698
|
size = "small"
|
|
2198
2699
|
}) => {
|
|
2199
|
-
const storeRef =
|
|
2700
|
+
const storeRef = useRef3(null);
|
|
2200
2701
|
storeRef.current ??= createSelectStore();
|
|
2201
2702
|
const store = storeRef.current;
|
|
2202
|
-
const selectRef =
|
|
2703
|
+
const selectRef = useRef3(null);
|
|
2203
2704
|
const { open, setOpen, setValue, value, selectedLabel } = useStore2(
|
|
2204
2705
|
store,
|
|
2205
2706
|
(s) => s
|
|
@@ -2223,13 +2724,13 @@ var Select = ({
|
|
|
2223
2724
|
search(children2);
|
|
2224
2725
|
return found;
|
|
2225
2726
|
};
|
|
2226
|
-
|
|
2727
|
+
useEffect3(() => {
|
|
2227
2728
|
if (!selectedLabel && defaultValue) {
|
|
2228
2729
|
const label = findLabelForValue(children, defaultValue);
|
|
2229
2730
|
if (label) store.setState({ selectedLabel: label });
|
|
2230
2731
|
}
|
|
2231
2732
|
}, [children, defaultValue, selectedLabel]);
|
|
2232
|
-
|
|
2733
|
+
useEffect3(() => {
|
|
2233
2734
|
setValue(currentValue);
|
|
2234
2735
|
const handleClickOutside = (event) => {
|
|
2235
2736
|
if (selectRef.current && !selectRef.current.contains(event.target)) {
|
|
@@ -2265,13 +2766,13 @@ var Select = ({
|
|
|
2265
2766
|
document.removeEventListener("keydown", handleArrowKeys);
|
|
2266
2767
|
};
|
|
2267
2768
|
}, [open]);
|
|
2268
|
-
|
|
2769
|
+
useEffect3(() => {
|
|
2269
2770
|
if (onValueChange) {
|
|
2270
2771
|
onValueChange(value);
|
|
2271
2772
|
}
|
|
2272
2773
|
}, [value]);
|
|
2273
2774
|
const sizeClasses = SIZE_CLASSES9[size];
|
|
2274
|
-
return /* @__PURE__ */
|
|
2775
|
+
return /* @__PURE__ */ jsx22("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore2(children, store) });
|
|
2275
2776
|
};
|
|
2276
2777
|
var SelectValue = ({
|
|
2277
2778
|
placeholder,
|
|
@@ -2280,7 +2781,7 @@ var SelectValue = ({
|
|
|
2280
2781
|
const store = useSelectStore(externalStore);
|
|
2281
2782
|
const selectedLabel = useStore2(store, (s) => s.selectedLabel);
|
|
2282
2783
|
const value = useStore2(store, (s) => s.value);
|
|
2283
|
-
return /* @__PURE__ */
|
|
2784
|
+
return /* @__PURE__ */ jsx22("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
|
|
2284
2785
|
};
|
|
2285
2786
|
var SelectTrigger = forwardRef10(
|
|
2286
2787
|
({
|
|
@@ -2295,7 +2796,7 @@ var SelectTrigger = forwardRef10(
|
|
|
2295
2796
|
const open = useStore2(store, (s) => s.open);
|
|
2296
2797
|
const toggleOpen = () => store.setState({ open: !open });
|
|
2297
2798
|
const variantClasses = VARIANT_CLASSES4[variant];
|
|
2298
|
-
return /* @__PURE__ */
|
|
2799
|
+
return /* @__PURE__ */ jsxs17(
|
|
2299
2800
|
"button",
|
|
2300
2801
|
{
|
|
2301
2802
|
ref,
|
|
@@ -2314,7 +2815,7 @@ var SelectTrigger = forwardRef10(
|
|
|
2314
2815
|
...props,
|
|
2315
2816
|
children: [
|
|
2316
2817
|
props.children,
|
|
2317
|
-
/* @__PURE__ */
|
|
2818
|
+
/* @__PURE__ */ jsx22(
|
|
2318
2819
|
CaretDown,
|
|
2319
2820
|
{
|
|
2320
2821
|
className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
|
|
@@ -2339,7 +2840,7 @@ var SelectContent = forwardRef10(
|
|
|
2339
2840
|
const open = useStore2(store, (s) => s.open);
|
|
2340
2841
|
if (!open) return null;
|
|
2341
2842
|
const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
|
|
2342
|
-
return /* @__PURE__ */
|
|
2843
|
+
return /* @__PURE__ */ jsx22(
|
|
2343
2844
|
"div",
|
|
2344
2845
|
{
|
|
2345
2846
|
role: "menu",
|
|
@@ -2373,7 +2874,7 @@ var SelectItem = forwardRef10(
|
|
|
2373
2874
|
}
|
|
2374
2875
|
props.onClick?.(e);
|
|
2375
2876
|
};
|
|
2376
|
-
return /* @__PURE__ */
|
|
2877
|
+
return /* @__PURE__ */ jsxs17(
|
|
2377
2878
|
"div",
|
|
2378
2879
|
{
|
|
2379
2880
|
role: "menuitem",
|
|
@@ -2393,7 +2894,7 @@ var SelectItem = forwardRef10(
|
|
|
2393
2894
|
tabIndex: disabled ? -1 : 0,
|
|
2394
2895
|
...props,
|
|
2395
2896
|
children: [
|
|
2396
|
-
/* @__PURE__ */
|
|
2897
|
+
/* @__PURE__ */ jsx22("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ jsx22(Check3, { className: "" }) }),
|
|
2397
2898
|
children
|
|
2398
2899
|
]
|
|
2399
2900
|
}
|
|
@@ -2406,16 +2907,16 @@ var Select_default = Select;
|
|
|
2406
2907
|
// src/components/Menu/Menu.tsx
|
|
2407
2908
|
import { create as create4, useStore as useStore3 } from "zustand";
|
|
2408
2909
|
import {
|
|
2409
|
-
useEffect as
|
|
2410
|
-
useRef as
|
|
2910
|
+
useEffect as useEffect4,
|
|
2911
|
+
useRef as useRef4,
|
|
2411
2912
|
forwardRef as forwardRef11,
|
|
2412
2913
|
isValidElement as isValidElement3,
|
|
2413
2914
|
Children as Children3,
|
|
2414
2915
|
cloneElement as cloneElement3,
|
|
2415
|
-
useState as
|
|
2916
|
+
useState as useState7
|
|
2416
2917
|
} from "react";
|
|
2417
2918
|
import { CaretLeft, CaretRight } from "phosphor-react";
|
|
2418
|
-
import { jsx as
|
|
2919
|
+
import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2419
2920
|
var createMenuStore = () => create4((set) => ({
|
|
2420
2921
|
value: "",
|
|
2421
2922
|
setValue: (value) => set({ value })
|
|
@@ -2439,19 +2940,19 @@ var Menu = forwardRef11(
|
|
|
2439
2940
|
onValueChange,
|
|
2440
2941
|
...props
|
|
2441
2942
|
}, ref) => {
|
|
2442
|
-
const storeRef =
|
|
2943
|
+
const storeRef = useRef4(null);
|
|
2443
2944
|
storeRef.current ??= createMenuStore();
|
|
2444
2945
|
const store = storeRef.current;
|
|
2445
2946
|
const { setValue, value } = useStore3(store, (s) => s);
|
|
2446
|
-
|
|
2947
|
+
useEffect4(() => {
|
|
2447
2948
|
setValue(propValue ?? defaultValue);
|
|
2448
2949
|
}, [defaultValue, propValue, setValue]);
|
|
2449
|
-
|
|
2950
|
+
useEffect4(() => {
|
|
2450
2951
|
onValueChange?.(value);
|
|
2451
2952
|
}, [value, onValueChange]);
|
|
2452
2953
|
const baseClasses = "w-full flex flex-row items-center gap-2 py-2 px-6";
|
|
2453
2954
|
const variantClasses = VARIANT_CLASSES5[variant];
|
|
2454
|
-
return /* @__PURE__ */
|
|
2955
|
+
return /* @__PURE__ */ jsx23(
|
|
2455
2956
|
"ul",
|
|
2456
2957
|
{
|
|
2457
2958
|
ref,
|
|
@@ -2496,7 +2997,7 @@ var MenuItem = forwardRef11(
|
|
|
2496
2997
|
...props
|
|
2497
2998
|
};
|
|
2498
2999
|
const variants = {
|
|
2499
|
-
menu: /* @__PURE__ */
|
|
3000
|
+
menu: /* @__PURE__ */ jsx23(
|
|
2500
3001
|
"li",
|
|
2501
3002
|
{
|
|
2502
3003
|
"data-variant": "menu",
|
|
@@ -2511,7 +3012,7 @@ var MenuItem = forwardRef11(
|
|
|
2511
3012
|
children
|
|
2512
3013
|
}
|
|
2513
3014
|
),
|
|
2514
|
-
menu2: /* @__PURE__ */
|
|
3015
|
+
menu2: /* @__PURE__ */ jsx23(
|
|
2515
3016
|
"li",
|
|
2516
3017
|
{
|
|
2517
3018
|
"data-variant": "menu2",
|
|
@@ -2523,7 +3024,7 @@ var MenuItem = forwardRef11(
|
|
|
2523
3024
|
children
|
|
2524
3025
|
}
|
|
2525
3026
|
),
|
|
2526
|
-
breadcrumb: /* @__PURE__ */
|
|
3027
|
+
breadcrumb: /* @__PURE__ */ jsx23(
|
|
2527
3028
|
"li",
|
|
2528
3029
|
{
|
|
2529
3030
|
"data-variant": "breadcrumb",
|
|
@@ -2534,7 +3035,7 @@ var MenuItem = forwardRef11(
|
|
|
2534
3035
|
${className ?? ""}
|
|
2535
3036
|
`,
|
|
2536
3037
|
...commonProps,
|
|
2537
|
-
children: /* @__PURE__ */
|
|
3038
|
+
children: /* @__PURE__ */ jsx23(
|
|
2538
3039
|
"span",
|
|
2539
3040
|
{
|
|
2540
3041
|
className: `
|
|
@@ -2552,14 +3053,14 @@ var MenuItem = forwardRef11(
|
|
|
2552
3053
|
);
|
|
2553
3054
|
MenuItem.displayName = "MenuItem";
|
|
2554
3055
|
var MenuSeparator = forwardRef11(
|
|
2555
|
-
({ className, children, ...props }, ref) => /* @__PURE__ */
|
|
3056
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx23(
|
|
2556
3057
|
"li",
|
|
2557
3058
|
{
|
|
2558
3059
|
ref,
|
|
2559
3060
|
"aria-hidden": "true",
|
|
2560
3061
|
className: `[&>svg]:w-4 [&>svg]:h-4 text-text-600 ${className ?? ""}`,
|
|
2561
3062
|
...props,
|
|
2562
|
-
children: children ?? /* @__PURE__ */
|
|
3063
|
+
children: children ?? /* @__PURE__ */ jsx23(CaretRight, {})
|
|
2563
3064
|
}
|
|
2564
3065
|
)
|
|
2565
3066
|
);
|
|
@@ -2578,6 +3079,7 @@ export {
|
|
|
2578
3079
|
Alert_default as Alert,
|
|
2579
3080
|
Badge_default as Badge,
|
|
2580
3081
|
Button_default as Button,
|
|
3082
|
+
Calendar_default as Calendar,
|
|
2581
3083
|
CheckBox_default as CheckBox,
|
|
2582
3084
|
Chips_default as Chips,
|
|
2583
3085
|
Divider_default as Divider,
|