analytica-frontend-lib 1.0.34 → 1.0.36

package/dist/index.js

@@ -27,16 +27,26 @@ __export(src_exports, {
   Chips: () => Chips_default,
   Divider: () => Divider_default,
   DropdownMenu: () => DropdownMenu_default,
-  DropdownMenuContent: () => MenuContent,
-  DropdownMenuItem: () => MenuItem,
-  DropdownMenuLabel: () => MenuLabel,
-  DropdownMenuSeparator: () => MenuSeparator,
   DropdownMenuTrigger: () => DropdownMenuTrigger,
   IconButton: () => IconButton_default,
   IconRoundedButton: () => IconRoundedButton_default,
   Input: () => Input_default,
+  MenuContent: () => MenuContent,
+  MenuItem: () => MenuItem,
+  MenuLabel: () => MenuLabel,
+  MenuSeparator: () => MenuSeparator,
   NavButton: () => NavButton_default,
+  ProfileMenuFooter: () => ProfileMenuFooter,
+  ProfileMenuHeader: () => ProfileMenuHeader,
+  ProfileMenuSection: () => ProfileMenuSection,
+  ProfileMenuTrigger: () => ProfileMenuTrigger,
+  ProgressBar: () => ProgressBar_default,
   Radio: () => Radio_default,
+  Select: () => Select_default,
+  SelectContent: () => SelectContent,
+  SelectItem: () => SelectItem,
+  SelectTrigger: () => SelectTrigger,
+  SelectValue: () => SelectValue,
   SelectionButton: () => SelectionButton_default,
   Table: () => Table_default,
   Text: () => Text_default,
@@ -1491,23 +1501,193 @@ var Chips = ({
 };
 var Chips_default = Chips;
 
+// src/components/ProgressBar/ProgressBar.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var SIZE_CLASSES7 = {
+  small: {
+    container: "h-1",
+    // 4px height (h-1 = 4px in Tailwind)
+    bar: "h-1",
+    // 4px height for the fill bar
+    labelSize: "xs",
+    spacing: "gap-2",
+    // 8px gap between label and progress bar
+    layout: "flex-col",
+    // vertical layout for small
+    borderRadius: "rounded-full"
+    // 9999px border radius
+  },
+  medium: {
+    container: "h-2",
+    // 8px height (h-2 = 8px in Tailwind)
+    bar: "h-2",
+    // 8px height for the fill bar
+    labelSize: "xs",
+    // 12px font size (xs in Tailwind)
+    spacing: "gap-2",
+    // 8px gap between progress bar and label
+    layout: "flex-row items-center",
+    // horizontal layout for medium
+    borderRadius: "rounded-lg"
+    // 8px border radius
+  }
+};
+var VARIANT_CLASSES2 = {
+  blue: {
+    background: "bg-background-300",
+    // Background track color (#D5D4D4)
+    fill: "bg-primary-700"
+    // Blue for activity progress (#2271C4)
+  },
+  green: {
+    background: "bg-background-300",
+    // Background track color (#D5D4D4)
+    fill: "bg-success-200"
+    // Green for performance (#84D3A2)
+  }
+};
+var ProgressBar = ({
+  value,
+  max = 100,
+  size = "medium",
+  variant = "blue",
+  label,
+  showPercentage = false,
+  className = "",
+  labelClassName = "",
+  percentageClassName = ""
+}) => {
+  const safeValue = isNaN(value) ? 0 : value;
+  const clampedValue = Math.max(0, Math.min(safeValue, max));
+  const percentage = max === 0 ? 0 : clampedValue / max * 100;
+  const sizeClasses = SIZE_CLASSES7[size];
+  const variantClasses = VARIANT_CLASSES2[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      className: `flex ${sizeClasses.layout} ${sizeClasses.spacing} ${className}`,
+      children: [
+        size === "small" && (label || showPercentage) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-row items-center justify-between w-full", children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            Text_default,
+            {
+              as: "div",
+              size: sizeClasses.labelSize,
+              weight: "medium",
+              className: `text-text-950 ${labelClassName}`,
+              children: label
+            }
+          ),
+          showPercentage && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            Text_default,
+            {
+              size: sizeClasses.labelSize,
+              weight: "medium",
+              className: `text-text-700 text-center ${percentageClassName}`,
+              children: [
+                Math.round(percentage),
+                "%"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          "div",
+          {
+            className: `${size === "medium" ? "flex-grow" : "w-full"} ${sizeClasses.container} ${variantClasses.background} ${sizeClasses.borderRadius} overflow-hidden relative`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                "progress",
+                {
+                  value: clampedValue,
+                  max,
+                  "aria-label": typeof label === "string" ? label : "Progress",
+                  className: "absolute inset-0 w-full h-full opacity-0"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                "div",
+                {
+                  className: `${sizeClasses.bar} ${variantClasses.fill} ${sizeClasses.borderRadius} transition-all duration-300 ease-out shadow-hard-shadow-3`,
+                  style: { width: `${percentage}%` }
+                }
+              )
+            ]
+          }
+        ),
+        size === "medium" && showPercentage && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          Text_default,
+          {
+            size: sizeClasses.labelSize,
+            weight: "medium",
+            className: `text-text-950 text-center flex-none w-[70px] ${percentageClassName}`,
+            children: [
+              Math.round(percentage),
+              "%"
+            ]
+          }
+        ),
+        size === "medium" && label && !showPercentage && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          Text_default,
+          {
+            as: "div",
+            size: sizeClasses.labelSize,
+            weight: "medium",
+            className: `text-text-950 flex-none ${labelClassName}`,
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+var ProgressBar_default = ProgressBar;
+
 // src/components/DropdownMenu/DropdownMenu.tsx
+var import_phosphor_react7 = require("phosphor-react");
 var import_react9 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var DropdownMenuContext = (0, import_react9.createContext)(
-  void 0
-);
+var import_zustand2 = require("zustand");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function createDropdownStore() {
+  return (0, import_zustand2.create)((set) => ({
+    open: false,
+    setOpen: (open) => set({ open })
+  }));
+}
+var useDropdownStore = (externalStore) => {
+  if (!externalStore) {
+    throw new Error(
+      "Component must be used within a DropdownMenu (store is missing)"
+    );
+  }
+  return externalStore;
+};
+var injectStore = (children, store) => {
+  return import_react9.Children.map(children, (child) => {
+    if ((0, import_react9.isValidElement)(child)) {
+      const typedChild = child;
+      const newProps = {
+        store
+      };
+      if (typedChild.props.children) {
+        newProps.children = injectStore(typedChild.props.children, store);
+      }
+      return (0, import_react9.cloneElement)(typedChild, newProps);
+    }
+    return child;
+  });
+};
 var DropdownMenu = ({ children, open, onOpenChange }) => {
-  const [internalOpen, setInternalOpen] = (0, import_react9.useState)(false);
+  const storeRef = (0, import_react9.useRef)(null);
+  storeRef.current ??= createDropdownStore();
+  const store = storeRef.current;
   const isControlled = open !== void 0;
-  const currentOpen = isControlled ? open : internalOpen;
-  const setOpen = (0, import_react9.useCallback)(
-    (newOpen) => {
-      if (onOpenChange) onOpenChange(newOpen);
-      if (!isControlled) setInternalOpen(newOpen);
-    },
-    [isControlled, onOpenChange]
-  );
+  const uncontrolledOpen = (0, import_zustand2.useStore)(store, (s) => s.open);
+  const currentOpen = isControlled ? open : uncontrolledOpen;
+  const setOpen = (newOpen) => {
+    onOpenChange?.(newOpen);
+    if (!isControlled) store.setState({ open: newOpen });
+  };
   const menuRef = (0, import_react9.useRef)(null);
   const handleArrowDownOrArrowUp = (event) => {
     const menuContent = menuRef.current?.querySelector('[role="menu"]');
@@ -1543,6 +1723,7 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
     }
   };
   (0, import_react9.useEffect)(() => {
+    onOpenChange?.(currentOpen);
     if (currentOpen) {
       document.addEventListener("mousedown", handleClickOutside);
       document.addEventListener("keydown", handleDownkey);
@@ -1552,25 +1733,25 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
       document.removeEventListener("keydown", handleDownkey);
     };
   }, [currentOpen]);
-  const value = (0, import_react9.useMemo)(
-    () => ({ open: currentOpen, setOpen }),
-    [currentOpen, setOpen]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "relative", ref: menuRef, children }) });
+  (0, import_react9.useEffect)(() => {
+    if (isControlled) {
+      store.setState({ open });
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
 };
-var DropdownMenuTrigger = (0, import_react9.forwardRef)(({ className, children, onClick, ...props }, ref) => {
-  const context = (0, import_react9.useContext)(DropdownMenuContext);
-  if (!context)
-    throw new Error("DropdownMenuTrigger must be used within a DropdownMenu");
-  const { open, setOpen } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var DropdownMenuTrigger = (0, import_react9.forwardRef)(({ className, children, onClick, store: externalStore, ...props }, ref) => {
+  const store = useDropdownStore(externalStore);
+  const open = (0, import_zustand2.useStore)(store, (s) => s.open);
+  const toggleOpen = () => store.setState({ open: !open });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "button",
     {
       ref,
       className: `border border-border-200 cursor-pointer bg-background-muted hover:bg-background-200 transition-colors px-4 py-2 rounded-sm ${className}`,
       onClick: (e) => {
         e.stopPropagation();
-        setOpen(!open);
+        toggleOpen();
         if (onClick) onClick(e);
       },
       "aria-expanded": open,
@@ -1595,15 +1776,16 @@ var ALIGN_CLASSES = {
   center: "left-1/2 -translate-x-1/2",
   end: "right-0"
 };
-var MenuLabel = (0, import_react9.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-  "fieldset",
-  {
-    ref,
-    role: "group",
-    className: `text-sm w-full ${inset ? "pl-8" : ""} ${className ?? ""}`,
-    ...props
-  }
-));
+var MenuLabel = (0, import_react9.forwardRef)(({ className, inset, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "div",
+    {
+      ref,
+      className: `text-sm w-full ${inset ? "pl-8" : ""} ${className ?? ""}`,
+      ...props
+    }
+  );
+});
 MenuLabel.displayName = "MenuLabel";
 var MenuContent = (0, import_react9.forwardRef)(
   ({
@@ -1612,9 +1794,11 @@ var MenuContent = (0, import_react9.forwardRef)(
     side = "bottom",
     sideOffset = 4,
     children,
+    store: externalStore,
     ...props
   }, ref) => {
-    const { open } = (0, import_react9.useContext)(DropdownMenuContext);
+    const store = useDropdownStore(externalStore);
+    const open = (0, import_zustand2.useStore)(store, (s) => s.open);
     const [isVisible, setIsVisible] = (0, import_react9.useState)(open);
     (0, import_react9.useEffect)(() => {
       if (open) {
@@ -1630,7 +1814,7 @@ var MenuContent = (0, import_react9.forwardRef)(
       const horizontal = ALIGN_CLASSES[align];
       return `absolute ${vertical} ${horizontal}`;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         ref,
@@ -1657,15 +1841,18 @@ MenuContent.displayName = "MenuContent";
 var MenuItem = (0, import_react9.forwardRef)(
   ({
     className,
-    inset,
     size = "small",
     children,
     iconRight,
     iconLeft,
     disabled = false,
     onClick,
+    variant = "menu",
+    store: externalStore,
     ...props
   }, ref) => {
+    const store = useDropdownStore(externalStore);
+    const setOpen = (0, import_zustand2.useStore)(store, (s) => s.setOpen);
     const sizeClasses = ITEM_SIZE_CLASSES[size];
     const handleClick = (e) => {
       if (disabled) {
@@ -1674,17 +1861,27 @@ var MenuItem = (0, import_react9.forwardRef)(
         return;
       }
       onClick?.(e);
+      setOpen(false);
+    };
+    const getVariantClasses = () => {
+      if (variant === "profile") {
+        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";
+      }
+      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";
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    const getVariantProps = () => {
+      return variant === "profile" ? { "data-variant": "profile" } : {};
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "div",
       {
         ref,
         role: "menuitem",
+        ...getVariantProps(),
         "aria-disabled": disabled,
         className: `
           focus-visible:bg-background-50
-          relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
-          ${inset && "pl-8"}
+           ${getVariantClasses()}
           ${sizeClasses}
           ${className}
           ${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"}
@@ -1705,7 +1902,7 @@ var MenuItem = (0, import_react9.forwardRef)(
   }
 );
 MenuItem.displayName = "MenuItem";
-var MenuSeparator = (0, import_react9.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var MenuSeparator = (0, import_react9.forwardRef)(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   "div",
   {
     ref,
@@ -1714,7 +1911,369 @@ var MenuSeparator = (0, import_react9.forwardRef)(({ className, ...props }, ref)
   }
 ));
 MenuSeparator.displayName = "MenuSeparator";
+var ProfileMenuTrigger = (0, import_react9.forwardRef)(({ className, onClick, store: externalStore, ...props }, ref) => {
+  const store = useDropdownStore(externalStore);
+  const open = (0, import_zustand2.useStore)(store, (s) => s.open);
+  const toggleOpen = () => store.setState({ open: !open });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "button",
+    {
+      ref,
+      className: `rounded-lg size-10 bg-background-50 flex items-center justify-center ${className}`,
+      onClick: (e) => {
+        e.stopPropagation();
+        toggleOpen();
+        onClick?.(e);
+      },
+      "aria-expanded": open,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "size-6 rounded-full bg-background-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_phosphor_react7.User, { className: "text-background-950", size: 18 }) })
+    }
+  );
+});
+ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
+var ProfileMenuHeader = (0, import_react9.forwardRef)(({ className, name, email, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    "div",
+    {
+      ref,
+      "data-component": "ProfileMenuHeader",
+      className: `
+          flex flex-row gap-4 items-center
+          ${className}
+        `,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "size-16 bg-background-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_phosphor_react7.User, { size: 34, className: "text-background-950" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col ", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-xl font-bold text-text-950", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-md text-text-600", children: email })
+        ] })
+      ]
+    }
+  );
+});
+ProfileMenuHeader.displayName = "ProfileMenuHeader";
+var ProfileMenuSection = (0, import_react9.forwardRef)(({ className, children, store: _store, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "div",
+    {
+      ref,
+      className: `
+          flex flex-col p-2
+          ${className}
+        `,
+      ...props,
+      children
+    }
+  );
+});
+ProfileMenuSection.displayName = "ProfileMenuSection";
+var ProfileMenuFooter = (0, import_react9.forwardRef)(
+  ({ className, disabled = false, onClick, store: externalStore, ...props }, ref) => {
+    const store = useDropdownStore(externalStore);
+    const setOpen = (0, import_zustand2.useStore)(store, (s) => s.setOpen);
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      "button",
+      {
+        ref,
+        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}`,
+        disabled,
+        onClick: (e) => {
+          setOpen(false);
+          onClick?.(e);
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_phosphor_react7.SignOut, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Sair" })
+        ]
+      }
+    );
+  }
+);
+ProfileMenuFooter.displayName = "ProfileMenuFooter";
 var DropdownMenu_default = DropdownMenu;
+
+// src/components/Select/Select.tsx
+var import_zustand3 = require("zustand");
+var import_react10 = require("react");
+var import_phosphor_react8 = require("phosphor-react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var VARIANT_CLASSES3 = {
+  outlined: "border-2 rounded-sm focus:border-primary-950",
+  underlined: "border-b-2 focus:border-primary-950",
+  rounded: "border-2 rounded-4xl focus:border-primary-950"
+};
+var SIZE_CLASSES8 = {
+  small: "text-sm",
+  medium: "text-md",
+  large: "text-lg"
+};
+var SIDE_CLASSES2 = {
+  top: "bottom-full -translate-y-1",
+  right: "top-full translate-y-1",
+  bottom: "top-full translate-y-1",
+  left: "top-full translate-y-1"
+};
+var ALIGN_CLASSES2 = {
+  start: "left-0",
+  center: "left-1/2 -translate-x-1/2",
+  end: "right-0"
+};
+function createSelectStore() {
+  return (0, import_zustand3.create)((set) => ({
+    open: false,
+    setOpen: (open) => set({ open }),
+    value: "",
+    setValue: (value) => set({ value }),
+    selectedLabel: "",
+    setSelectedLabel: (label) => set({ selectedLabel: label })
+  }));
+}
+var useSelectStore = (externalStore) => {
+  if (!externalStore) {
+    throw new Error(
+      "Component must be used within a Select (store is missing)"
+    );
+  }
+  return externalStore;
+};
+function getLabelAsNode(children) {
+  if (typeof children === "string" || typeof children === "number") {
+    return children;
+  }
+  const flattened = import_react10.Children.toArray(children);
+  if (flattened.length === 1) return flattened[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: flattened });
+}
+var injectStore2 = (children, store) => {
+  return import_react10.Children.map(children, (child) => {
+    if ((0, import_react10.isValidElement)(child)) {
+      const typedChild = child;
+      const newProps = {
+        store
+      };
+      if (typedChild.props.children) {
+        newProps.children = injectStore2(typedChild.props.children, store);
+      }
+      return (0, import_react10.cloneElement)(typedChild, newProps);
+    }
+    return child;
+  });
+};
+var Select = ({
+  children,
+  defaultValue = "",
+  value: propValue,
+  onValueChange,
+  size = "small"
+}) => {
+  const storeRef = (0, import_react10.useRef)(null);
+  storeRef.current ??= createSelectStore();
+  const store = storeRef.current;
+  const selectRef = (0, import_react10.useRef)(null);
+  const { open, setOpen, setValue, value, selectedLabel } = (0, import_zustand3.useStore)(
+    store,
+    (s) => s
+  );
+  const isControlled = propValue !== void 0;
+  const currentValue = isControlled ? propValue : value;
+  const findLabelForValue = (children2, targetValue) => {
+    let found = null;
+    const search = (nodes) => {
+      import_react10.Children.forEach(nodes, (child) => {
+        if (!(0, import_react10.isValidElement)(child)) return;
+        const typedChild = child;
+        if (typedChild.type === SelectItem && typedChild.props.value === targetValue) {
+          if (typeof typedChild.props.children === "string")
+            found = typedChild.props.children;
+        }
+        if (typedChild.props.children && !found)
+          search(typedChild.props.children);
+      });
+    };
+    search(children2);
+    return found;
+  };
+  (0, import_react10.useEffect)(() => {
+    if (!selectedLabel && defaultValue) {
+      const label = findLabelForValue(children, defaultValue);
+      if (label) store.setState({ selectedLabel: label });
+    }
+  }, [children, defaultValue, selectedLabel]);
+  (0, import_react10.useEffect)(() => {
+    setValue(currentValue);
+    const handleClickOutside = (event) => {
+      if (selectRef.current && !selectRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const handleArrowKeys = (event) => {
+      const selectContent = selectRef.current?.querySelector('[role="menu"]');
+      if (selectContent) {
+        event.preventDefault();
+        const items = Array.from(
+          selectContent.querySelectorAll(
+            '[role="menuitem"]:not([aria-disabled="true"])'
+          )
+        ).filter((el) => el instanceof HTMLElement);
+        const focused = document.activeElement;
+        const currentIndex = items.findIndex((item) => item === focused);
+        let nextIndex = 0;
+        if (event.key === "ArrowDown") {
+          nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+        } else {
+          nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+        }
+        items[nextIndex]?.focus();
+      }
+    };
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleArrowKeys);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleArrowKeys);
+    };
+  }, [open]);
+  (0, import_react10.useEffect)(() => {
+    if (onValueChange) {
+      onValueChange(value);
+    }
+  }, [value]);
+  const sizeClasses = SIZE_CLASSES8[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore2(children, store) });
+};
+var SelectValue = ({
+  placeholder,
+  store: externalStore
+}) => {
+  const store = useSelectStore(externalStore);
+  const selectedLabel = (0, import_zustand3.useStore)(store, (s) => s.selectedLabel);
+  const value = (0, import_zustand3.useStore)(store, (s) => s.value);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
+};
+var SelectTrigger = (0, import_react10.forwardRef)(
+  ({
+    className,
+    invalid = false,
+    variant = "outlined",
+    store: externalStore,
+    disabled,
+    ...props
+  }, ref) => {
+    const store = useSelectStore(externalStore);
+    const open = (0, import_zustand3.useStore)(store, (s) => s.open);
+    const toggleOpen = () => store.setState({ open: !open });
+    const variantClasses = VARIANT_CLASSES3[variant];
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "button",
+      {
+        ref,
+        className: `
+        flex h-9 min-w-[220px] w-full items-center justify-between border-border-300 px-3 py-2
+        ${invalid && "border-indicator-error"}
+        ${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"}
+        ${variantClasses}
+        ${className}
+      `,
+        onClick: toggleOpen,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": open ? "select-content" : void 0,
+        ...props,
+        children: [
+          props.children,
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_phosphor_react8.CaretDown,
+            {
+              className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = (0, import_react10.forwardRef)(
+  ({
+    children,
+    className,
+    align = "start",
+    side = "bottom",
+    store: externalStore,
+    ...props
+  }, ref) => {
+    const store = useSelectStore(externalStore);
+    const open = (0, import_zustand3.useStore)(store, (s) => s.open);
+    if (!open) return null;
+    const getPositionClasses = () => `absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "div",
+      {
+        role: "menu",
+        ref,
+        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}`,
+        ...props,
+        children
+      }
+    );
+  }
+);
+SelectContent.displayName = "SelectContent";
+var SelectItem = (0, import_react10.forwardRef)(
+  ({
+    className,
+    children,
+    value,
+    disabled = false,
+    store: externalStore,
+    ...props
+  }, ref) => {
+    const store = useSelectStore(externalStore);
+    const selectedValue = (0, import_zustand3.useStore)(store, (s) => s.value);
+    const { setValue, setSelectedLabel, setOpen } = store.getState();
+    const handleClick = (e) => {
+      const labelNode = getLabelAsNode(children);
+      if (!disabled) {
+        setValue(value);
+        setSelectedLabel(labelNode);
+        setOpen(false);
+      }
+      props.onClick?.(e);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "div",
+      {
+        role: "menuitem",
+        "aria-disabled": disabled,
+        ref,
+        className: `
+          focus-visible:bg-background-50
+          relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
+          ${className}
+          ${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"}
+          ${selectedValue === value && "bg-background-50"}
+        `,
+        onClick: handleClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") handleClick(e);
+        },
+        tabIndex: disabled ? -1 : 0,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_phosphor_react8.Check, { className: "" }) }),
+          children
+        ]
+      }
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+var Select_default = Select;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -1724,16 +2283,26 @@ var DropdownMenu_default = DropdownMenu;
   Chips,
   Divider,
   DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
   IconButton,
   IconRoundedButton,
   Input,
+  MenuContent,
+  MenuItem,
+  MenuLabel,
+  MenuSeparator,
   NavButton,
+  ProfileMenuFooter,
+  ProfileMenuHeader,
+  ProfileMenuSection,
+  ProfileMenuTrigger,
+  ProgressBar,
   Radio,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
   SelectionButton,
   Table,
   Text,