analytica-frontend-lib 1.0.34 → 1.0.36
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 +36 -5
- package/dist/DropdownMenu/index.d.ts +36 -5
- package/dist/DropdownMenu/index.js +178 -39
- package/dist/DropdownMenu/index.js.map +1 -1
- package/dist/DropdownMenu/index.mjs +175 -43
- package/dist/DropdownMenu/index.mjs.map +1 -1
- package/dist/ProgressBar/index.d.mts +60 -0
- package/dist/ProgressBar/index.d.ts +60 -0
- package/dist/ProgressBar/index.js +220 -0
- package/dist/ProgressBar/index.js.map +1 -0
- package/dist/ProgressBar/index.mjs +198 -0
- package/dist/ProgressBar/index.mjs.map +1 -0
- package/dist/Radio/index.d.mts +85 -0
- package/dist/Radio/index.d.ts +85 -0
- package/dist/Radio/index.js +299 -0
- package/dist/Radio/index.js.map +1 -0
- package/dist/Radio/index.mjs +283 -0
- package/dist/Radio/index.mjs.map +1 -0
- package/dist/index.css +150 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +49 -61
- package/dist/index.d.ts +49 -61
- package/dist/index.js +618 -49
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +615 -50
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +150 -0
- package/dist/styles.css.map +1 -1
- package/package.json +3 -1
package/dist/index.mjs
CHANGED
|
@@ -1459,32 +1459,201 @@ var Chips = ({
|
|
|
1459
1459
|
};
|
|
1460
1460
|
var Chips_default = Chips;
|
|
1461
1461
|
|
|
1462
|
+
// src/components/ProgressBar/ProgressBar.tsx
|
|
1463
|
+
import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1464
|
+
var SIZE_CLASSES7 = {
|
|
1465
|
+
small: {
|
|
1466
|
+
container: "h-1",
|
|
1467
|
+
// 4px height (h-1 = 4px in Tailwind)
|
|
1468
|
+
bar: "h-1",
|
|
1469
|
+
// 4px height for the fill bar
|
|
1470
|
+
labelSize: "xs",
|
|
1471
|
+
spacing: "gap-2",
|
|
1472
|
+
// 8px gap between label and progress bar
|
|
1473
|
+
layout: "flex-col",
|
|
1474
|
+
// vertical layout for small
|
|
1475
|
+
borderRadius: "rounded-full"
|
|
1476
|
+
// 9999px border radius
|
|
1477
|
+
},
|
|
1478
|
+
medium: {
|
|
1479
|
+
container: "h-2",
|
|
1480
|
+
// 8px height (h-2 = 8px in Tailwind)
|
|
1481
|
+
bar: "h-2",
|
|
1482
|
+
// 8px height for the fill bar
|
|
1483
|
+
labelSize: "xs",
|
|
1484
|
+
// 12px font size (xs in Tailwind)
|
|
1485
|
+
spacing: "gap-2",
|
|
1486
|
+
// 8px gap between progress bar and label
|
|
1487
|
+
layout: "flex-row items-center",
|
|
1488
|
+
// horizontal layout for medium
|
|
1489
|
+
borderRadius: "rounded-lg"
|
|
1490
|
+
// 8px border radius
|
|
1491
|
+
}
|
|
1492
|
+
};
|
|
1493
|
+
var VARIANT_CLASSES2 = {
|
|
1494
|
+
blue: {
|
|
1495
|
+
background: "bg-background-300",
|
|
1496
|
+
// Background track color (#D5D4D4)
|
|
1497
|
+
fill: "bg-primary-700"
|
|
1498
|
+
// Blue for activity progress (#2271C4)
|
|
1499
|
+
},
|
|
1500
|
+
green: {
|
|
1501
|
+
background: "bg-background-300",
|
|
1502
|
+
// Background track color (#D5D4D4)
|
|
1503
|
+
fill: "bg-success-200"
|
|
1504
|
+
// Green for performance (#84D3A2)
|
|
1505
|
+
}
|
|
1506
|
+
};
|
|
1507
|
+
var ProgressBar = ({
|
|
1508
|
+
value,
|
|
1509
|
+
max = 100,
|
|
1510
|
+
size = "medium",
|
|
1511
|
+
variant = "blue",
|
|
1512
|
+
label,
|
|
1513
|
+
showPercentage = false,
|
|
1514
|
+
className = "",
|
|
1515
|
+
labelClassName = "",
|
|
1516
|
+
percentageClassName = ""
|
|
1517
|
+
}) => {
|
|
1518
|
+
const safeValue = isNaN(value) ? 0 : value;
|
|
1519
|
+
const clampedValue = Math.max(0, Math.min(safeValue, max));
|
|
1520
|
+
const percentage = max === 0 ? 0 : clampedValue / max * 100;
|
|
1521
|
+
const sizeClasses = SIZE_CLASSES7[size];
|
|
1522
|
+
const variantClasses = VARIANT_CLASSES2[variant];
|
|
1523
|
+
return /* @__PURE__ */ jsxs13(
|
|
1524
|
+
"div",
|
|
1525
|
+
{
|
|
1526
|
+
className: `flex ${sizeClasses.layout} ${sizeClasses.spacing} ${className}`,
|
|
1527
|
+
children: [
|
|
1528
|
+
size === "small" && (label || showPercentage) && /* @__PURE__ */ jsxs13("div", { className: "flex flex-row items-center justify-between w-full", children: [
|
|
1529
|
+
label && /* @__PURE__ */ jsx18(
|
|
1530
|
+
Text_default,
|
|
1531
|
+
{
|
|
1532
|
+
as: "div",
|
|
1533
|
+
size: sizeClasses.labelSize,
|
|
1534
|
+
weight: "medium",
|
|
1535
|
+
className: `text-text-950 ${labelClassName}`,
|
|
1536
|
+
children: label
|
|
1537
|
+
}
|
|
1538
|
+
),
|
|
1539
|
+
showPercentage && /* @__PURE__ */ jsxs13(
|
|
1540
|
+
Text_default,
|
|
1541
|
+
{
|
|
1542
|
+
size: sizeClasses.labelSize,
|
|
1543
|
+
weight: "medium",
|
|
1544
|
+
className: `text-text-700 text-center ${percentageClassName}`,
|
|
1545
|
+
children: [
|
|
1546
|
+
Math.round(percentage),
|
|
1547
|
+
"%"
|
|
1548
|
+
]
|
|
1549
|
+
}
|
|
1550
|
+
)
|
|
1551
|
+
] }),
|
|
1552
|
+
/* @__PURE__ */ jsxs13(
|
|
1553
|
+
"div",
|
|
1554
|
+
{
|
|
1555
|
+
className: `${size === "medium" ? "flex-grow" : "w-full"} ${sizeClasses.container} ${variantClasses.background} ${sizeClasses.borderRadius} overflow-hidden relative`,
|
|
1556
|
+
children: [
|
|
1557
|
+
/* @__PURE__ */ jsx18(
|
|
1558
|
+
"progress",
|
|
1559
|
+
{
|
|
1560
|
+
value: clampedValue,
|
|
1561
|
+
max,
|
|
1562
|
+
"aria-label": typeof label === "string" ? label : "Progress",
|
|
1563
|
+
className: "absolute inset-0 w-full h-full opacity-0"
|
|
1564
|
+
}
|
|
1565
|
+
),
|
|
1566
|
+
/* @__PURE__ */ jsx18(
|
|
1567
|
+
"div",
|
|
1568
|
+
{
|
|
1569
|
+
className: `${sizeClasses.bar} ${variantClasses.fill} ${sizeClasses.borderRadius} transition-all duration-300 ease-out shadow-hard-shadow-3`,
|
|
1570
|
+
style: { width: `${percentage}%` }
|
|
1571
|
+
}
|
|
1572
|
+
)
|
|
1573
|
+
]
|
|
1574
|
+
}
|
|
1575
|
+
),
|
|
1576
|
+
size === "medium" && showPercentage && /* @__PURE__ */ jsxs13(
|
|
1577
|
+
Text_default,
|
|
1578
|
+
{
|
|
1579
|
+
size: sizeClasses.labelSize,
|
|
1580
|
+
weight: "medium",
|
|
1581
|
+
className: `text-text-950 text-center flex-none w-[70px] ${percentageClassName}`,
|
|
1582
|
+
children: [
|
|
1583
|
+
Math.round(percentage),
|
|
1584
|
+
"%"
|
|
1585
|
+
]
|
|
1586
|
+
}
|
|
1587
|
+
),
|
|
1588
|
+
size === "medium" && label && !showPercentage && /* @__PURE__ */ jsx18(
|
|
1589
|
+
Text_default,
|
|
1590
|
+
{
|
|
1591
|
+
as: "div",
|
|
1592
|
+
size: sizeClasses.labelSize,
|
|
1593
|
+
weight: "medium",
|
|
1594
|
+
className: `text-text-950 flex-none ${labelClassName}`,
|
|
1595
|
+
children: label
|
|
1596
|
+
}
|
|
1597
|
+
)
|
|
1598
|
+
]
|
|
1599
|
+
}
|
|
1600
|
+
);
|
|
1601
|
+
};
|
|
1602
|
+
var ProgressBar_default = ProgressBar;
|
|
1603
|
+
|
|
1462
1604
|
// src/components/DropdownMenu/DropdownMenu.tsx
|
|
1605
|
+
import { SignOut, User } from "phosphor-react";
|
|
1463
1606
|
import {
|
|
1464
|
-
createContext,
|
|
1465
|
-
useState as useState5,
|
|
1466
|
-
useCallback,
|
|
1467
|
-
useContext,
|
|
1468
1607
|
forwardRef as forwardRef9,
|
|
1469
1608
|
useEffect,
|
|
1470
1609
|
useRef,
|
|
1471
|
-
|
|
1610
|
+
isValidElement,
|
|
1611
|
+
Children,
|
|
1612
|
+
cloneElement,
|
|
1613
|
+
useState as useState5
|
|
1472
1614
|
} from "react";
|
|
1473
|
-
import {
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
)
|
|
1615
|
+
import { create as create2, useStore } from "zustand";
|
|
1616
|
+
import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1617
|
+
function createDropdownStore() {
|
|
1618
|
+
return create2((set) => ({
|
|
1619
|
+
open: false,
|
|
1620
|
+
setOpen: (open) => set({ open })
|
|
1621
|
+
}));
|
|
1622
|
+
}
|
|
1623
|
+
var useDropdownStore = (externalStore) => {
|
|
1624
|
+
if (!externalStore) {
|
|
1625
|
+
throw new Error(
|
|
1626
|
+
"Component must be used within a DropdownMenu (store is missing)"
|
|
1627
|
+
);
|
|
1628
|
+
}
|
|
1629
|
+
return externalStore;
|
|
1630
|
+
};
|
|
1631
|
+
var injectStore = (children, store) => {
|
|
1632
|
+
return Children.map(children, (child) => {
|
|
1633
|
+
if (isValidElement(child)) {
|
|
1634
|
+
const typedChild = child;
|
|
1635
|
+
const newProps = {
|
|
1636
|
+
store
|
|
1637
|
+
};
|
|
1638
|
+
if (typedChild.props.children) {
|
|
1639
|
+
newProps.children = injectStore(typedChild.props.children, store);
|
|
1640
|
+
}
|
|
1641
|
+
return cloneElement(typedChild, newProps);
|
|
1642
|
+
}
|
|
1643
|
+
return child;
|
|
1644
|
+
});
|
|
1645
|
+
};
|
|
1477
1646
|
var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
1478
|
-
const
|
|
1647
|
+
const storeRef = useRef(null);
|
|
1648
|
+
storeRef.current ??= createDropdownStore();
|
|
1649
|
+
const store = storeRef.current;
|
|
1479
1650
|
const isControlled = open !== void 0;
|
|
1480
|
-
const
|
|
1481
|
-
const
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
[isControlled, onOpenChange]
|
|
1487
|
-
);
|
|
1651
|
+
const uncontrolledOpen = useStore(store, (s) => s.open);
|
|
1652
|
+
const currentOpen = isControlled ? open : uncontrolledOpen;
|
|
1653
|
+
const setOpen = (newOpen) => {
|
|
1654
|
+
onOpenChange?.(newOpen);
|
|
1655
|
+
if (!isControlled) store.setState({ open: newOpen });
|
|
1656
|
+
};
|
|
1488
1657
|
const menuRef = useRef(null);
|
|
1489
1658
|
const handleArrowDownOrArrowUp = (event) => {
|
|
1490
1659
|
const menuContent = menuRef.current?.querySelector('[role="menu"]');
|
|
@@ -1520,6 +1689,7 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
|
1520
1689
|
}
|
|
1521
1690
|
};
|
|
1522
1691
|
useEffect(() => {
|
|
1692
|
+
onOpenChange?.(currentOpen);
|
|
1523
1693
|
if (currentOpen) {
|
|
1524
1694
|
document.addEventListener("mousedown", handleClickOutside);
|
|
1525
1695
|
document.addEventListener("keydown", handleDownkey);
|
|
@@ -1529,25 +1699,25 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
|
|
|
1529
1699
|
document.removeEventListener("keydown", handleDownkey);
|
|
1530
1700
|
};
|
|
1531
1701
|
}, [currentOpen]);
|
|
1532
|
-
|
|
1533
|
-
()
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1702
|
+
useEffect(() => {
|
|
1703
|
+
if (isControlled) {
|
|
1704
|
+
store.setState({ open });
|
|
1705
|
+
}
|
|
1706
|
+
}, []);
|
|
1707
|
+
return /* @__PURE__ */ jsx19("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
|
|
1537
1708
|
};
|
|
1538
|
-
var DropdownMenuTrigger = forwardRef9(({ className, children, onClick, ...props }, ref) => {
|
|
1539
|
-
const
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
return /* @__PURE__ */ jsx18(
|
|
1709
|
+
var DropdownMenuTrigger = forwardRef9(({ className, children, onClick, store: externalStore, ...props }, ref) => {
|
|
1710
|
+
const store = useDropdownStore(externalStore);
|
|
1711
|
+
const open = useStore(store, (s) => s.open);
|
|
1712
|
+
const toggleOpen = () => store.setState({ open: !open });
|
|
1713
|
+
return /* @__PURE__ */ jsx19(
|
|
1544
1714
|
"button",
|
|
1545
1715
|
{
|
|
1546
1716
|
ref,
|
|
1547
1717
|
className: `border border-border-200 cursor-pointer bg-background-muted hover:bg-background-200 transition-colors px-4 py-2 rounded-sm ${className}`,
|
|
1548
1718
|
onClick: (e) => {
|
|
1549
1719
|
e.stopPropagation();
|
|
1550
|
-
|
|
1720
|
+
toggleOpen();
|
|
1551
1721
|
if (onClick) onClick(e);
|
|
1552
1722
|
},
|
|
1553
1723
|
"aria-expanded": open,
|
|
@@ -1572,15 +1742,16 @@ var ALIGN_CLASSES = {
|
|
|
1572
1742
|
center: "left-1/2 -translate-x-1/2",
|
|
1573
1743
|
end: "right-0"
|
|
1574
1744
|
};
|
|
1575
|
-
var MenuLabel = forwardRef9(({ className, inset, ...props }, ref) =>
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
)
|
|
1745
|
+
var MenuLabel = forwardRef9(({ className, inset, store: _store, ...props }, ref) => {
|
|
1746
|
+
return /* @__PURE__ */ jsx19(
|
|
1747
|
+
"div",
|
|
1748
|
+
{
|
|
1749
|
+
ref,
|
|
1750
|
+
className: `text-sm w-full ${inset ? "pl-8" : ""} ${className ?? ""}`,
|
|
1751
|
+
...props
|
|
1752
|
+
}
|
|
1753
|
+
);
|
|
1754
|
+
});
|
|
1584
1755
|
MenuLabel.displayName = "MenuLabel";
|
|
1585
1756
|
var MenuContent = forwardRef9(
|
|
1586
1757
|
({
|
|
@@ -1589,9 +1760,11 @@ var MenuContent = forwardRef9(
|
|
|
1589
1760
|
side = "bottom",
|
|
1590
1761
|
sideOffset = 4,
|
|
1591
1762
|
children,
|
|
1763
|
+
store: externalStore,
|
|
1592
1764
|
...props
|
|
1593
1765
|
}, ref) => {
|
|
1594
|
-
const
|
|
1766
|
+
const store = useDropdownStore(externalStore);
|
|
1767
|
+
const open = useStore(store, (s) => s.open);
|
|
1595
1768
|
const [isVisible, setIsVisible] = useState5(open);
|
|
1596
1769
|
useEffect(() => {
|
|
1597
1770
|
if (open) {
|
|
@@ -1607,7 +1780,7 @@ var MenuContent = forwardRef9(
|
|
|
1607
1780
|
const horizontal = ALIGN_CLASSES[align];
|
|
1608
1781
|
return `absolute ${vertical} ${horizontal}`;
|
|
1609
1782
|
};
|
|
1610
|
-
return /* @__PURE__ */
|
|
1783
|
+
return /* @__PURE__ */ jsx19(
|
|
1611
1784
|
"div",
|
|
1612
1785
|
{
|
|
1613
1786
|
ref,
|
|
@@ -1634,15 +1807,18 @@ MenuContent.displayName = "MenuContent";
|
|
|
1634
1807
|
var MenuItem = forwardRef9(
|
|
1635
1808
|
({
|
|
1636
1809
|
className,
|
|
1637
|
-
inset,
|
|
1638
1810
|
size = "small",
|
|
1639
1811
|
children,
|
|
1640
1812
|
iconRight,
|
|
1641
1813
|
iconLeft,
|
|
1642
1814
|
disabled = false,
|
|
1643
1815
|
onClick,
|
|
1816
|
+
variant = "menu",
|
|
1817
|
+
store: externalStore,
|
|
1644
1818
|
...props
|
|
1645
1819
|
}, ref) => {
|
|
1820
|
+
const store = useDropdownStore(externalStore);
|
|
1821
|
+
const setOpen = useStore(store, (s) => s.setOpen);
|
|
1646
1822
|
const sizeClasses = ITEM_SIZE_CLASSES[size];
|
|
1647
1823
|
const handleClick = (e) => {
|
|
1648
1824
|
if (disabled) {
|
|
@@ -1651,17 +1827,27 @@ var MenuItem = forwardRef9(
|
|
|
1651
1827
|
return;
|
|
1652
1828
|
}
|
|
1653
1829
|
onClick?.(e);
|
|
1830
|
+
setOpen(false);
|
|
1831
|
+
};
|
|
1832
|
+
const getVariantClasses = () => {
|
|
1833
|
+
if (variant === "profile") {
|
|
1834
|
+
return "relative flex flex-row justify-between select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-6 [&>svg]:shrink-0";
|
|
1835
|
+
}
|
|
1836
|
+
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";
|
|
1837
|
+
};
|
|
1838
|
+
const getVariantProps = () => {
|
|
1839
|
+
return variant === "profile" ? { "data-variant": "profile" } : {};
|
|
1654
1840
|
};
|
|
1655
|
-
return /* @__PURE__ */
|
|
1841
|
+
return /* @__PURE__ */ jsxs14(
|
|
1656
1842
|
"div",
|
|
1657
1843
|
{
|
|
1658
1844
|
ref,
|
|
1659
1845
|
role: "menuitem",
|
|
1846
|
+
...getVariantProps(),
|
|
1660
1847
|
"aria-disabled": disabled,
|
|
1661
1848
|
className: `
|
|
1662
1849
|
focus-visible:bg-background-50
|
|
1663
|
-
|
|
1664
|
-
${inset && "pl-8"}
|
|
1850
|
+
${getVariantClasses()}
|
|
1665
1851
|
${sizeClasses}
|
|
1666
1852
|
${className}
|
|
1667
1853
|
${disabled ? "cursor-not-allowed text-text-400" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
|
|
@@ -1682,7 +1868,7 @@ var MenuItem = forwardRef9(
|
|
|
1682
1868
|
}
|
|
1683
1869
|
);
|
|
1684
1870
|
MenuItem.displayName = "MenuItem";
|
|
1685
|
-
var MenuSeparator = forwardRef9(({ className, ...props }, ref) => /* @__PURE__ */
|
|
1871
|
+
var MenuSeparator = forwardRef9(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ jsx19(
|
|
1686
1872
|
"div",
|
|
1687
1873
|
{
|
|
1688
1874
|
ref,
|
|
@@ -1691,7 +1877,376 @@ var MenuSeparator = forwardRef9(({ className, ...props }, ref) => /* @__PURE__ *
|
|
|
1691
1877
|
}
|
|
1692
1878
|
));
|
|
1693
1879
|
MenuSeparator.displayName = "MenuSeparator";
|
|
1880
|
+
var ProfileMenuTrigger = forwardRef9(({ className, onClick, store: externalStore, ...props }, ref) => {
|
|
1881
|
+
const store = useDropdownStore(externalStore);
|
|
1882
|
+
const open = useStore(store, (s) => s.open);
|
|
1883
|
+
const toggleOpen = () => store.setState({ open: !open });
|
|
1884
|
+
return /* @__PURE__ */ jsx19(
|
|
1885
|
+
"button",
|
|
1886
|
+
{
|
|
1887
|
+
ref,
|
|
1888
|
+
className: `rounded-lg size-10 bg-background-50 flex items-center justify-center ${className}`,
|
|
1889
|
+
onClick: (e) => {
|
|
1890
|
+
e.stopPropagation();
|
|
1891
|
+
toggleOpen();
|
|
1892
|
+
onClick?.(e);
|
|
1893
|
+
},
|
|
1894
|
+
"aria-expanded": open,
|
|
1895
|
+
...props,
|
|
1896
|
+
children: /* @__PURE__ */ jsx19("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ jsx19(User, { className: "text-background-950", size: 18 }) })
|
|
1897
|
+
}
|
|
1898
|
+
);
|
|
1899
|
+
});
|
|
1900
|
+
ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
|
|
1901
|
+
var ProfileMenuHeader = forwardRef9(({ className, name, email, store: _store, ...props }, ref) => {
|
|
1902
|
+
return /* @__PURE__ */ jsxs14(
|
|
1903
|
+
"div",
|
|
1904
|
+
{
|
|
1905
|
+
ref,
|
|
1906
|
+
"data-component": "ProfileMenuHeader",
|
|
1907
|
+
className: `
|
|
1908
|
+
flex flex-row gap-4 items-center
|
|
1909
|
+
${className}
|
|
1910
|
+
`,
|
|
1911
|
+
...props,
|
|
1912
|
+
children: [
|
|
1913
|
+
/* @__PURE__ */ jsx19("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx19(User, { size: 34, className: "text-background-950" }) }),
|
|
1914
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex flex-col ", children: [
|
|
1915
|
+
/* @__PURE__ */ jsx19("p", { className: "text-xl font-bold text-text-950", children: name }),
|
|
1916
|
+
/* @__PURE__ */ jsx19("p", { className: "text-md text-text-600", children: email })
|
|
1917
|
+
] })
|
|
1918
|
+
]
|
|
1919
|
+
}
|
|
1920
|
+
);
|
|
1921
|
+
});
|
|
1922
|
+
ProfileMenuHeader.displayName = "ProfileMenuHeader";
|
|
1923
|
+
var ProfileMenuSection = forwardRef9(({ className, children, store: _store, ...props }, ref) => {
|
|
1924
|
+
return /* @__PURE__ */ jsx19(
|
|
1925
|
+
"div",
|
|
1926
|
+
{
|
|
1927
|
+
ref,
|
|
1928
|
+
className: `
|
|
1929
|
+
flex flex-col p-2
|
|
1930
|
+
${className}
|
|
1931
|
+
`,
|
|
1932
|
+
...props,
|
|
1933
|
+
children
|
|
1934
|
+
}
|
|
1935
|
+
);
|
|
1936
|
+
});
|
|
1937
|
+
ProfileMenuSection.displayName = "ProfileMenuSection";
|
|
1938
|
+
var ProfileMenuFooter = forwardRef9(
|
|
1939
|
+
({ className, disabled = false, onClick, store: externalStore, ...props }, ref) => {
|
|
1940
|
+
const store = useDropdownStore(externalStore);
|
|
1941
|
+
const setOpen = useStore(store, (s) => s.setOpen);
|
|
1942
|
+
return /* @__PURE__ */ jsxs14(
|
|
1943
|
+
"button",
|
|
1944
|
+
{
|
|
1945
|
+
ref,
|
|
1946
|
+
className: `inline-flex items-center justify-center rounded-full cursor-pointer font-medium text-md px-5 py-2.5 w-full bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed ${className}`,
|
|
1947
|
+
disabled,
|
|
1948
|
+
onClick: (e) => {
|
|
1949
|
+
setOpen(false);
|
|
1950
|
+
onClick?.(e);
|
|
1951
|
+
},
|
|
1952
|
+
...props,
|
|
1953
|
+
children: [
|
|
1954
|
+
/* @__PURE__ */ jsx19("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ jsx19(SignOut, {}) }),
|
|
1955
|
+
/* @__PURE__ */ jsx19("span", { children: "Sair" })
|
|
1956
|
+
]
|
|
1957
|
+
}
|
|
1958
|
+
);
|
|
1959
|
+
}
|
|
1960
|
+
);
|
|
1961
|
+
ProfileMenuFooter.displayName = "ProfileMenuFooter";
|
|
1694
1962
|
var DropdownMenu_default = DropdownMenu;
|
|
1963
|
+
|
|
1964
|
+
// src/components/Select/Select.tsx
|
|
1965
|
+
import { create as create3, useStore as useStore2 } from "zustand";
|
|
1966
|
+
import {
|
|
1967
|
+
useEffect as useEffect2,
|
|
1968
|
+
useRef as useRef2,
|
|
1969
|
+
forwardRef as forwardRef10,
|
|
1970
|
+
isValidElement as isValidElement2,
|
|
1971
|
+
Children as Children2,
|
|
1972
|
+
cloneElement as cloneElement2
|
|
1973
|
+
} from "react";
|
|
1974
|
+
import { CaretDown, Check as Check3 } from "phosphor-react";
|
|
1975
|
+
import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1976
|
+
var VARIANT_CLASSES3 = {
|
|
1977
|
+
outlined: "border-2 rounded-sm focus:border-primary-950",
|
|
1978
|
+
underlined: "border-b-2 focus:border-primary-950",
|
|
1979
|
+
rounded: "border-2 rounded-4xl focus:border-primary-950"
|
|
1980
|
+
};
|
|
1981
|
+
var SIZE_CLASSES8 = {
|
|
1982
|
+
small: "text-sm",
|
|
1983
|
+
medium: "text-md",
|
|
1984
|
+
large: "text-lg"
|
|
1985
|
+
};
|
|
1986
|
+
var SIDE_CLASSES2 = {
|
|
1987
|
+
top: "bottom-full -translate-y-1",
|
|
1988
|
+
right: "top-full translate-y-1",
|
|
1989
|
+
bottom: "top-full translate-y-1",
|
|
1990
|
+
left: "top-full translate-y-1"
|
|
1991
|
+
};
|
|
1992
|
+
var ALIGN_CLASSES2 = {
|
|
1993
|
+
start: "left-0",
|
|
1994
|
+
center: "left-1/2 -translate-x-1/2",
|
|
1995
|
+
end: "right-0"
|
|
1996
|
+
};
|
|
1997
|
+
function createSelectStore() {
|
|
1998
|
+
return create3((set) => ({
|
|
1999
|
+
open: false,
|
|
2000
|
+
setOpen: (open) => set({ open }),
|
|
2001
|
+
value: "",
|
|
2002
|
+
setValue: (value) => set({ value }),
|
|
2003
|
+
selectedLabel: "",
|
|
2004
|
+
setSelectedLabel: (label) => set({ selectedLabel: label })
|
|
2005
|
+
}));
|
|
2006
|
+
}
|
|
2007
|
+
var useSelectStore = (externalStore) => {
|
|
2008
|
+
if (!externalStore) {
|
|
2009
|
+
throw new Error(
|
|
2010
|
+
"Component must be used within a Select (store is missing)"
|
|
2011
|
+
);
|
|
2012
|
+
}
|
|
2013
|
+
return externalStore;
|
|
2014
|
+
};
|
|
2015
|
+
function getLabelAsNode(children) {
|
|
2016
|
+
if (typeof children === "string" || typeof children === "number") {
|
|
2017
|
+
return children;
|
|
2018
|
+
}
|
|
2019
|
+
const flattened = Children2.toArray(children);
|
|
2020
|
+
if (flattened.length === 1) return flattened[0];
|
|
2021
|
+
return /* @__PURE__ */ jsx20(Fragment2, { children: flattened });
|
|
2022
|
+
}
|
|
2023
|
+
var injectStore2 = (children, store) => {
|
|
2024
|
+
return Children2.map(children, (child) => {
|
|
2025
|
+
if (isValidElement2(child)) {
|
|
2026
|
+
const typedChild = child;
|
|
2027
|
+
const newProps = {
|
|
2028
|
+
store
|
|
2029
|
+
};
|
|
2030
|
+
if (typedChild.props.children) {
|
|
2031
|
+
newProps.children = injectStore2(typedChild.props.children, store);
|
|
2032
|
+
}
|
|
2033
|
+
return cloneElement2(typedChild, newProps);
|
|
2034
|
+
}
|
|
2035
|
+
return child;
|
|
2036
|
+
});
|
|
2037
|
+
};
|
|
2038
|
+
var Select = ({
|
|
2039
|
+
children,
|
|
2040
|
+
defaultValue = "",
|
|
2041
|
+
value: propValue,
|
|
2042
|
+
onValueChange,
|
|
2043
|
+
size = "small"
|
|
2044
|
+
}) => {
|
|
2045
|
+
const storeRef = useRef2(null);
|
|
2046
|
+
storeRef.current ??= createSelectStore();
|
|
2047
|
+
const store = storeRef.current;
|
|
2048
|
+
const selectRef = useRef2(null);
|
|
2049
|
+
const { open, setOpen, setValue, value, selectedLabel } = useStore2(
|
|
2050
|
+
store,
|
|
2051
|
+
(s) => s
|
|
2052
|
+
);
|
|
2053
|
+
const isControlled = propValue !== void 0;
|
|
2054
|
+
const currentValue = isControlled ? propValue : value;
|
|
2055
|
+
const findLabelForValue = (children2, targetValue) => {
|
|
2056
|
+
let found = null;
|
|
2057
|
+
const search = (nodes) => {
|
|
2058
|
+
Children2.forEach(nodes, (child) => {
|
|
2059
|
+
if (!isValidElement2(child)) return;
|
|
2060
|
+
const typedChild = child;
|
|
2061
|
+
if (typedChild.type === SelectItem && typedChild.props.value === targetValue) {
|
|
2062
|
+
if (typeof typedChild.props.children === "string")
|
|
2063
|
+
found = typedChild.props.children;
|
|
2064
|
+
}
|
|
2065
|
+
if (typedChild.props.children && !found)
|
|
2066
|
+
search(typedChild.props.children);
|
|
2067
|
+
});
|
|
2068
|
+
};
|
|
2069
|
+
search(children2);
|
|
2070
|
+
return found;
|
|
2071
|
+
};
|
|
2072
|
+
useEffect2(() => {
|
|
2073
|
+
if (!selectedLabel && defaultValue) {
|
|
2074
|
+
const label = findLabelForValue(children, defaultValue);
|
|
2075
|
+
if (label) store.setState({ selectedLabel: label });
|
|
2076
|
+
}
|
|
2077
|
+
}, [children, defaultValue, selectedLabel]);
|
|
2078
|
+
useEffect2(() => {
|
|
2079
|
+
setValue(currentValue);
|
|
2080
|
+
const handleClickOutside = (event) => {
|
|
2081
|
+
if (selectRef.current && !selectRef.current.contains(event.target)) {
|
|
2082
|
+
setOpen(false);
|
|
2083
|
+
}
|
|
2084
|
+
};
|
|
2085
|
+
const handleArrowKeys = (event) => {
|
|
2086
|
+
const selectContent = selectRef.current?.querySelector('[role="menu"]');
|
|
2087
|
+
if (selectContent) {
|
|
2088
|
+
event.preventDefault();
|
|
2089
|
+
const items = Array.from(
|
|
2090
|
+
selectContent.querySelectorAll(
|
|
2091
|
+
'[role="menuitem"]:not([aria-disabled="true"])'
|
|
2092
|
+
)
|
|
2093
|
+
).filter((el) => el instanceof HTMLElement);
|
|
2094
|
+
const focused = document.activeElement;
|
|
2095
|
+
const currentIndex = items.findIndex((item) => item === focused);
|
|
2096
|
+
let nextIndex = 0;
|
|
2097
|
+
if (event.key === "ArrowDown") {
|
|
2098
|
+
nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
|
|
2099
|
+
} else {
|
|
2100
|
+
nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
|
|
2101
|
+
}
|
|
2102
|
+
items[nextIndex]?.focus();
|
|
2103
|
+
}
|
|
2104
|
+
};
|
|
2105
|
+
if (open) {
|
|
2106
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
2107
|
+
document.addEventListener("keydown", handleArrowKeys);
|
|
2108
|
+
}
|
|
2109
|
+
return () => {
|
|
2110
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
2111
|
+
document.removeEventListener("keydown", handleArrowKeys);
|
|
2112
|
+
};
|
|
2113
|
+
}, [open]);
|
|
2114
|
+
useEffect2(() => {
|
|
2115
|
+
if (onValueChange) {
|
|
2116
|
+
onValueChange(value);
|
|
2117
|
+
}
|
|
2118
|
+
}, [value]);
|
|
2119
|
+
const sizeClasses = SIZE_CLASSES8[size];
|
|
2120
|
+
return /* @__PURE__ */ jsx20("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore2(children, store) });
|
|
2121
|
+
};
|
|
2122
|
+
var SelectValue = ({
|
|
2123
|
+
placeholder,
|
|
2124
|
+
store: externalStore
|
|
2125
|
+
}) => {
|
|
2126
|
+
const store = useSelectStore(externalStore);
|
|
2127
|
+
const selectedLabel = useStore2(store, (s) => s.selectedLabel);
|
|
2128
|
+
const value = useStore2(store, (s) => s.value);
|
|
2129
|
+
return /* @__PURE__ */ jsx20("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
|
|
2130
|
+
};
|
|
2131
|
+
var SelectTrigger = forwardRef10(
|
|
2132
|
+
({
|
|
2133
|
+
className,
|
|
2134
|
+
invalid = false,
|
|
2135
|
+
variant = "outlined",
|
|
2136
|
+
store: externalStore,
|
|
2137
|
+
disabled,
|
|
2138
|
+
...props
|
|
2139
|
+
}, ref) => {
|
|
2140
|
+
const store = useSelectStore(externalStore);
|
|
2141
|
+
const open = useStore2(store, (s) => s.open);
|
|
2142
|
+
const toggleOpen = () => store.setState({ open: !open });
|
|
2143
|
+
const variantClasses = VARIANT_CLASSES3[variant];
|
|
2144
|
+
return /* @__PURE__ */ jsxs15(
|
|
2145
|
+
"button",
|
|
2146
|
+
{
|
|
2147
|
+
ref,
|
|
2148
|
+
className: `
|
|
2149
|
+
flex h-9 min-w-[220px] w-full items-center justify-between border-border-300 px-3 py-2
|
|
2150
|
+
${invalid && "border-indicator-error"}
|
|
2151
|
+
${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
|
|
2152
|
+
${variantClasses}
|
|
2153
|
+
${className}
|
|
2154
|
+
`,
|
|
2155
|
+
onClick: toggleOpen,
|
|
2156
|
+
"aria-expanded": open,
|
|
2157
|
+
"aria-haspopup": "listbox",
|
|
2158
|
+
"aria-controls": open ? "select-content" : void 0,
|
|
2159
|
+
...props,
|
|
2160
|
+
children: [
|
|
2161
|
+
props.children,
|
|
2162
|
+
/* @__PURE__ */ jsx20(
|
|
2163
|
+
CaretDown,
|
|
2164
|
+
{
|
|
2165
|
+
className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
|
|
2166
|
+
}
|
|
2167
|
+
)
|
|
2168
|
+
]
|
|
2169
|
+
}
|
|
2170
|
+
);
|
|
2171
|
+
}
|
|
2172
|
+
);
|
|
2173
|
+
SelectTrigger.displayName = "SelectTrigger";
|
|
2174
|
+
var SelectContent = forwardRef10(
|
|
2175
|
+
({
|
|
2176
|
+
children,
|
|
2177
|
+
className,
|
|
2178
|
+
align = "start",
|
|
2179
|
+
side = "bottom",
|
|
2180
|
+
store: externalStore,
|
|
2181
|
+
...props
|
|
2182
|
+
}, ref) => {
|
|
2183
|
+
const store = useSelectStore(externalStore);
|
|
2184
|
+
const open = useStore2(store, (s) => s.open);
|
|
2185
|
+
if (!open) return null;
|
|
2186
|
+
const getPositionClasses = () => `absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
|
|
2187
|
+
return /* @__PURE__ */ jsx20(
|
|
2188
|
+
"div",
|
|
2189
|
+
{
|
|
2190
|
+
role: "menu",
|
|
2191
|
+
ref,
|
|
2192
|
+
className: `bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100 ${getPositionClasses()} ${className}`,
|
|
2193
|
+
...props,
|
|
2194
|
+
children
|
|
2195
|
+
}
|
|
2196
|
+
);
|
|
2197
|
+
}
|
|
2198
|
+
);
|
|
2199
|
+
SelectContent.displayName = "SelectContent";
|
|
2200
|
+
var SelectItem = forwardRef10(
|
|
2201
|
+
({
|
|
2202
|
+
className,
|
|
2203
|
+
children,
|
|
2204
|
+
value,
|
|
2205
|
+
disabled = false,
|
|
2206
|
+
store: externalStore,
|
|
2207
|
+
...props
|
|
2208
|
+
}, ref) => {
|
|
2209
|
+
const store = useSelectStore(externalStore);
|
|
2210
|
+
const selectedValue = useStore2(store, (s) => s.value);
|
|
2211
|
+
const { setValue, setSelectedLabel, setOpen } = store.getState();
|
|
2212
|
+
const handleClick = (e) => {
|
|
2213
|
+
const labelNode = getLabelAsNode(children);
|
|
2214
|
+
if (!disabled) {
|
|
2215
|
+
setValue(value);
|
|
2216
|
+
setSelectedLabel(labelNode);
|
|
2217
|
+
setOpen(false);
|
|
2218
|
+
}
|
|
2219
|
+
props.onClick?.(e);
|
|
2220
|
+
};
|
|
2221
|
+
return /* @__PURE__ */ jsxs15(
|
|
2222
|
+
"div",
|
|
2223
|
+
{
|
|
2224
|
+
role: "menuitem",
|
|
2225
|
+
"aria-disabled": disabled,
|
|
2226
|
+
ref,
|
|
2227
|
+
className: `
|
|
2228
|
+
focus-visible:bg-background-50
|
|
2229
|
+
relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
|
|
2230
|
+
${className}
|
|
2231
|
+
${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
|
|
2232
|
+
${selectedValue === value && "bg-background-50"}
|
|
2233
|
+
`,
|
|
2234
|
+
onClick: handleClick,
|
|
2235
|
+
onKeyDown: (e) => {
|
|
2236
|
+
if (e.key === "Enter" || e.key === " ") handleClick(e);
|
|
2237
|
+
},
|
|
2238
|
+
tabIndex: disabled ? -1 : 0,
|
|
2239
|
+
...props,
|
|
2240
|
+
children: [
|
|
2241
|
+
/* @__PURE__ */ jsx20("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ jsx20(Check3, { className: "" }) }),
|
|
2242
|
+
children
|
|
2243
|
+
]
|
|
2244
|
+
}
|
|
2245
|
+
);
|
|
2246
|
+
}
|
|
2247
|
+
);
|
|
2248
|
+
SelectItem.displayName = "SelectItem";
|
|
2249
|
+
var Select_default = Select;
|
|
1695
2250
|
export {
|
|
1696
2251
|
Alert_default as Alert,
|
|
1697
2252
|
Badge_default as Badge,
|
|
@@ -1700,16 +2255,26 @@ export {
|
|
|
1700
2255
|
Chips_default as Chips,
|
|
1701
2256
|
Divider_default as Divider,
|
|
1702
2257
|
DropdownMenu_default as DropdownMenu,
|
|
1703
|
-
MenuContent as DropdownMenuContent,
|
|
1704
|
-
MenuItem as DropdownMenuItem,
|
|
1705
|
-
MenuLabel as DropdownMenuLabel,
|
|
1706
|
-
MenuSeparator as DropdownMenuSeparator,
|
|
1707
2258
|
DropdownMenuTrigger,
|
|
1708
2259
|
IconButton_default as IconButton,
|
|
1709
2260
|
IconRoundedButton_default as IconRoundedButton,
|
|
1710
2261
|
Input_default as Input,
|
|
2262
|
+
MenuContent,
|
|
2263
|
+
MenuItem,
|
|
2264
|
+
MenuLabel,
|
|
2265
|
+
MenuSeparator,
|
|
1711
2266
|
NavButton_default as NavButton,
|
|
2267
|
+
ProfileMenuFooter,
|
|
2268
|
+
ProfileMenuHeader,
|
|
2269
|
+
ProfileMenuSection,
|
|
2270
|
+
ProfileMenuTrigger,
|
|
2271
|
+
ProgressBar_default as ProgressBar,
|
|
1712
2272
|
Radio_default as Radio,
|
|
2273
|
+
Select_default as Select,
|
|
2274
|
+
SelectContent,
|
|
2275
|
+
SelectItem,
|
|
2276
|
+
SelectTrigger,
|
|
2277
|
+
SelectValue,
|
|
1713
2278
|
SelectionButton_default as SelectionButton,
|
|
1714
2279
|
Table_default as Table,
|
|
1715
2280
|
Text_default as Text,
|