analytica-frontend-lib 1.0.36 → 1.0.38
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/DropdownMenu/index.d.mts +16 -8
- package/dist/DropdownMenu/index.d.ts +16 -8
- package/dist/DropdownMenu/index.js +122 -45
- package/dist/DropdownMenu/index.js.map +1 -1
- package/dist/DropdownMenu/index.mjs +122 -45
- package/dist/DropdownMenu/index.mjs.map +1 -1
- package/dist/ProgressCircle/index.d.mts +60 -0
- package/dist/ProgressCircle/index.d.ts +60 -0
- package/dist/ProgressCircle/index.js +244 -0
- package/dist/ProgressCircle/index.js.map +1 -0
- package/dist/ProgressCircle/index.mjs +222 -0
- package/dist/ProgressCircle/index.mjs.map +1 -0
- package/dist/Select/index.d.mts +51 -0
- package/dist/Select/index.d.ts +51 -0
- package/dist/Select/index.js +323 -0
- package/dist/Select/index.js.map +1 -0
- package/dist/Select/index.mjs +300 -0
- package/dist/Select/index.mjs.map +1 -0
- package/dist/index.css +181 -9
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +4 -44
- package/dist/index.d.ts +4 -44
- package/dist/index.js +248 -62
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +247 -62
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +181 -9
- package/dist/styles.css.map +1 -1
- package/package.json +2 -1
package/dist/index.js
CHANGED
|
@@ -41,6 +41,7 @@ __export(src_exports, {
|
|
|
41
41
|
ProfileMenuSection: () => ProfileMenuSection,
|
|
42
42
|
ProfileMenuTrigger: () => ProfileMenuTrigger,
|
|
43
43
|
ProgressBar: () => ProgressBar_default,
|
|
44
|
+
ProgressCircle: () => ProgressCircle_default,
|
|
44
45
|
Radio: () => Radio_default,
|
|
45
46
|
Select: () => Select_default,
|
|
46
47
|
SelectContent: () => SelectContent,
|
|
@@ -1643,11 +1644,177 @@ var ProgressBar = ({
|
|
|
1643
1644
|
};
|
|
1644
1645
|
var ProgressBar_default = ProgressBar;
|
|
1645
1646
|
|
|
1647
|
+
// src/components/ProgressCircle/ProgressCircle.tsx
|
|
1648
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1649
|
+
var SIZE_CLASSES8 = {
|
|
1650
|
+
small: {
|
|
1651
|
+
container: "w-[90px] h-[90px]",
|
|
1652
|
+
// 90px circle from design specs
|
|
1653
|
+
strokeWidth: 4,
|
|
1654
|
+
// 4px stroke width - matches ProgressBar small (h-1)
|
|
1655
|
+
textSize: "2xl",
|
|
1656
|
+
// 24px for percentage (font-size: 24px)
|
|
1657
|
+
textWeight: "medium",
|
|
1658
|
+
// font-weight: 500
|
|
1659
|
+
labelSize: "2xs",
|
|
1660
|
+
// 10px for status label (closest to 8px design spec)
|
|
1661
|
+
labelWeight: "bold",
|
|
1662
|
+
// font-weight: 700
|
|
1663
|
+
spacing: "gap-1"
|
|
1664
|
+
// 4px gap between percentage and label
|
|
1665
|
+
},
|
|
1666
|
+
medium: {
|
|
1667
|
+
container: "w-[152px] h-[152px]",
|
|
1668
|
+
// 151.67px ≈ 152px circle from design specs
|
|
1669
|
+
strokeWidth: 8,
|
|
1670
|
+
// 8px stroke width - matches ProgressBar medium (h-2)
|
|
1671
|
+
textSize: "2xl",
|
|
1672
|
+
// 24px for percentage (font-size: 24px)
|
|
1673
|
+
textWeight: "medium",
|
|
1674
|
+
// font-weight: 500
|
|
1675
|
+
labelSize: "xs",
|
|
1676
|
+
// 12px for status label (font-size: 12px)
|
|
1677
|
+
labelWeight: "medium",
|
|
1678
|
+
// font-weight: 500 (changed from bold)
|
|
1679
|
+
spacing: "gap-1"
|
|
1680
|
+
// 4px gap between percentage and label
|
|
1681
|
+
}
|
|
1682
|
+
};
|
|
1683
|
+
var VARIANT_CLASSES3 = {
|
|
1684
|
+
blue: {
|
|
1685
|
+
background: "stroke-primary-100",
|
|
1686
|
+
// Light blue background (#BBDCF7)
|
|
1687
|
+
fill: "stroke-primary-700",
|
|
1688
|
+
// Blue for activity progress (#2271C4)
|
|
1689
|
+
textColor: "text-primary-700",
|
|
1690
|
+
// Blue text color (#2271C4)
|
|
1691
|
+
labelColor: "text-text-700"
|
|
1692
|
+
// Gray text for label (#525252)
|
|
1693
|
+
},
|
|
1694
|
+
green: {
|
|
1695
|
+
background: "stroke-background-300",
|
|
1696
|
+
// Gray background (#D5D4D4 - matches design)
|
|
1697
|
+
fill: "stroke-success-200",
|
|
1698
|
+
// Green for performance (#84D3A2 - matches design)
|
|
1699
|
+
textColor: "text-text-800",
|
|
1700
|
+
// Dark gray text (#404040 - matches design)
|
|
1701
|
+
labelColor: "text-text-600"
|
|
1702
|
+
// Medium gray text for label (#737373 - matches design)
|
|
1703
|
+
}
|
|
1704
|
+
};
|
|
1705
|
+
var ProgressCircle = ({
|
|
1706
|
+
value,
|
|
1707
|
+
max = 100,
|
|
1708
|
+
size = "small",
|
|
1709
|
+
variant = "blue",
|
|
1710
|
+
label,
|
|
1711
|
+
showPercentage = true,
|
|
1712
|
+
className = "",
|
|
1713
|
+
labelClassName = "",
|
|
1714
|
+
percentageClassName = ""
|
|
1715
|
+
}) => {
|
|
1716
|
+
const safeValue = isNaN(value) ? 0 : value;
|
|
1717
|
+
const clampedValue = Math.max(0, Math.min(safeValue, max));
|
|
1718
|
+
const percentage = max === 0 ? 0 : clampedValue / max * 100;
|
|
1719
|
+
const sizeClasses = SIZE_CLASSES8[size];
|
|
1720
|
+
const variantClasses = VARIANT_CLASSES3[variant];
|
|
1721
|
+
const radius = size === "small" ? 37 : 64;
|
|
1722
|
+
const circumference = 2 * Math.PI * radius;
|
|
1723
|
+
const strokeDashoffset = circumference - percentage / 100 * circumference;
|
|
1724
|
+
const center = size === "small" ? 45 : 76;
|
|
1725
|
+
const svgSize = size === "small" ? 90 : 152;
|
|
1726
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1727
|
+
"div",
|
|
1728
|
+
{
|
|
1729
|
+
className: `relative flex flex-col items-center justify-center ${sizeClasses.container} rounded-lg ${className}`,
|
|
1730
|
+
children: [
|
|
1731
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1732
|
+
"svg",
|
|
1733
|
+
{
|
|
1734
|
+
className: "absolute inset-0 transform -rotate-90",
|
|
1735
|
+
width: svgSize,
|
|
1736
|
+
height: svgSize,
|
|
1737
|
+
viewBox: `0 0 ${svgSize} ${svgSize}`,
|
|
1738
|
+
"aria-hidden": "true",
|
|
1739
|
+
children: [
|
|
1740
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1741
|
+
"circle",
|
|
1742
|
+
{
|
|
1743
|
+
cx: center,
|
|
1744
|
+
cy: center,
|
|
1745
|
+
r: radius,
|
|
1746
|
+
fill: "none",
|
|
1747
|
+
strokeWidth: sizeClasses.strokeWidth,
|
|
1748
|
+
className: `${variantClasses.background} rounded-lg`
|
|
1749
|
+
}
|
|
1750
|
+
),
|
|
1751
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1752
|
+
"circle",
|
|
1753
|
+
{
|
|
1754
|
+
cx: center,
|
|
1755
|
+
cy: center,
|
|
1756
|
+
r: radius,
|
|
1757
|
+
fill: "none",
|
|
1758
|
+
strokeWidth: sizeClasses.strokeWidth,
|
|
1759
|
+
strokeLinecap: "round",
|
|
1760
|
+
strokeDasharray: circumference,
|
|
1761
|
+
strokeDashoffset,
|
|
1762
|
+
className: `${variantClasses.fill} transition-all duration-500 ease-out shadow-soft-shadow-3 rounded-lg`
|
|
1763
|
+
}
|
|
1764
|
+
)
|
|
1765
|
+
]
|
|
1766
|
+
}
|
|
1767
|
+
),
|
|
1768
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1769
|
+
"progress",
|
|
1770
|
+
{
|
|
1771
|
+
value: clampedValue,
|
|
1772
|
+
max,
|
|
1773
|
+
"aria-label": typeof label === "string" ? label : "Progress",
|
|
1774
|
+
className: "absolute opacity-0 w-0 h-0"
|
|
1775
|
+
}
|
|
1776
|
+
),
|
|
1777
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1778
|
+
"div",
|
|
1779
|
+
{
|
|
1780
|
+
className: `relative z-10 flex flex-col items-center justify-center ${sizeClasses.spacing}`,
|
|
1781
|
+
children: [
|
|
1782
|
+
showPercentage && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1783
|
+
Text_default,
|
|
1784
|
+
{
|
|
1785
|
+
size: sizeClasses.textSize,
|
|
1786
|
+
weight: sizeClasses.textWeight,
|
|
1787
|
+
className: `text-center ${variantClasses.textColor} ${percentageClassName}`,
|
|
1788
|
+
children: [
|
|
1789
|
+
Math.round(percentage),
|
|
1790
|
+
"%"
|
|
1791
|
+
]
|
|
1792
|
+
}
|
|
1793
|
+
),
|
|
1794
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1795
|
+
Text_default,
|
|
1796
|
+
{
|
|
1797
|
+
as: "span",
|
|
1798
|
+
size: sizeClasses.labelSize,
|
|
1799
|
+
weight: sizeClasses.labelWeight,
|
|
1800
|
+
className: `${variantClasses.labelColor} text-center uppercase tracking-wide ${labelClassName}`,
|
|
1801
|
+
children: label
|
|
1802
|
+
}
|
|
1803
|
+
)
|
|
1804
|
+
]
|
|
1805
|
+
}
|
|
1806
|
+
)
|
|
1807
|
+
]
|
|
1808
|
+
}
|
|
1809
|
+
);
|
|
1810
|
+
};
|
|
1811
|
+
var ProgressCircle_default = ProgressCircle;
|
|
1812
|
+
|
|
1646
1813
|
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
1647
1814
|
var import_phosphor_react7 = require("phosphor-react");
|
|
1648
1815
|
var import_react9 = require("react");
|
|
1649
1816
|
var import_zustand2 = require("zustand");
|
|
1650
|
-
var
|
|
1817
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1651
1818
|
function createDropdownStore() {
|
|
1652
1819
|
return (0, import_zustand2.create)((set) => ({
|
|
1653
1820
|
open: false,
|
|
@@ -1738,28 +1905,34 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
|
1738
1905
|
store.setState({ open });
|
|
1739
1906
|
}
|
|
1740
1907
|
}, []);
|
|
1741
|
-
return /* @__PURE__ */ (0,
|
|
1908
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
|
|
1742
1909
|
};
|
|
1743
|
-
var DropdownMenuTrigger = (
|
|
1910
|
+
var DropdownMenuTrigger = ({
|
|
1911
|
+
className,
|
|
1912
|
+
children,
|
|
1913
|
+
onClick,
|
|
1914
|
+
store: externalStore,
|
|
1915
|
+
...props
|
|
1916
|
+
}) => {
|
|
1744
1917
|
const store = useDropdownStore(externalStore);
|
|
1745
1918
|
const open = (0, import_zustand2.useStore)(store, (s) => s.open);
|
|
1746
1919
|
const toggleOpen = () => store.setState({ open: !open });
|
|
1747
|
-
return /* @__PURE__ */ (0,
|
|
1748
|
-
|
|
1920
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1921
|
+
Button_default,
|
|
1749
1922
|
{
|
|
1750
|
-
|
|
1751
|
-
className: `border border-border-200 cursor-pointer bg-background-muted hover:bg-background-200 transition-colors px-4 py-2 rounded-sm ${className}`,
|
|
1923
|
+
variant: "outline",
|
|
1752
1924
|
onClick: (e) => {
|
|
1753
1925
|
e.stopPropagation();
|
|
1754
1926
|
toggleOpen();
|
|
1755
1927
|
if (onClick) onClick(e);
|
|
1756
1928
|
},
|
|
1757
1929
|
"aria-expanded": open,
|
|
1930
|
+
className: `${className}`,
|
|
1758
1931
|
...props,
|
|
1759
1932
|
children
|
|
1760
1933
|
}
|
|
1761
1934
|
);
|
|
1762
|
-
}
|
|
1935
|
+
};
|
|
1763
1936
|
DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
|
|
1764
1937
|
var ITEM_SIZE_CLASSES = {
|
|
1765
1938
|
small: "text-sm",
|
|
@@ -1776,8 +1949,12 @@ var ALIGN_CLASSES = {
|
|
|
1776
1949
|
center: "left-1/2 -translate-x-1/2",
|
|
1777
1950
|
end: "right-0"
|
|
1778
1951
|
};
|
|
1952
|
+
var MENUCONTENT_VARIANT_CLASSES = {
|
|
1953
|
+
menu: "p-1",
|
|
1954
|
+
profile: "p-6"
|
|
1955
|
+
};
|
|
1779
1956
|
var MenuLabel = (0, import_react9.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
|
|
1780
|
-
return /* @__PURE__ */ (0,
|
|
1957
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1781
1958
|
"div",
|
|
1782
1959
|
{
|
|
1783
1960
|
ref,
|
|
@@ -1792,6 +1969,7 @@ var MenuContent = (0, import_react9.forwardRef)(
|
|
|
1792
1969
|
className,
|
|
1793
1970
|
align = "start",
|
|
1794
1971
|
side = "bottom",
|
|
1972
|
+
variant = "menu",
|
|
1795
1973
|
sideOffset = 4,
|
|
1796
1974
|
children,
|
|
1797
1975
|
store: externalStore,
|
|
@@ -1814,15 +1992,17 @@ var MenuContent = (0, import_react9.forwardRef)(
|
|
|
1814
1992
|
const horizontal = ALIGN_CLASSES[align];
|
|
1815
1993
|
return `absolute ${vertical} ${horizontal}`;
|
|
1816
1994
|
};
|
|
1817
|
-
|
|
1995
|
+
const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
|
|
1996
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1818
1997
|
"div",
|
|
1819
1998
|
{
|
|
1820
1999
|
ref,
|
|
1821
2000
|
role: "menu",
|
|
1822
2001
|
className: `
|
|
1823
|
-
bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover
|
|
2002
|
+
bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md border-border-100
|
|
1824
2003
|
${open ? "animate-in fade-in-0 zoom-in-95" : "animate-out fade-out-0 zoom-out-95"}
|
|
1825
2004
|
${getPositionClasses()}
|
|
2005
|
+
${variantClasses}
|
|
1826
2006
|
${className}
|
|
1827
2007
|
`,
|
|
1828
2008
|
style: {
|
|
@@ -1865,14 +2045,14 @@ var MenuItem = (0, import_react9.forwardRef)(
|
|
|
1865
2045
|
};
|
|
1866
2046
|
const getVariantClasses = () => {
|
|
1867
2047
|
if (variant === "profile") {
|
|
1868
|
-
return "relative flex flex-row justify-between select-none items-center gap-2 rounded-sm p-
|
|
2048
|
+
return "relative flex flex-row justify-between select-none items-center gap-2 rounded-sm p-4 text-sm outline-none transition-colors [&>svg]:size-6 [&>svg]:shrink-0";
|
|
1869
2049
|
}
|
|
1870
2050
|
return "relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0";
|
|
1871
2051
|
};
|
|
1872
2052
|
const getVariantProps = () => {
|
|
1873
2053
|
return variant === "profile" ? { "data-variant": "profile" } : {};
|
|
1874
2054
|
};
|
|
1875
|
-
return /* @__PURE__ */ (0,
|
|
2055
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1876
2056
|
"div",
|
|
1877
2057
|
{
|
|
1878
2058
|
ref,
|
|
@@ -1894,7 +2074,7 @@ var MenuItem = (0, import_react9.forwardRef)(
|
|
|
1894
2074
|
...props,
|
|
1895
2075
|
children: [
|
|
1896
2076
|
iconLeft,
|
|
1897
|
-
children,
|
|
2077
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "w-full text-md", children }),
|
|
1898
2078
|
iconRight
|
|
1899
2079
|
]
|
|
1900
2080
|
}
|
|
@@ -1902,7 +2082,7 @@ var MenuItem = (0, import_react9.forwardRef)(
|
|
|
1902
2082
|
}
|
|
1903
2083
|
);
|
|
1904
2084
|
MenuItem.displayName = "MenuItem";
|
|
1905
|
-
var MenuSeparator = (0, import_react9.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2085
|
+
var MenuSeparator = (0, import_react9.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1906
2086
|
"div",
|
|
1907
2087
|
{
|
|
1908
2088
|
ref,
|
|
@@ -1915,7 +2095,7 @@ var ProfileMenuTrigger = (0, import_react9.forwardRef)(({ className, onClick, st
|
|
|
1915
2095
|
const store = useDropdownStore(externalStore);
|
|
1916
2096
|
const open = (0, import_zustand2.useStore)(store, (s) => s.open);
|
|
1917
2097
|
const toggleOpen = () => store.setState({ open: !open });
|
|
1918
|
-
return /* @__PURE__ */ (0,
|
|
2098
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1919
2099
|
"button",
|
|
1920
2100
|
{
|
|
1921
2101
|
ref,
|
|
@@ -1927,13 +2107,13 @@ var ProfileMenuTrigger = (0, import_react9.forwardRef)(({ className, onClick, st
|
|
|
1927
2107
|
},
|
|
1928
2108
|
"aria-expanded": open,
|
|
1929
2109
|
...props,
|
|
1930
|
-
children: /* @__PURE__ */ (0,
|
|
2110
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react7.User, { className: "text-background-950", size: 18 }) })
|
|
1931
2111
|
}
|
|
1932
2112
|
);
|
|
1933
2113
|
});
|
|
1934
2114
|
ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
|
|
1935
2115
|
var ProfileMenuHeader = (0, import_react9.forwardRef)(({ className, name, email, store: _store, ...props }, ref) => {
|
|
1936
|
-
return /* @__PURE__ */ (0,
|
|
2116
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1937
2117
|
"div",
|
|
1938
2118
|
{
|
|
1939
2119
|
ref,
|
|
@@ -1944,10 +2124,10 @@ var ProfileMenuHeader = (0, import_react9.forwardRef)(({ className, name, email,
|
|
|
1944
2124
|
`,
|
|
1945
2125
|
...props,
|
|
1946
2126
|
children: [
|
|
1947
|
-
/* @__PURE__ */ (0,
|
|
1948
|
-
/* @__PURE__ */ (0,
|
|
1949
|
-
/* @__PURE__ */ (0,
|
|
1950
|
-
/* @__PURE__ */ (0,
|
|
2127
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react7.User, { size: 34, className: "text-background-950" }) }),
|
|
2128
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col ", children: [
|
|
2129
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-xl font-bold text-text-950", children: name }),
|
|
2130
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-md text-text-600", children: email })
|
|
1951
2131
|
] })
|
|
1952
2132
|
]
|
|
1953
2133
|
}
|
|
@@ -1955,7 +2135,7 @@ var ProfileMenuHeader = (0, import_react9.forwardRef)(({ className, name, email,
|
|
|
1955
2135
|
});
|
|
1956
2136
|
ProfileMenuHeader.displayName = "ProfileMenuHeader";
|
|
1957
2137
|
var ProfileMenuSection = (0, import_react9.forwardRef)(({ className, children, store: _store, ...props }, ref) => {
|
|
1958
|
-
return /* @__PURE__ */ (0,
|
|
2138
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1959
2139
|
"div",
|
|
1960
2140
|
{
|
|
1961
2141
|
ref,
|
|
@@ -1969,29 +2149,33 @@ var ProfileMenuSection = (0, import_react9.forwardRef)(({ className, children, s
|
|
|
1969
2149
|
);
|
|
1970
2150
|
});
|
|
1971
2151
|
ProfileMenuSection.displayName = "ProfileMenuSection";
|
|
1972
|
-
var ProfileMenuFooter = (
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
)
|
|
2152
|
+
var ProfileMenuFooter = ({
|
|
2153
|
+
className,
|
|
2154
|
+
disabled = false,
|
|
2155
|
+
onClick,
|
|
2156
|
+
store: externalStore,
|
|
2157
|
+
...props
|
|
2158
|
+
}) => {
|
|
2159
|
+
const store = useDropdownStore(externalStore);
|
|
2160
|
+
const setOpen = (0, import_zustand2.useStore)(store, (s) => s.setOpen);
|
|
2161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
2162
|
+
Button_default,
|
|
2163
|
+
{
|
|
2164
|
+
variant: "outline",
|
|
2165
|
+
className: `w-full ${className}`,
|
|
2166
|
+
disabled,
|
|
2167
|
+
onClick: (e) => {
|
|
2168
|
+
setOpen(false);
|
|
2169
|
+
onClick?.(e);
|
|
2170
|
+
},
|
|
2171
|
+
...props,
|
|
2172
|
+
children: [
|
|
2173
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react7.SignOut, {}) }),
|
|
2174
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Sair" })
|
|
2175
|
+
]
|
|
2176
|
+
}
|
|
2177
|
+
);
|
|
2178
|
+
};
|
|
1995
2179
|
ProfileMenuFooter.displayName = "ProfileMenuFooter";
|
|
1996
2180
|
var DropdownMenu_default = DropdownMenu;
|
|
1997
2181
|
|
|
@@ -1999,13 +2183,13 @@ var DropdownMenu_default = DropdownMenu;
|
|
|
1999
2183
|
var import_zustand3 = require("zustand");
|
|
2000
2184
|
var import_react10 = require("react");
|
|
2001
2185
|
var import_phosphor_react8 = require("phosphor-react");
|
|
2002
|
-
var
|
|
2003
|
-
var
|
|
2186
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
2187
|
+
var VARIANT_CLASSES4 = {
|
|
2004
2188
|
outlined: "border-2 rounded-sm focus:border-primary-950",
|
|
2005
2189
|
underlined: "border-b-2 focus:border-primary-950",
|
|
2006
2190
|
rounded: "border-2 rounded-4xl focus:border-primary-950"
|
|
2007
2191
|
};
|
|
2008
|
-
var
|
|
2192
|
+
var SIZE_CLASSES9 = {
|
|
2009
2193
|
small: "text-sm",
|
|
2010
2194
|
medium: "text-md",
|
|
2011
2195
|
large: "text-lg"
|
|
@@ -2045,7 +2229,7 @@ function getLabelAsNode(children) {
|
|
|
2045
2229
|
}
|
|
2046
2230
|
const flattened = import_react10.Children.toArray(children);
|
|
2047
2231
|
if (flattened.length === 1) return flattened[0];
|
|
2048
|
-
return /* @__PURE__ */ (0,
|
|
2232
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: flattened });
|
|
2049
2233
|
}
|
|
2050
2234
|
var injectStore2 = (children, store) => {
|
|
2051
2235
|
return import_react10.Children.map(children, (child) => {
|
|
@@ -2143,8 +2327,8 @@ var Select = ({
|
|
|
2143
2327
|
onValueChange(value);
|
|
2144
2328
|
}
|
|
2145
2329
|
}, [value]);
|
|
2146
|
-
const sizeClasses =
|
|
2147
|
-
return /* @__PURE__ */ (0,
|
|
2330
|
+
const sizeClasses = SIZE_CLASSES9[size];
|
|
2331
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore2(children, store) });
|
|
2148
2332
|
};
|
|
2149
2333
|
var SelectValue = ({
|
|
2150
2334
|
placeholder,
|
|
@@ -2153,7 +2337,7 @@ var SelectValue = ({
|
|
|
2153
2337
|
const store = useSelectStore(externalStore);
|
|
2154
2338
|
const selectedLabel = (0, import_zustand3.useStore)(store, (s) => s.selectedLabel);
|
|
2155
2339
|
const value = (0, import_zustand3.useStore)(store, (s) => s.value);
|
|
2156
|
-
return /* @__PURE__ */ (0,
|
|
2340
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
|
|
2157
2341
|
};
|
|
2158
2342
|
var SelectTrigger = (0, import_react10.forwardRef)(
|
|
2159
2343
|
({
|
|
@@ -2167,15 +2351,16 @@ var SelectTrigger = (0, import_react10.forwardRef)(
|
|
|
2167
2351
|
const store = useSelectStore(externalStore);
|
|
2168
2352
|
const open = (0, import_zustand3.useStore)(store, (s) => s.open);
|
|
2169
2353
|
const toggleOpen = () => store.setState({ open: !open });
|
|
2170
|
-
const variantClasses =
|
|
2171
|
-
return /* @__PURE__ */ (0,
|
|
2354
|
+
const variantClasses = VARIANT_CLASSES4[variant];
|
|
2355
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
2172
2356
|
"button",
|
|
2173
2357
|
{
|
|
2174
2358
|
ref,
|
|
2175
2359
|
className: `
|
|
2176
2360
|
flex h-9 min-w-[220px] w-full items-center justify-between border-border-300 px-3 py-2
|
|
2177
|
-
${invalid && "border-indicator-error"}
|
|
2178
|
-
${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50
|
|
2361
|
+
${invalid && "border-indicator-error text-text-600"}
|
|
2362
|
+
${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
|
|
2363
|
+
${!invalid && !disabled ? "text-text-700" : ""}
|
|
2179
2364
|
${variantClasses}
|
|
2180
2365
|
${className}
|
|
2181
2366
|
`,
|
|
@@ -2186,7 +2371,7 @@ var SelectTrigger = (0, import_react10.forwardRef)(
|
|
|
2186
2371
|
...props,
|
|
2187
2372
|
children: [
|
|
2188
2373
|
props.children,
|
|
2189
|
-
/* @__PURE__ */ (0,
|
|
2374
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2190
2375
|
import_phosphor_react8.CaretDown,
|
|
2191
2376
|
{
|
|
2192
2377
|
className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
|
|
@@ -2210,8 +2395,8 @@ var SelectContent = (0, import_react10.forwardRef)(
|
|
|
2210
2395
|
const store = useSelectStore(externalStore);
|
|
2211
2396
|
const open = (0, import_zustand3.useStore)(store, (s) => s.open);
|
|
2212
2397
|
if (!open) return null;
|
|
2213
|
-
const getPositionClasses = () => `absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
|
|
2214
|
-
return /* @__PURE__ */ (0,
|
|
2398
|
+
const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
|
|
2399
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2215
2400
|
"div",
|
|
2216
2401
|
{
|
|
2217
2402
|
role: "menu",
|
|
@@ -2245,7 +2430,7 @@ var SelectItem = (0, import_react10.forwardRef)(
|
|
|
2245
2430
|
}
|
|
2246
2431
|
props.onClick?.(e);
|
|
2247
2432
|
};
|
|
2248
|
-
return /* @__PURE__ */ (0,
|
|
2433
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
2249
2434
|
"div",
|
|
2250
2435
|
{
|
|
2251
2436
|
role: "menuitem",
|
|
@@ -2265,7 +2450,7 @@ var SelectItem = (0, import_react10.forwardRef)(
|
|
|
2265
2450
|
tabIndex: disabled ? -1 : 0,
|
|
2266
2451
|
...props,
|
|
2267
2452
|
children: [
|
|
2268
|
-
/* @__PURE__ */ (0,
|
|
2453
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_phosphor_react8.Check, { className: "" }) }),
|
|
2269
2454
|
children
|
|
2270
2455
|
]
|
|
2271
2456
|
}
|
|
@@ -2297,6 +2482,7 @@ var Select_default = Select;
|
|
|
2297
2482
|
ProfileMenuSection,
|
|
2298
2483
|
ProfileMenuTrigger,
|
|
2299
2484
|
ProgressBar,
|
|
2485
|
+
ProgressCircle,
|
|
2300
2486
|
Radio,
|
|
2301
2487
|
Select,
|
|
2302
2488
|
SelectContent,
|