@geckoui/geckoui 1.5.0 → 1.6.0

package/README.md

@@ -8,7 +8,7 @@
   The only thing our Gecko 🦎 eats is bugs! 🐛<br />
 </p>
 
-📚 **Documentation**: [Gecko](https://gecko.productionbug.com)
+📚 **Documentation**: [Gecko](https://geckoui.dev)
 
 ## Installation
 

package/dist/index.js

@@ -748,42 +748,24 @@ var X_default = X;
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Checkbox = (0, import_react6.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { id, disabled, className, checked, partial, style } = _b, rest = __objRest(_b, ["id", "disabled", "className", "checked", "partial", "style"]);
+    var _b = _a, { id, disabled, className, checked, partial } = _b, rest = __objRest(_b, ["id", "disabled", "className", "checked", "partial"]);
     const _id = (0, import_react6.useId)();
     const Icon = partial ? IndeterminateIcon_default : CheckIcon_default;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "GeckoUICheckbox group", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "button",
-      {
-        "aria-checked": checked,
-        className: "GeckoUICheckbox__button",
-        disabled,
-        role: "checkbox",
-        type: "button",
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            const el = e.currentTarget.querySelector("input");
-            if (!el) return;
-            el.click();
-          }
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { style: { display: "contents" }, "aria-label": "checkbox-label", htmlFor: id != null ? id : _id, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: classNames("GeckoUICheckbox__box", className), style: { margin: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "input",
-            __spreadProps(__spreadValues({
-              checked,
-              className: "GeckoUICheckbox__input",
-              disabled,
-              id: id != null ? id : _id,
-              ref,
-              style: __spreadValues({ display: "none" }, style)
-            }, rest), {
-              type: "checkbox"
-            })
-          ) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: "GeckoUICheckbox__icon" })
-        ]
-      }
-    ) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "GeckoUICheckbox group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "input",
+        __spreadProps(__spreadValues({
+          checked,
+          className: classNames("GeckoUICheckbox__input", className),
+          disabled,
+          id: id != null ? id : _id,
+          ref
+        }, rest), {
+          type: "checkbox"
+        })
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: "GeckoUICheckbox__icon" })
+    ] });
   }
 );
 Checkbox.displayName = "Checkbox";
