@geckoui/geckoui 0.0.1-beta0 → 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

@@ -376,11 +376,18 @@ var BaseFilePickerHandler = class {
       newFile.editableName = newFile.name;
       newFile.path || (newFile.path = path);
       if (this.accept !== "*") {
-        if (this.accept.includes(",")) {
-          const acceptTypes = this.accept.split(",").map((type2) => type2.trim());
-          const valid = acceptTypes.some((acceptType) => newFile.type.match(acceptType));
-          if (!valid) return data;
-        } else if (!RegExp(this.accept).exec(newFile.type)) return data;
+        const acceptTypes = this.accept.split(",").map((t) => t.trim());
+        const valid = acceptTypes.some((acceptType) => {
+          if (acceptType.startsWith(".")) {
+            return newFile.name.toLowerCase().endsWith(acceptType.toLowerCase());
+          }
+          if (acceptType.endsWith("/*")) {
+            const baseType = acceptType.slice(0, -2);
+            return newFile.type.startsWith(baseType + "/");
+          }
+          return newFile.type === acceptType;
+        });
+        if (!valid) return data;
       }
       newFile.preview = URL.createObjectURL(newFile);
       data.push(newFile);
@@ -499,7 +506,7 @@ var WebkitFilePickerHandler_default = WebkitFilePickerHandler;
 var FileOnlyPickerHandler = class extends BaseFilePickerHandler_default {
   onDrop(items) {
     return __async(this, null, function* () {
-      const files = Array.from(items != null ? items : []).map((item) => item.getAsFile()).filter((file) => Boolean(file) && (file == null ? void 0 : file.type));
+      const files = Array.from(items != null ? items : []).map((item) => item.getAsFile()).filter((file) => Boolean(file));
       const data = this.oldFiles;
       for (const file of files) {
         yield this.addFileIfValid(file, data);
@@ -4071,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();
@@ -4080,6 +4089,7 @@ function SelectButton({ prefix, suffix, className }) {
     e.stopPropagation();
     if (disabled) return;
     if (multiple) {
+      onChange == null ? void 0 : onChange([]);
       return;
     }
     handleChange(void 0);
@@ -4163,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,
             {
@@ -4427,7 +4437,8 @@ var Select = (props) => {
     onChange,
     closeMenuOnSelect = !multiple,
     placement = "bottom-start",
-    floatingStrategy
+    floatingStrategy,
+    clearable = false
   } = _a, rest = __objRest(_a, [
     "disabled",
     "inputRef",
@@ -4439,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)("");
@@ -4530,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

@@ -273,11 +273,18 @@ var BaseFilePickerHandler = class {
       newFile.editableName = newFile.name;
       newFile.path || (newFile.path = path);
       if (this.accept !== "*") {
-        if (this.accept.includes(",")) {
-          const acceptTypes = this.accept.split(",").map((type2) => type2.trim());
-          const valid = acceptTypes.some((acceptType) => newFile.type.match(acceptType));
-          if (!valid) return data;
-        } else if (!RegExp(this.accept).exec(newFile.type)) return data;
+        const acceptTypes = this.accept.split(",").map((t) => t.trim());
+        const valid = acceptTypes.some((acceptType) => {
+          if (acceptType.startsWith(".")) {
+            return newFile.name.toLowerCase().endsWith(acceptType.toLowerCase());
+          }
+          if (acceptType.endsWith("/*")) {
+            const baseType = acceptType.slice(0, -2);
+            return newFile.type.startsWith(baseType + "/");
+          }
+          return newFile.type === acceptType;
+        });
+        if (!valid) return data;
       }
       newFile.preview = URL.createObjectURL(newFile);
       data.push(newFile);
@@ -396,7 +403,7 @@ var WebkitFilePickerHandler_default = WebkitFilePickerHandler;
 var FileOnlyPickerHandler = class extends BaseFilePickerHandler_default {
   onDrop(items) {
     return __async(this, null, function* () {
-      const files = Array.from(items != null ? items : []).map((item) => item.getAsFile()).filter((file) => Boolean(file) && (file == null ? void 0 : file.type));
+      const files = Array.from(items != null ? items : []).map((item) => item.getAsFile()).filter((file) => Boolean(file));
       const data = this.oldFiles;
       for (const file of files) {
         yield this.addFileIfValid(file, data);
@@ -3968,7 +3975,9 @@ function SelectButton({ prefix, suffix, className }) {
     placeholder,
     placeholderClassName,
     children,
-    handleChange
+    handleChange,
+    onChange,
+    clearable
   } = useSelect();
   const id = useId5();
   const { hasValue, handleInputChange, handleKeyboardInteraction } = useSelectTrigger();
@@ -3977,6 +3986,7 @@ function SelectButton({ prefix, suffix, className }) {
     e.stopPropagation();
     if (disabled) return;
     if (multiple) {
+      onChange == null ? void 0 : onChange([]);
       return;
     }
     handleChange(void 0);
@@ -4060,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,
             {
@@ -4324,7 +4334,8 @@ var Select = (props) => {
     onChange,
     closeMenuOnSelect = !multiple,
     placement = "bottom-start",
-    floatingStrategy
+    floatingStrategy,
+    clearable = false
   } = _a, rest = __objRest(_a, [
     "disabled",
     "inputRef",
@@ -4336,7 +4347,8 @@ var Select = (props) => {
     "onChange",
     "closeMenuOnSelect",
     "placement",
-    "floatingStrategy"
+    "floatingStrategy",
+    "clearable"
   ]);
   const [open, setOpen] = useState10(false);
   const [keyword, setKeyword] = useState10("");
@@ -4427,7 +4439,9 @@ var Select = (props) => {
         isEmpty,
         children,
         toggleMenu,
-        menuScrollContainerRef
+        menuScrollContainerRef,
+        onChange,
+        clearable
       }, rest),
       children: /* @__PURE__ */ jsxs24(
         "div",

package/dist/styles.css

@@ -2190,15 +2190,13 @@
   background: rgb(var(--gecko-ui-scrollbar-thumb-hover));
 }
 .GeckoUISelectMenu__items {
-  scrollbar-gutter: stable;
+  scrollbar-gutter: stable overlay;
   display: flex;
   flex-direction: column;
   gap: 1px;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.5rem;
+  padding: 0.5rem;
 }
 .GeckoUISelectMenu--with-dropdown-search {
   max-height: 260px;
@@ -3237,7 +3235,7 @@
   --gecko-ui-border-focus: 163 163 163;
   --gecko-ui-border-hover: 212 212 212;
   --gecko-ui-border-disabled: 235 235 235;
-  --gecko-ui-scrollbar-track: 0 0 0 / 0;
+  --gecko-ui-scrollbar-track: 0 0 0;
   --gecko-ui-scrollbar-thumb: 209 213 219;
   --gecko-ui-scrollbar-thumb-hover: 156 163 175;
 }
@@ -3258,12 +3256,12 @@
   --gecko-ui-text-placeholder: 115 115 115;
   --gecko-ui-text-inverse: 23 23 23;
   --gecko-ui-text-muted: 163 163 163;
-  --gecko-ui-border-primary: 255 255 255 / 0.1;
-  --gecko-ui-border-secondary: 255 255 255 / 0.15;
+  --gecko-ui-border-primary: 90 90 90;
+  --gecko-ui-border-secondary: 90 90 90;
   --gecko-ui-border-focus: 115 115 115;
   --gecko-ui-border-hover: 163 163 163;
-  --gecko-ui-border-disabled: 255 255 255 / 0.1;
-  --gecko-ui-scrollbar-track: 0 0 0 / 0;
+  --gecko-ui-border-disabled: 45 45 45;
+  --gecko-ui-scrollbar-track: 0 0 0;
   --gecko-ui-scrollbar-thumb: 75 85 99;
   --gecko-ui-scrollbar-thumb-hover: 107 114 128;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geckoui/geckoui",
-  "version": "0.0.1-beta0",
+  "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}\""
   }
-}
+}