@geckoui/geckoui 1.0.0 → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 GeckoUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -20,6 +20,18 @@ pnpm add @geckoui/geckoui
 yarn add @geckoui/geckoui
 ```
 
+## Install react-hook-form for form components
+
+```bash
+npm install react-hook-form
+
+# or
+pnpm add react-hook-form
+
+# or
+yarn add react-hook-form
+```
+
 ## Quick Start
 
 ### 1. Import Styles

package/dist/index.d.mts

@@ -2378,6 +2378,11 @@ interface BaseSelectProps extends PropsWithChildren, SelectButtonProps {
      * If you pass `SelectEmpty` as children, this will set to true
      * */
     hideDefaultEmptyUI?: boolean;
+    /**
+     * If true, a clear button will be shown to clear the selected value
+     * Default is false
+     * */
+    clearable?: boolean;
 }
 interface SingleSelectProps<T> extends BaseSelectProps {
     /**
@@ -2510,6 +2515,10 @@ interface SelectContextProps<T> extends Pick<BaseSelectProps, "disabled" | "pref
      * Used internally for scrolling focused options into view
      * */
     menuScrollContainerRef: RefObject<HTMLDivElement | null>;
+    /**
+     * Callback to be called when the value changes
+     * */
+    onChange?: (value: T | T[]) => void;
 }
 
 /**

package/dist/index.d.ts

@@ -2378,6 +2378,11 @@ interface BaseSelectProps extends PropsWithChildren, SelectButtonProps {
      * If you pass `SelectEmpty` as children, this will set to true
      * */
     hideDefaultEmptyUI?: boolean;
+    /**
+     * If true, a clear button will be shown to clear the selected value
+     * Default is false
+     * */
+    clearable?: boolean;
 }
 interface SingleSelectProps<T> extends BaseSelectProps {
     /**
@@ -2510,6 +2515,10 @@ interface SelectContextProps<T> extends Pick<BaseSelectProps, "disabled" | "pref
      * Used internally for scrolling focused options into view
      * */
     menuScrollContainerRef: RefObject<HTMLDivElement | null>;
+    /**
+     * Callback to be called when the value changes
+     * */
+    onChange?: (value: T | T[]) => void;
 }
 
 /**

package/dist/index.js

@@ -4078,7 +4078,9 @@ function SelectButton({ prefix, suffix, className }) {
     placeholder,
     placeholderClassName,
     children,
-    handleChange
+    handleChange,
+    onChange,
+    clearable
   } = useSelect();
   const id = (0, import_react29.useId)();
   const { hasValue, handleInputChange, handleKeyboardInteraction } = useSelectTrigger();
@@ -4087,6 +4089,7 @@ function SelectButton({ prefix, suffix, className }) {
     e.stopPropagation();
     if (disabled) return;
     if (multiple) {
+      onChange == null ? void 0 : onChange([]);
       return;
     }
     handleChange(void 0);
@@ -4170,7 +4173,7 @@ function SelectButton({ prefix, suffix, className }) {
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "GeckoUISelectButton__icons", children: [
-          !multiple && hasValue && !disabled && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { className: "GeckoUISelectButton__clear-button", type: "button", onClick: handleClear, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "GeckoUI-icon__clear" }) }),
+          hasValue && !disabled && clearable && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { className: "GeckoUISelectButton__clear-button", type: "button", onClick: handleClear, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "GeckoUI-icon__clear" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             DynamicComponentRenderer_default,
             {
@@ -4434,7 +4437,8 @@ var Select = (props) => {
     onChange,
     closeMenuOnSelect = !multiple,
     placement = "bottom-start",
-    floatingStrategy
+    floatingStrategy,
+    clearable = false
   } = _a, rest = __objRest(_a, [
     "disabled",
     "inputRef",
@@ -4446,7 +4450,8 @@ var Select = (props) => {
     "onChange",
     "closeMenuOnSelect",
     "placement",
-    "floatingStrategy"
+    "floatingStrategy",
+    "clearable"
   ]);
   const [open, setOpen] = (0, import_react32.useState)(false);
   const [keyword, setKeyword] = (0, import_react32.useState)("");
@@ -4537,7 +4542,9 @@ var Select = (props) => {
         isEmpty,
         children,
         toggleMenu,
-        menuScrollContainerRef
+        menuScrollContainerRef,
+        onChange,
+        clearable
       }, rest),
       children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
         "div",

package/dist/index.mjs

@@ -3975,7 +3975,9 @@ function SelectButton({ prefix, suffix, className }) {
     placeholder,
     placeholderClassName,
     children,
-    handleChange
+    handleChange,
+    onChange,
+    clearable
   } = useSelect();
   const id = useId5();
   const { hasValue, handleInputChange, handleKeyboardInteraction } = useSelectTrigger();
@@ -3984,6 +3986,7 @@ function SelectButton({ prefix, suffix, className }) {
     e.stopPropagation();
     if (disabled) return;
     if (multiple) {
+      onChange == null ? void 0 : onChange([]);
       return;
     }
     handleChange(void 0);
@@ -4067,7 +4070,7 @@ function SelectButton({ prefix, suffix, className }) {
           )
         ] }),
         /* @__PURE__ */ jsxs22("div", { className: "GeckoUISelectButton__icons", children: [
-          !multiple && hasValue && !disabled && /* @__PURE__ */ jsx43("button", { className: "GeckoUISelectButton__clear-button", type: "button", onClick: handleClear, children: /* @__PURE__ */ jsx43("div", { className: "GeckoUI-icon__clear" }) }),
+          hasValue && !disabled && clearable && /* @__PURE__ */ jsx43("button", { className: "GeckoUISelectButton__clear-button", type: "button", onClick: handleClear, children: /* @__PURE__ */ jsx43("div", { className: "GeckoUI-icon__clear" }) }),
           /* @__PURE__ */ jsx43(
             DynamicComponentRenderer_default,
             {
@@ -4331,7 +4334,8 @@ var Select = (props) => {
     onChange,
     closeMenuOnSelect = !multiple,
     placement = "bottom-start",
-    floatingStrategy
+    floatingStrategy,
+    clearable = false
   } = _a, rest = __objRest(_a, [
     "disabled",
     "inputRef",
@@ -4343,7 +4347,8 @@ var Select = (props) => {
     "onChange",
     "closeMenuOnSelect",
     "placement",
-    "floatingStrategy"
+    "floatingStrategy",
+    "clearable"
   ]);
   const [open, setOpen] = useState10(false);
   const [keyword, setKeyword] = useState10("");
@@ -4434,7 +4439,9 @@ var Select = (props) => {
         isEmpty,
         children,
         toggleMenu,
-        menuScrollContainerRef
+        menuScrollContainerRef,
+        onChange,
+        clearable
       }, rest),
       children: /* @__PURE__ */ jsxs24(
         "div",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geckoui/geckoui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "sideEffects": [
     "**/*.css"
   ],
@@ -36,18 +36,8 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "scripts": {
-    "import:css": "node scripts/import-css.js",
-    "build": "pnpm run import:css && tsup",
-    "dev": "pnpm run import:css && tsup --watch",
-    "lint": "eslint src/",
-    "typecheck": "tsc --noEmit",
-    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss}\"",
-    "prepublishOnly": "pnpm run build && cp ../../README.md ./README.md",
-    "postpublish": "rm ./README.md"
-  },
   "peerDependencies": {
-    "react": "^19.2.0",
+    "react": "^19.2.1",
     "react-dom": "^19.2.0"
   },
   "devDependencies": {
@@ -99,5 +89,13 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^2.6.0",
     "unified": "^11.0.5"
+  },
+  "scripts": {
+    "import:css": "node scripts/import-css.js",
+    "build": "pnpm run import:css && tsup",
+    "dev": "pnpm run import:css && tsup --watch",
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss}\""
   }
-}
+}