@@ -800,7 +782,7 @@ var CounterInput = (0, import_react7.forwardRef)(
       min = -Infinity,
       max = Infinity,
       step = 1,
-      size = "md",
+      size: size2 = "md",
       className,
       inputClassName,
       buttonClassName,
@@ -852,7 +834,7 @@ var CounterInput = (0, import_react7.forwardRef)(
       "div",
       {
         className: classNames("GeckoUICounterInput", className),
-        "data-size": size,
+        "data-size": size2,
         "data-state": disabled ? "disabled" : readOnly ? "readonly" : void 0,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -1549,10 +1531,7 @@ var import_react9 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function CalendarYearPicker(_a) {
   var _b = _a, { activeYear, onSelectYear } = _b, headerProps = __objRest(_b, ["activeYear", "onSelectYear"]);
-  let start = parseInt((activeYear / 10).toFixed(0)) * 10;
-  if (activeYear + 1 === start) {
-    start -= 10;
-  }
+  const start = Math.floor(activeYear / 10) * 10;
   const [years, setYears] = (0, import_react9.useState)(
     () => Array.from({ length: 12 }).map((_, index) => start - 1 + index)
   );
@@ -2690,13 +2669,13 @@ var import_react19 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var Button = (0, import_react19.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { children, className, variant = "filled", size = "md", color = "primary" } = _b, rest = __objRest(_b, ["children", "className", "variant", "size", "color"]);
+    var _b = _a, { children, className, variant = "filled", size: size2 = "md", color = "primary" } = _b, rest = __objRest(_b, ["children", "className", "variant", "size", "color"]);
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "button",
       __spreadProps(__spreadValues({
         "data-variant": variant,
         "data-color": color,
-        "data-size": size,
+        "data-size": size2,
         className: classNames("GeckoUIButton", className),
         ref,
         type: "button"
@@ -2744,7 +2723,7 @@ var LoadingButton = (_a) => {
     className,
     children,
     disabled,
-    size,
+    size: size2,
     variant = "filled",
     color
   } = _b, buttonProps = __objRest(_b, [
@@ -2773,7 +2752,7 @@ var LoadingButton = (_a) => {
       "data-loading": loading || void 0,
       className: classNames("GeckoUILoadingButton", className),
       disabled: loading || disabled,
-      size,
+      size: size2,
       color,
       variant
     }, buttonProps), {
@@ -3246,8 +3225,8 @@ var import_react23 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var Switch = (0, import_react23.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { size = "md", className, thumbClassName, onChange, onKeyDown } = _b, rest = __objRest(_b, ["size", "className", "thumbClassName", "onChange", "onKeyDown"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { className: classNames("GeckoUISwitch", className), "data-size": size, children: [
+    var _b = _a, { size: size2 = "md", className, thumbClassName, onChange, onKeyDown } = _b, rest = __objRest(_b, ["size", "className", "thumbClassName", "onChange", "onKeyDown"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { className: classNames("GeckoUISwitch", className), "data-size": size2, children: [
       /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "input",
         __spreadValues({
@@ -3265,7 +3244,7 @@ var Switch = (0, import_react23.forwardRef)(
           }
         }, rest)
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: classNames("GeckoUISwitch__thumb", thumbClassName), "data-size": size })
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: classNames("GeckoUISwitch__thumb", thumbClassName), "data-size": size2 })
     ] });
   }
 );
@@ -3282,7 +3261,7 @@ var RHFSwitch = (_a) => {
     disabled,
     value,
     uncheckedValue,
-    size,
+    size: size2,
     onChange,
     className,
     thumbClassName,
@@ -3334,7 +3313,7 @@ var RHFSwitch = (_a) => {
               }
             },
             onChange: handleUpdate,
-            size,
+            size: size2,
             thumbClassName: classNames("GeckoUIRHFSwitch__thumb", thumbClassName),
             value: void 0
           })
@@ -4117,6 +4096,7 @@ function SelectButton({ prefix, suffix, className }) {
     clearable
   } = useSelect();
   const id = (0, import_react29.useId)();
+  const pointerDownRef = (0, import_react29.useRef)(false);
   const { hasValue, handleInputChange, handleKeyboardInteraction } = useSelectTrigger();
   const trigger = (0, import_react29.useMemo)(() => import_react29.Children.toArray(children).find(isSelectTrigger), [children]);
   const handleClear = (e) => {
@@ -4138,8 +4118,15 @@ function SelectButton({ prefix, suffix, className }) {
       className: classNames("GeckoUISelectButton", className),
       "data-state": disabled ? "disabled" : "enabled"
     }, !filterable && { "data-readonly": "" }), {
-      onClick: () => {
+      onPointerDown: () => {
+        pointerDownRef.current = true;
+      },
+      onClick: (e) => {
         var _a;
+        e.preventDefault();
+        const isPointerClick = pointerDownRef.current;
+        pointerDownRef.current = false;
+        if (!isPointerClick) return;
         if (open && !keyword) {
           closeMenu();
           return;
@@ -4474,7 +4461,15 @@ var Select = (props) => {
   const floating = (0, import_react31.useFloating)({
     placement,
     strategy: floatingStrategy,
-    middleware: [(0, import_react31.flip)({ padding: 6 }), (0, import_react31.offset)({ mainAxis: 6 })],
+    middleware: [
+      (0, import_react31.flip)({ padding: 6 }),
+      (0, import_react31.offset)({ mainAxis: 6 }),
+      (0, import_react31.size)({
+        apply({ rects, elements }) {
+          elements.floating.style.width = `${rects.reference.width}px`;
+        }
+      })
+    ],
     whileElementsMounted: import_react31.autoUpdate,
     open,
     onOpenChange: setOpen
@@ -4706,7 +4701,7 @@ var SelectOption = (_a) => {
       onClick: disabled ? void 0 : handleOnClick,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Content, {}),
-        !!selected && !hideCheckIcon && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "GeckoUI-icon__check GeckoUISelectOption__check-icon" })
+        !hideCheckIcon && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "GeckoUI-icon__check GeckoUISelectOption__check-icon" })
       ]
     })
   );

package/dist/index.mjs

@@ -652,42 +652,24 @@ var X_default = X;
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var Checkbox = forwardRef(
   (_a, ref) => {
-    var _b = _a, { id, disabled, className, checked, partial, style } = _b, rest = __objRest(_b, ["id", "disabled", "className", "checked", "partial", "style"]);
+    var _b = _a, { id, disabled, className, checked, partial } = _b, rest = __objRest(_b, ["id", "disabled", "className", "checked", "partial"]);
     const _id = useId();
     const Icon = partial ? IndeterminateIcon_default : CheckIcon_default;
-    return /* @__PURE__ */ jsx5("div", { className: "GeckoUICheckbox group", children: /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        "aria-checked": checked,
-        className: "GeckoUICheckbox__button",
-        disabled,
-        role: "checkbox",
-        type: "button",
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            const el = e.currentTarget.querySelector("input");
-            if (!el) return;
-            el.click();
-          }
-        },
-        children: [
-          /* @__PURE__ */ jsx5("label", { style: { display: "contents" }, "aria-label": "checkbox-label", htmlFor: id != null ? id : _id, children: /* @__PURE__ */ jsx5("div", { className: classNames("GeckoUICheckbox__box", className), style: { margin: 0 }, children: /* @__PURE__ */ jsx5(
-            "input",
-            __spreadProps(__spreadValues({
-              checked,
-              className: "GeckoUICheckbox__input",
-              disabled,
-              id: id != null ? id : _id,
-              ref,
-              style: __spreadValues({ display: "none" }, style)
-            }, rest), {
-              type: "checkbox"
-            })
-          ) }) }),
-          /* @__PURE__ */ jsx5(Icon, { className: "GeckoUICheckbox__icon" })
-        ]
-      }
-    ) });
+    return /* @__PURE__ */ jsxs2("div", { className: "GeckoUICheckbox group", children: [
+      /* @__PURE__ */ jsx5(
+        "input",
+        __spreadProps(__spreadValues({
+          checked,
+          className: classNames("GeckoUICheckbox__input", className),
+          disabled,
+          id: id != null ? id : _id,
+          ref
+        }, rest), {
+          type: "checkbox"
+        })
+      ),
+      /* @__PURE__ */ jsx5(Icon, { className: "GeckoUICheckbox__icon" })
+    ] });
   }
 );
 Checkbox.displayName = "Checkbox";
@@ -704,7 +686,7 @@ var CounterInput = forwardRef2(
       min = -Infinity,
       max = Infinity,
       step = 1,
-      size = "md",
+      size: size2 = "md",
       className,
       inputClassName,
       buttonClassName,
@@ -756,7 +738,7 @@ var CounterInput = forwardRef2(
       "div",
       {
         className: classNames("GeckoUICounterInput", className),
-        "data-size": size,
+        "data-size": size2,
         "data-state": disabled ? "disabled" : readOnly ? "readonly" : void 0,
         children: [
           /* @__PURE__ */ jsx6(
@@ -1453,10 +1435,7 @@ import { useState as useState4 } from "react";
 import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function CalendarYearPicker(_a) {
   var _b = _a, { activeYear, onSelectYear } = _b, headerProps = __objRest(_b, ["activeYear", "onSelectYear"]);
-  let start = parseInt((activeYear / 10).toFixed(0)) * 10;
-  if (activeYear + 1 === start) {
-    start -= 10;
-  }
+  const start = Math.floor(activeYear / 10) * 10;
   const [years, setYears] = useState4(
     () => Array.from({ length: 12 }).map((_, index) => start - 1 + index)
   );
@@ -2602,13 +2581,13 @@ import { forwardRef as forwardRef4 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var Button = forwardRef4(
   (_a, ref) => {
-    var _b = _a, { children, className, variant = "filled", size = "md", color = "primary" } = _b, rest = __objRest(_b, ["children", "className", "variant", "size", "color"]);
+    var _b = _a, { children, className, variant = "filled", size: size2 = "md", color = "primary" } = _b, rest = __objRest(_b, ["children", "className", "variant", "size", "color"]);
     return /* @__PURE__ */ jsx21(
       "button",
       __spreadProps(__spreadValues({
         "data-variant": variant,
         "data-color": color,
-        "data-size": size,
+        "data-size": size2,
         className: classNames("GeckoUIButton", className),
         ref,
         type: "button"
@@ -2656,7 +2635,7 @@ var LoadingButton = (_a) => {
     className,
     children,
     disabled,
-    size,
+    size: size2,
     variant = "filled",
     color
   } = _b, buttonProps = __objRest(_b, [
@@ -2685,7 +2664,7 @@ var LoadingButton = (_a) => {
       "data-loading": loading || void 0,
       className: classNames("GeckoUILoadingButton", className),
       disabled: loading || disabled,
-      size,
+      size: size2,
       color,
       variant
     }, buttonProps), {
@@ -3158,8 +3137,8 @@ import { forwardRef as forwardRef6 } from "react";
 import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 var Switch = forwardRef6(
   (_a, ref) => {
-    var _b = _a, { size = "md", className, thumbClassName, onChange, onKeyDown } = _b, rest = __objRest(_b, ["size", "className", "thumbClassName", "onChange", "onKeyDown"]);
-    return /* @__PURE__ */ jsxs18("label", { className: classNames("GeckoUISwitch", className), "data-size": size, children: [
+    var _b = _a, { size: size2 = "md", className, thumbClassName, onChange, onKeyDown } = _b, rest = __objRest(_b, ["size", "className", "thumbClassName", "onChange", "onKeyDown"]);
+    return /* @__PURE__ */ jsxs18("label", { className: classNames("GeckoUISwitch", className), "data-size": size2, children: [
       /* @__PURE__ */ jsx34(
         "input",
         __spreadValues({
@@ -3177,7 +3156,7 @@ var Switch = forwardRef6(
           }
         }, rest)
       ),
-      /* @__PURE__ */ jsx34("span", { className: classNames("GeckoUISwitch__thumb", thumbClassName), "data-size": size })
+      /* @__PURE__ */ jsx34("span", { className: classNames("GeckoUISwitch__thumb", thumbClassName), "data-size": size2 })
     ] });
   }
 );
@@ -3194,7 +3173,7 @@ var RHFSwitch = (_a) => {
     disabled,
     value,
     uncheckedValue,
-    size,
+    size: size2,
     onChange,
     className,
     thumbClassName,
@@ -3246,7 +3225,7 @@ var RHFSwitch = (_a) => {
               }
             },
             onChange: handleUpdate,
-            size,
+            size: size2,
             thumbClassName: classNames("GeckoUIRHFSwitch__thumb", thumbClassName),
             value: void 0
           })
@@ -3780,8 +3759,8 @@ RHFFilePicker.displayName = "RHFFilePicker";
 var RHFFilePicker_default = RHFFilePicker;
 
 // src/components/Select/Select/Select.tsx
-import { autoUpdate as autoUpdate3, flip as flip4, offset as offset4, useFloating as useFloating4 } from "@floating-ui/react";
-import { Children as Children4, useMemo as useMemo4, useRef as useRef9, useState as useState10 } from "react";
+import { autoUpdate as autoUpdate3, flip as flip4, offset as offset4, size, useFloating as useFloating4 } from "@floating-ui/react";
+import { Children as Children4, useMemo as useMemo4, useRef as useRef10, useState as useState10 } from "react";
 
 // src/utils/isTextIncludes.ts
 function isTextIncludes(baseString = "", searchString) {
@@ -3850,7 +3829,7 @@ function findSelectOptions(el) {
 }
 
 // src/components/Select/SelectButton/SelectButton.tsx
-import { Children as Children2, useId as useId5, useMemo as useMemo2 } from "react";
+import { Children as Children2, useId as useId5, useMemo as useMemo2, useRef as useRef9 } from "react";
 
 // src/utils/createLabel.ts
 function createLabel(item) {
@@ -4029,6 +4008,7 @@ function SelectButton({ prefix, suffix, className }) {
     clearable
   } = useSelect();
   const id = useId5();
+  const pointerDownRef = useRef9(false);
   const { hasValue, handleInputChange, handleKeyboardInteraction } = useSelectTrigger();
   const trigger = useMemo2(() => Children2.toArray(children).find(isSelectTrigger), [children]);
   const handleClear = (e) => {
@@ -4050,8 +4030,15 @@ function SelectButton({ prefix, suffix, className }) {
       className: classNames("GeckoUISelectButton", className),
       "data-state": disabled ? "disabled" : "enabled"
     }, !filterable && { "data-readonly": "" }), {
-      onClick: () => {
+      onPointerDown: () => {
+        pointerDownRef.current = true;
+      },
+      onClick: (e) => {
         var _a;
+        e.preventDefault();
+        const isPointerClick = pointerDownRef.current;
+        pointerDownRef.current = false;
+        if (!isPointerClick) return;
         if (open && !keyword) {
           closeMenu();
           return;
@@ -4351,8 +4338,8 @@ var SelectMenu_default = SelectMenu;
 // src/components/Select/Select/Select.tsx
 import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
 var Select = (props) => {
-  const inputRef = useRef9(null);
-  const menuScrollContainerRef = useRef9(null);
+  const inputRef = useRef10(null);
+  const menuScrollContainerRef = useRef10(null);
   const _a = props, {
     disabled,
     inputRef: customInputRef,
@@ -4386,7 +4373,15 @@ var Select = (props) => {
   const floating = useFloating4({
     placement,
     strategy: floatingStrategy,
-    middleware: [flip4({ padding: 6 }), offset4({ mainAxis: 6 })],
+    middleware: [
+      flip4({ padding: 6 }),
+      offset4({ mainAxis: 6 }),
+      size({
+        apply({ rects, elements }) {
+          elements.floating.style.width = `${rects.reference.width}px`;
+        }
+      })
+    ],
     whileElementsMounted: autoUpdate3,
     open,
     onOpenChange: setOpen
@@ -4491,7 +4486,7 @@ Select.displayName = "Select";
 var Select_default = Select;
 
 // src/components/Select/SelectOption/SelectOption.tsx
-import { useEffect as useEffect8, useRef as useRef10 } from "react";
+import { useEffect as useEffect8, useRef as useRef11 } from "react";
 import { jsx as jsx49, jsxs as jsxs26 } from "react/jsx-runtime";
 var SelectOption = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
@@ -4514,7 +4509,7 @@ var SelectOption = (_a) => {
     "onRemove",
     "disabled"
   ]);
-  const ref = useRef10(null);
+  const ref = useRef11(null);
   const { preventDefault, attachPreventDefault } = usePreventDefault_default();
   const {
     closeMenuOnSelect,
@@ -4618,7 +4613,7 @@ var SelectOption = (_a) => {
       onClick: disabled ? void 0 : handleOnClick,
       children: [
         /* @__PURE__ */ jsx49(Content, {}),
-        !!selected && !hideCheckIcon && /* @__PURE__ */ jsx49("div", { className: "GeckoUI-icon__check GeckoUISelectOption__check-icon" })
+        !hideCheckIcon && /* @__PURE__ */ jsx49("div", { className: "GeckoUI-icon__check GeckoUISelectOption__check-icon" })
       ]
     })
   );
@@ -4825,7 +4820,7 @@ var Pagination_default = Pagination;
 import { useCallback as useCallback3, useEffect as useEffect10, useState as useState12 } from "react";
 
 // src/components/Dialog/Dialog.tsx
-import { useEffect as useEffect9, useRef as useRef11, useState as useState11 } from "react";
+import { useEffect as useEffect9, useRef as useRef12, useState as useState11 } from "react";
 import { createRoot } from "react-dom/client";
 
 // src/components/Dialog/DialogContainer.tsx
@@ -4876,7 +4871,7 @@ function DialogContent(_a) {
     }
     return acc;
   }, {});
-  const ref = useRef11(null);
+  const ref = useRef12(null);
   const [animationState, setAnimationState] = useState11("entering");
   const handleDismiss = () => {
     setAnimationState("closing");
@@ -5035,7 +5030,7 @@ var GeckoUIPortal = ({ toastOptions = {} }) => {
 var GeckoUIPortal_default = GeckoUIPortal;
 
 // src/components/Drawer/Drawer.tsx
-import { useRef as useRef12 } from "react";
+import { useRef as useRef13 } from "react";
 import { createRoot as createRoot2 } from "react-dom/client";
 import { jsx as jsx58, jsxs as jsxs31 } from "react/jsx-runtime";
 function Drawer({
@@ -5049,7 +5044,7 @@ function Drawer({
   children,
   dismissOnEscape = true
 }) {
-  const drawerRootRef = useRef12(null);
+  const drawerRootRef = useRef13(null);
   const handleDismiss = () => {
     if (open) handleClose == null ? void 0 : handleClose();
   };
@@ -5103,7 +5098,7 @@ var Drawer_default = Drawer;
 
 // src/components/Menu/Menu/Menu.tsx
 import { autoUpdate as autoUpdate4, flip as flip5, offset as offset5, useFloating as useFloating5 } from "@floating-ui/react";
-import { Children as Children5, useCallback as useCallback4, useRef as useRef14, useState as useState13 } from "react";
+import { Children as Children5, useCallback as useCallback4, useRef as useRef15, useState as useState13 } from "react";
 
 // src/components/Menu/Menu.utils.ts
 import { isValidElement as isValidElement3 } from "react";
@@ -5163,7 +5158,7 @@ MenuButton.displayName = "MenuButton";
 var MenuButton_default = MenuButton;
 
 // src/components/Menu/MenuPanel/MenuPanel.tsx
-import { useEffect as useEffect11, useRef as useRef13 } from "react";
+import { useEffect as useEffect11, useRef as useRef14 } from "react";
 import { jsx as jsx60 } from "react/jsx-runtime";
 var MenuPanel = ({ children, className }) => {
   const {
@@ -5173,7 +5168,7 @@ var MenuPanel = ({ children, className }) => {
     menuRef,
     floating: { refs, floatingStyles }
   } = useMenu();
-  const panelRef = useRef13(null);
+  const panelRef = useRef14(null);
   useEffect11(() => {
     if (!open || !panelRef.current) return;
     panelRef.current.focus();
@@ -5238,7 +5233,7 @@ var Menu = ({
   buttonClassName,
   children
 }) => {
-  const menuRef = useRef14(null);
+  const menuRef = useRef15(null);
   const [open, setOpen] = useState13(false);
   const floating = useFloating5({
     placement,

package/dist/styles.css

@@ -194,6 +194,7 @@
 .GeckoUIMenu__items {
   z-index: 50;
   display: flex;
+  max-height: 240px;
   width: fit-content;
   flex-direction: column;
   justify-content: flex-start;
@@ -1348,76 +1349,51 @@
   border-width: 0;
   border-style: solid;
   border-color: #e5e7eb;
-  outline: none;
-}
-.GeckoUICheckbox:focus-visible {
-  outline: 2px solid var(--color-primary-300);
-  outline-offset: 2px;
-}
-.GeckoUICheckbox {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 .GeckoUICheckbox__input {
-  display: none;
-}
-.GeckoUICheckbox__button {
   box-sizing: border-box;
   border-width: 0;
   border-style: solid;
   border-color: #e5e7eb;
-  font-family: inherit;
-  font-feature-settings: inherit;
-  font-variation-settings: inherit;
-  font-size: 100%;
-  font-weight: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  color: inherit;
-  margin: 0;
-  padding: 0;
-  text-transform: none;
-  -webkit-appearance: button;
-  cursor: pointer;
-  background-color: transparent;
-  background-image: none;
-  position: relative;
-  cursor: default;
-  border-radius: 0.25rem;
+  outline: none;
 }
-.GeckoUICheckbox:has(:checked:disabled) .GeckoUICheckbox__button {
-  opacity: 40%;
+.GeckoUICheckbox__input:focus-visible {
+  outline: 2px solid var(--color-primary-300);
+  outline-offset: 2px;
 }
-.GeckoUICheckbox__box {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: #e5e7eb;
+.GeckoUICheckbox__input {
+  margin: calc(var(--spacing, 0.25rem) * 0);
   height: calc(var(--spacing, 0.25rem) * 4);
   width: calc(var(--spacing, 0.25rem) * 4);
   cursor: pointer;
+  appearance: none;
   border-radius: 0.25rem;
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--color-border-primary);
 }
-.GeckoUICheckbox__box:hover,
-.GeckoUICheckbox__box:has(:hover) {
+.GeckoUICheckbox__input:hover {
   border-color: var(--color-primary-400);
 }
-.GeckoUICheckbox:has(:disabled) .GeckoUICheckbox__box {
+.GeckoUICheckbox__input:checked {
+  border-color: var(--color-primary-600);
+  background-color: var(--color-primary-600);
+}
+.GeckoUICheckbox__input:disabled {
   cursor: not-allowed;
   border-color: var(--color-border-disabled);
   background-color: var(--color-surface-disabled);
 }
-.GeckoUICheckbox:has(:checked) .GeckoUICheckbox__box {
+.GeckoUICheckbox__input:checked:disabled {
   border-color: var(--color-primary-600);
   background-color: var(--color-primary-600);
 }
-.GeckoUICheckbox:has(:checked:disabled) .GeckoUICheckbox__box {
-  border-color: var(--color-primary-600);
-  background-color: var(--color-primary-600);
+.GeckoUICheckbox:has(:checked:disabled) {
+  opacity: 40%;
 }
 .GeckoUICheckbox__icon {
   pointer-events: none;
@@ -2113,6 +2089,7 @@
   display: flex;
   flex-direction: column;
   gap: 1px;
+  overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: calc(var(--spacing, 0.25rem) * 2);
@@ -2157,6 +2134,7 @@
 }
 .GeckoUISelectOption {
   display: flex;
+  min-width: calc(var(--spacing, 0.25rem) * 0);
   cursor: pointer;
   scroll-margin: calc(var(--spacing, 0.25rem) * 2);
   flex-direction: row;
@@ -2168,6 +2146,7 @@
   padding-right: 16px;
   padding-left: 12px;
   text-align: left;
+  overflow-wrap: anywhere;
 }
 .GeckoUISelectOption[data-focused] {
   background-color: var(--color-surface-hover-strong);
@@ -2177,8 +2156,13 @@
   opacity: 50%;
 }
 .GeckoUISelectOption__check-icon {
+  visibility: hidden;
   height: calc(var(--spacing, 0.25rem) * 3.5);
   width: calc(var(--spacing, 0.25rem) * 3.5);
+  flex-shrink: 0;
+}
+.GeckoUISelectOption[data-state=selected] .GeckoUISelectOption__check-icon {
+  visibility: visible;
 }
 .GeckoUISelectButton {
   box-sizing: border-box;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geckoui/geckoui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "license": "MIT",
   "description": "The only thing our Gecko eats is bugs!",
   "keywords": [