@geckoui/geckoui 1.3.0 → 1.3.2

package/README.md

@@ -0,0 +1,152 @@
+<p align="center">
+  <img src="https://github.com/geckoui/geckoui/raw/develop/GeckoUI.png" alt="Gecko UI" width="120" />
+</p>
+
+<h1 align="center">Gecko UI</h1>
+
+<p align="center">
+  The only thing our Gecko 🦎 eats is bugs! 🐛<br />
+</p>
+
+📚 **Documentation**: [Gecko](https://gecko.productionbug.com)
+
+## Installation
+
+```bash
+npm install @geckoui/geckoui
+# or
+pnpm add @geckoui/geckoui
+# or
+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
+
+Import the component styles in your app:
+
+```tsx
+import "@geckoui/geckoui/styles.css";
+```
+
+> If you use `tailwindcss`, make sure to import the css inside `layer` directive to correctly override the styles:
+
+```css title="src/global.css"
+@import "tailwindcss";
+
+@layer components {
+  @import "@geckoui/geckoui/styles.css";
+}
+```
+
+### 2. Use Components
+
+```tsx
+import { Alert, Button, Input } from "@geckoui/geckoui";
+
+function App() {
+  return (
+    <div>
+      <Button variant="contained" color="primary">
+        Click me
+      </Button>
+
+      <Input placeholder="Enter your name" />
+
+      <Alert variant="success" title="Operation completed successfully!" />
+    </div>
+  );
+}
+```
+
+## Theming
+
+GeckoUI uses [OKLCH](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) color values with CSS custom properties (`--color-*`) powered by Tailwind CSS v4. You can override colors using **any CSS color format** — oklch, hex, rgb, hsl, etc.
+
+### Dark Mode
+
+Add the `.dark` class to your root element:
+
+```tsx
+<div className="dark">
+  <App />
+</div>
+```
+
+### Customizing Colors
+
+Override CSS variables to match your brand:
+
+```css
+:root {
+  --color-primary-500: oklch(0.65 0.24 330);
+  --color-primary-600: oklch(0.55 0.22 330);
+
+  /* hex works too */
+  --color-primary-700: #6d28d9;
+}
+```
+
+Import after the base styles:
+
+```tsx
+import "@geckoui/geckoui/styles.css";
+
+import "./my-theme.css";
+```
+
+## Advanced Usage
+
+### Custom Styling with Data Attributes
+
+Components use `data-*` attributes for variant/state styling:
+
+```css
+/* Target specific variants */
+.GeckoUIButton[data-variant="filled"][data-color="primary"] {
+  /* Your custom styles */
+}
+
+.GeckoUIInput__input {
+  /* Style the inner input element */
+}
+```
+
+## TypeScript
+
+All components are fully typed. Import types as needed:
+
+```tsx
+import type { ButtonProps, InputProps } from "@geckoui/geckoui";
+```
+
+## AI Skills
+
+Install the GeckoUI skill to help AI assistants (Claude Code, etc.) generate accurate component code and themes:
+
+```
+npx skills add GeckoUI/skills
+```
+
+The skill provides component API references, theming variables, and class name mappings so AI agents can generate correct GeckoUI code without hallucination.
+
+## License
+
+This project is licensed under the MIT License.
+
+## Support
+
+For issues and feature requests, please visit our [@geckoui/geckoui](https://github.com/geckoui/geckoui).

package/dist/index.d.mts

@@ -3636,11 +3636,6 @@ declare const Menu: {
 };
 
 interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> {
-    /**
-     * Text label for the menu item.
-     * Used as the default rendered content if no `children` is provided.
-     */
-    label: string;
     /**
      * Whether the menu item is disabled
      */
@@ -3654,15 +3649,10 @@ interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onCl
      * The menu will close automatically after the callback.
      */
     onClick?: () => void;
-    /**
-     * Custom content for the menu item.
-     * If not provided, `label` is rendered as text.
-     */
-    children?: ReactNode;
 }
 
 declare const MenuItem: {
-    ({ label, disabled, className, onClick, children, ...rest }: MenuItemProps): react_jsx_runtime.JSX.Element;
+    ({ disabled, className, onClick, children, ...rest }: MenuItemProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -3636,11 +3636,6 @@ declare const Menu: {
 };
 
 interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> {
-    /**
-     * Text label for the menu item.
-     * Used as the default rendered content if no `children` is provided.
-     */
-    label: string;
     /**
      * Whether the menu item is disabled
      */
@@ -3654,15 +3649,10 @@ interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onCl
      * The menu will close automatically after the callback.
      */
     onClick?: () => void;
-    /**
-     * Custom content for the menu item.
-     * If not provided, `label` is rendered as text.
-     */
-    children?: ReactNode;
 }
 
 declare const MenuItem: {
-    ({ label, disabled, className, onClick, children, ...rest }: MenuItemProps): react_jsx_runtime.JSX.Element;
+    ({ disabled, className, onClick, children, ...rest }: MenuItemProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.js

@@ -5083,8 +5083,8 @@ function ConfirmDialogContent({
 }
 var show2 = (options) => {
   Dialog_default.show(__spreadProps(__spreadValues({
-    dismissOnEsc: false,
-    dismissOnOutsideClick: false
+    dismissOnEsc: true,
+    dismissOnOutsideClick: true
   }, options), {
     className: classNames("GeckoUIConfirmDialog__dialog", options.className),
     content: ({ dismiss: dismiss2 }) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ConfirmDialogContent, __spreadProps(__spreadValues({}, options), { dismiss: dismiss2 }))
@@ -5389,7 +5389,7 @@ var Menu_default = Menu;
 // src/components/Menu/MenuItem/MenuItem.tsx
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var MenuItem = (_a) => {
-  var _b = _a, { label, disabled, className, onClick, children } = _b, rest = __objRest(_b, ["label", "disabled", "className", "onClick", "children"]);
+  var _b = _a, { disabled, className, onClick, children } = _b, rest = __objRest(_b, ["disabled", "className", "onClick", "children"]);
   const { closeMenu } = useMenu();
   const handleClick = () => {
     if (disabled) return;
@@ -5413,7 +5413,7 @@ var MenuItem = (_a) => {
       onClick: disabled ? void 0 : handleClick,
       onKeyDown: handleKeyDown
     }, rest), {
-      children: children != null ? children : label
+      children
     })
   );
 };

package/dist/index.mjs

@@ -4995,8 +4995,8 @@ function ConfirmDialogContent({
 }
 var show2 = (options) => {
   Dialog_default.show(__spreadProps(__spreadValues({
-    dismissOnEsc: false,
-    dismissOnOutsideClick: false
+    dismissOnEsc: true,
+    dismissOnOutsideClick: true
   }, options), {
     className: classNames("GeckoUIConfirmDialog__dialog", options.className),
     content: ({ dismiss: dismiss2 }) => /* @__PURE__ */ jsx55(ConfirmDialogContent, __spreadProps(__spreadValues({}, options), { dismiss: dismiss2 }))
@@ -5301,7 +5301,7 @@ var Menu_default = Menu;
 // src/components/Menu/MenuItem/MenuItem.tsx
 import { jsx as jsx62 } from "react/jsx-runtime";
 var MenuItem = (_a) => {
-  var _b = _a, { label, disabled, className, onClick, children } = _b, rest = __objRest(_b, ["label", "disabled", "className", "onClick", "children"]);
+  var _b = _a, { disabled, className, onClick, children } = _b, rest = __objRest(_b, ["disabled", "className", "onClick", "children"]);
   const { closeMenu } = useMenu();
   const handleClick = () => {
     if (disabled) return;
@@ -5325,7 +5325,7 @@ var MenuItem = (_a) => {
       onClick: disabled ? void 0 : handleClick,
       onKeyDown: handleKeyDown
     }, rest), {
-      children: children != null ? children : label
+      children
     })
   );
 };

package/package.json

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