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/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
- useMemo as useMemo2
1610
+ isValidElement,
1611
+ Children,
1612
+ cloneElement,
1613
+ useState as useState5
1472
1614
  } from "react";
1473
- import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
1474
- var DropdownMenuContext = createContext(
1475
- void 0
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 [internalOpen, setInternalOpen] = useState5(false);
1647
+ const storeRef = useRef(null);
1648
+ storeRef.current ??= createDropdownStore();
1649
+ const store = storeRef.current;
1479
1650
  const isControlled = open !== void 0;
1480
- const currentOpen = isControlled ? open : internalOpen;
1481
- const setOpen = useCallback(
1482
- (newOpen) => {
1483
- if (onOpenChange) onOpenChange(newOpen);
1484
- if (!isControlled) setInternalOpen(newOpen);
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
- const value = useMemo2(
1533
- () => ({ open: currentOpen, setOpen }),
1534
- [currentOpen, setOpen]
1535
- );
1536
- return /* @__PURE__ */ jsx18(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ jsx18("div", { className: "relative", ref: menuRef, children }) });
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 context = useContext(DropdownMenuContext);
1540
- if (!context)
1541
- throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
1542
- const { open, setOpen } = context;
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
- setOpen(!open);
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) => /* @__PURE__ */ jsx18(
1576
- "fieldset",
1577
- {
1578
- ref,
1579
- role: "group",
1580
- className: `text-sm w-full ${inset ? "pl-8" : ""} ${className ?? ""}`,
1581
- ...props
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 { open } = useContext(DropdownMenuContext);
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__ */ jsx18(
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__ */ jsxs13(
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
- relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
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__ */ jsx18(
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,