automoby-kit 1.0.59 → 1.0.60

package/dist/cjs/Menu.js

@@ -1 +1 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("./utils.js"),n=require("./Typography.js");const a=r.forwardRef(({buttonText:a,items:l,disabled:i=!1,className:s,onOpenChange:o,isOpen:d,"aria-label":u,...c},p)=>{const[m,x]=r.useState(!1),g=r.useRef(null),b=r.useRef(null),y=void 0!==d?d:m,handleToggle=()=>{if(i)return;const e=!y;void 0===d&&x(e),o?.(e)};r.useEffect(()=>{const handleClickOutside=e=>{g.current&&!g.current.contains(e.target)&&(void 0===d&&x(!1),o?.(!1))};if(y)return document.addEventListener("mousedown",handleClickOutside),()=>{document.removeEventListener("mousedown",handleClickOutside)}},[y,d,o]);const f=t("inline-flex items-center justify-center","bg-white border border-neutral-light","rounded-md transition-colors duration-200","px-2 py-1 sm:px-3 sm:py-2 md:px-4 md:py-3 lg:px-6 lg:py-4 xl:px-8 xl:py-5","min-w-16 sm:min-w-20 md:min-w-24 lg:min-w-32 xl:min-w-40","hover:bg-neutral-lighter","focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",{"opacity-50 cursor-not-allowed":i,"cursor-pointer":!i}),h=t("absolute top-full z-10 mt-1","bg-white border border-neutral-light","rounded-md shadow-lg","left-0 right-0 sm:left-0 sm:right-auto sm:min-w-40 md:min-w-48 lg:min-w-56 xl:min-w-64","py-1 px-2 sm:py-2 sm:px-3 md:py-3 md:px-4 lg:py-4 lg:px-6 xl:py-5 xl:px-8","transition-all duration-200",{"opacity-100 translate-y-0 pointer-events-auto":y,"opacity-0 -translate-y-2 pointer-events-none":!y}),v=t("block w-full text-right","transition-colors duration-200","hover:bg-neutral-lighter rounded","focus:outline-none focus:bg-neutral-lighter","px-1 py-0.5 sm:px-2 sm:py-1 md:px-3 md:py-2 lg:px-4 lg:py-3 xl:px-5 xl:py-4","-mx-1 sm:-mx-2 md:-mx-3 lg:-mx-4 xl:-mx-5");return e.jsx("div",{ref:p,className:t("relative inline-block",s),...c,children:e.jsxs("div",{ref:g,children:[e.jsx("button",{ref:b,type:"button",className:f,onClick:handleToggle,onKeyDown:e=>{if(!i)switch(e.key){case"Escape":y&&(e.preventDefault(),void 0===d&&x(!1),o?.(!1),b.current?.focus());break;case"ArrowDown":y||(e.preventDefault(),handleToggle());break;case"Enter":case" ":e.preventDefault(),handleToggle()}},disabled:i,"aria-expanded":y,"aria-haspopup":"true","aria-label":u||`منوی ${a}`,children:e.jsx(n.Typography,{variant:"body-s-heavy",color:"neutral-darker",className:"text-right",children:a})}),e.jsx("div",{className:h,children:e.jsx("div",{className:"flex flex-col gap-1 sm:gap-2 md:gap-3 lg:gap-4 xl:gap-5",children:l.map(r=>{const a=e.jsx(n.Typography,{variant:"body-s-heavy",color:r.disabled?"neutral-main":"neutral-darker",className:"text-right",children:r.label}),l={className:t(v,{"opacity-50 cursor-not-allowed":r.disabled,"cursor-pointer":!r.disabled}),onClick:r.disabled?void 0:()=>(e=>{e.disabled||(void 0===d&&x(!1),o?.(!1),e.onClick?.())})(r),"aria-label":`منوی ${r.label}`};return r.href&&!r.disabled?e.jsx("a",{...l,href:r.href,role:"menuitem",tabIndex:y?0:-1,children:a},r.id):e.jsx("button",{...l,type:"button",role:"menuitem",tabIndex:y?0:-1,disabled:r.disabled,children:a},r.id)})})})]})})});a.displayName="Menu",exports.Menu=a;
+"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("./utils.js"),n=require("./Typography.js");const a=r.forwardRef(({buttonText:a,items:l,disabled:i=!1,wrapperClassName:s,buttonClassName:o,onOpenChange:d,isOpen:u,"aria-label":p,...c},m)=>{const[x,b]=r.useState(!1),g=r.useRef(null),y=r.useRef(null),f=void 0!==u?u:x,handleToggle=()=>{if(i)return;const e=!f;void 0===u&&b(e),d?.(e)};r.useEffect(()=>{const handleClickOutside=e=>{g.current&&!g.current.contains(e.target)&&(void 0===u&&b(!1),d?.(!1))};if(f)return document.addEventListener("mousedown",handleClickOutside),()=>{document.removeEventListener("mousedown",handleClickOutside)}},[f,u,d]);const h=t("inline-flex items-center justify-center","bg-white border border-neutral-light","rounded-md transition-colors duration-200","px-2 py-1 sm:px-3 sm:py-2 md:px-4 md:py-3 lg:px-6 lg:py-4 xl:px-8 xl:py-5","min-w-16 sm:min-w-20 md:min-w-24 lg:min-w-32 xl:min-w-40","hover:bg-neutral-lighter","focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",{"opacity-50 cursor-not-allowed":i,"cursor-pointer":!i},o),v=t("absolute top-full z-10 mt-1","bg-white border border-neutral-light","rounded-md shadow-lg","left-0 right-0 sm:left-0 sm:right-auto sm:min-w-40 md:min-w-48 lg:min-w-56 xl:min-w-64","py-1 px-2 sm:py-2 sm:px-3 md:py-3 md:px-4 lg:py-4 lg:px-6 xl:py-5 xl:px-8","transition-all duration-200",{"opacity-100 translate-y-0 pointer-events-auto":f,"opacity-0 -translate-y-2 pointer-events-none":!f}),w=t("block w-full text-right","transition-colors duration-200","hover:bg-neutral-lighter rounded","focus:outline-none focus:bg-neutral-lighter","px-1 py-0.5 sm:px-2 sm:py-1 md:px-3 md:py-2 lg:px-4 lg:py-3 xl:px-5 xl:py-4","-mx-1 sm:-mx-2 md:-mx-3 lg:-mx-4 xl:-mx-5");return e.jsx("div",{ref:m,className:t("relative inline-block",s),...c,children:e.jsxs("div",{ref:g,children:[e.jsx("button",{ref:y,type:"button",className:h,onClick:handleToggle,onKeyDown:e=>{if(!i)switch(e.key){case"Escape":f&&(e.preventDefault(),void 0===u&&b(!1),d?.(!1),y.current?.focus());break;case"ArrowDown":f||(e.preventDefault(),handleToggle());break;case"Enter":case" ":e.preventDefault(),handleToggle()}},disabled:i,"aria-expanded":f,"aria-haspopup":"true","aria-label":p||`منوی ${a}`,children:e.jsx(n.Typography,{variant:"body-s-heavy",color:"neutral-darker",className:"text-right",children:a})}),e.jsx("div",{className:v,children:e.jsx("div",{className:"flex flex-col gap-1 sm:gap-2 md:gap-3 lg:gap-4 xl:gap-5",children:l.map(r=>{const a=e.jsx(n.Typography,{variant:"body-s-heavy",color:r.disabled?"neutral-main":"neutral-darker",className:"text-right",children:r.label}),l={className:t(w,{"opacity-50 cursor-not-allowed":r.disabled,"cursor-pointer":!r.disabled}),onClick:r.disabled?void 0:()=>(e=>{e.disabled||(void 0===u&&b(!1),d?.(!1),e.onClick?.())})(r),"aria-label":`منوی ${r.label}`};return r.href&&!r.disabled?e.jsx("a",{...l,href:r.href,role:"menuitem",tabIndex:f?0:-1,children:a},r.id):e.jsx("button",{...l,type:"button",role:"menuitem",tabIndex:f?0:-1,disabled:r.disabled,children:a},r.id)})})})]})})});a.displayName="Menu",exports.Menu=a;

package/dist/esm/Menu.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import t,{useState as n,useRef as l,useEffect as a}from"react";import i from"./utils.js";import{Typography as o}from"./Typography.js";const s=t.forwardRef(({buttonText:t,items:s,disabled:d=!1,className:m,onOpenChange:p,isOpen:c,"aria-label":u,...x},b)=>{const[g,f]=n(!1),y=l(null),h=l(null),v=void 0!==c?c:g,handleToggle=()=>{if(d)return;const e=!v;void 0===c&&f(e),p?.(e)};a(()=>{const handleClickOutside=e=>{y.current&&!y.current.contains(e.target)&&(void 0===c&&f(!1),p?.(!1))};if(v)return document.addEventListener("mousedown",handleClickOutside),()=>{document.removeEventListener("mousedown",handleClickOutside)}},[v,c,p]);const w=i("inline-flex items-center justify-center","bg-white border border-neutral-light","rounded-md transition-colors duration-200","px-2 py-1 sm:px-3 sm:py-2 md:px-4 md:py-3 lg:px-6 lg:py-4 xl:px-8 xl:py-5","min-w-16 sm:min-w-20 md:min-w-24 lg:min-w-32 xl:min-w-40","hover:bg-neutral-lighter","focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",{"opacity-50 cursor-not-allowed":d,"cursor-pointer":!d}),k=i("absolute top-full z-10 mt-1","bg-white border border-neutral-light","rounded-md shadow-lg","left-0 right-0 sm:left-0 sm:right-auto sm:min-w-40 md:min-w-48 lg:min-w-56 xl:min-w-64","py-1 px-2 sm:py-2 sm:px-3 md:py-3 md:px-4 lg:py-4 lg:px-6 xl:py-5 xl:px-8","transition-all duration-200",{"opacity-100 translate-y-0 pointer-events-auto":v,"opacity-0 -translate-y-2 pointer-events-none":!v}),N=i("block w-full text-right","transition-colors duration-200","hover:bg-neutral-lighter rounded","focus:outline-none focus:bg-neutral-lighter","px-1 py-0.5 sm:px-2 sm:py-1 md:px-3 md:py-2 lg:px-4 lg:py-3 xl:px-5 xl:py-4","-mx-1 sm:-mx-2 md:-mx-3 lg:-mx-4 xl:-mx-5");return e("div",{ref:b,className:i("relative inline-block",m),...x,children:r("div",{ref:y,children:[e("button",{ref:h,type:"button",className:w,onClick:handleToggle,onKeyDown:e=>{if(!d)switch(e.key){case"Escape":v&&(e.preventDefault(),void 0===c&&f(!1),p?.(!1),h.current?.focus());break;case"ArrowDown":v||(e.preventDefault(),handleToggle());break;case"Enter":case" ":e.preventDefault(),handleToggle()}},disabled:d,"aria-expanded":v,"aria-haspopup":"true","aria-label":u||`منوی ${t}`,children:e(o,{variant:"body-s-heavy",color:"neutral-darker",className:"text-right",children:t})}),e("div",{className:k,children:e("div",{className:"flex flex-col gap-1 sm:gap-2 md:gap-3 lg:gap-4 xl:gap-5",children:s.map(r=>{const t=e(o,{variant:"body-s-heavy",color:r.disabled?"neutral-main":"neutral-darker",className:"text-right",children:r.label}),n={className:i(N,{"opacity-50 cursor-not-allowed":r.disabled,"cursor-pointer":!r.disabled}),onClick:r.disabled?void 0:()=>(e=>{e.disabled||(void 0===c&&f(!1),p?.(!1),e.onClick?.())})(r),"aria-label":`منوی ${r.label}`};return r.href&&!r.disabled?e("a",{...n,href:r.href,role:"menuitem",tabIndex:v?0:-1,children:t},r.id):e("button",{...n,type:"button",role:"menuitem",tabIndex:v?0:-1,disabled:r.disabled,children:t},r.id)})})})]})})});s.displayName="Menu";export{s as Menu};
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import t,{useState as n,useRef as l,useEffect as a}from"react";import i from"./utils.js";import{Typography as o}from"./Typography.js";const s=t.forwardRef(({buttonText:t,items:s,disabled:d=!1,wrapperClassName:m,buttonClassName:p,onOpenChange:c,isOpen:u,"aria-label":x,...b},g)=>{const[f,y]=n(!1),h=l(null),v=l(null),w=void 0!==u?u:f,handleToggle=()=>{if(d)return;const e=!w;void 0===u&&y(e),c?.(e)};a(()=>{const handleClickOutside=e=>{h.current&&!h.current.contains(e.target)&&(void 0===u&&y(!1),c?.(!1))};if(w)return document.addEventListener("mousedown",handleClickOutside),()=>{document.removeEventListener("mousedown",handleClickOutside)}},[w,u,c]);const k=i("inline-flex items-center justify-center","bg-white border border-neutral-light","rounded-md transition-colors duration-200","px-2 py-1 sm:px-3 sm:py-2 md:px-4 md:py-3 lg:px-6 lg:py-4 xl:px-8 xl:py-5","min-w-16 sm:min-w-20 md:min-w-24 lg:min-w-32 xl:min-w-40","hover:bg-neutral-lighter","focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",{"opacity-50 cursor-not-allowed":d,"cursor-pointer":!d},p),N=i("absolute top-full z-10 mt-1","bg-white border border-neutral-light","rounded-md shadow-lg","left-0 right-0 sm:left-0 sm:right-auto sm:min-w-40 md:min-w-48 lg:min-w-56 xl:min-w-64","py-1 px-2 sm:py-2 sm:px-3 md:py-3 md:px-4 lg:py-4 lg:px-6 xl:py-5 xl:px-8","transition-all duration-200",{"opacity-100 translate-y-0 pointer-events-auto":w,"opacity-0 -translate-y-2 pointer-events-none":!w}),C=i("block w-full text-right","transition-colors duration-200","hover:bg-neutral-lighter rounded","focus:outline-none focus:bg-neutral-lighter","px-1 py-0.5 sm:px-2 sm:py-1 md:px-3 md:py-2 lg:px-4 lg:py-3 xl:px-5 xl:py-4","-mx-1 sm:-mx-2 md:-mx-3 lg:-mx-4 xl:-mx-5");return e("div",{ref:g,className:i("relative inline-block",m),...b,children:r("div",{ref:h,children:[e("button",{ref:v,type:"button",className:k,onClick:handleToggle,onKeyDown:e=>{if(!d)switch(e.key){case"Escape":w&&(e.preventDefault(),void 0===u&&y(!1),c?.(!1),v.current?.focus());break;case"ArrowDown":w||(e.preventDefault(),handleToggle());break;case"Enter":case" ":e.preventDefault(),handleToggle()}},disabled:d,"aria-expanded":w,"aria-haspopup":"true","aria-label":x||`منوی ${t}`,children:e(o,{variant:"body-s-heavy",color:"neutral-darker",className:"text-right",children:t})}),e("div",{className:N,children:e("div",{className:"flex flex-col gap-1 sm:gap-2 md:gap-3 lg:gap-4 xl:gap-5",children:s.map(r=>{const t=e(o,{variant:"body-s-heavy",color:r.disabled?"neutral-main":"neutral-darker",className:"text-right",children:r.label}),n={className:i(C,{"opacity-50 cursor-not-allowed":r.disabled,"cursor-pointer":!r.disabled}),onClick:r.disabled?void 0:()=>(e=>{e.disabled||(void 0===u&&y(!1),c?.(!1),e.onClick?.())})(r),"aria-label":`منوی ${r.label}`};return r.href&&!r.disabled?e("a",{...n,href:r.href,role:"menuitem",tabIndex:w?0:-1,children:t},r.id):e("button",{...n,type:"button",role:"menuitem",tabIndex:w?0:-1,disabled:r.disabled,children:t},r.id)})})})]})})});s.displayName="Menu";export{s as Menu};

package/dist/types/Menu.js

@@ -3,7 +3,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import cn from './utils.js';
 import { Typography } from './Typography.js';
 
-const Menu = React.forwardRef(({ buttonText, items, disabled = false, className, onOpenChange, isOpen: controlledIsOpen, 'aria-label': ariaLabel, ...props }, ref) => {
+const Menu = React.forwardRef(({ buttonText, items, disabled = false, wrapperClassName, buttonClassName, onOpenChange, isOpen: controlledIsOpen, 'aria-label': ariaLabel, ...props }, ref) => {
     const [internalIsOpen, setInternalIsOpen] = useState(false);
     const menuRef = useRef(null);
     const buttonRef = useRef(null);
@@ -87,7 +87,7 @@ const Menu = React.forwardRef(({ buttonText, items, disabled = false, className,
     {
         'opacity-50 cursor-not-allowed': disabled,
         'cursor-pointer': !disabled,
-    });
+    }, buttonClassName);
     const dropdownClasses = cn(
     // Base dropdown styles
     'absolute top-full z-10 mt-1', 'bg-white border border-neutral-light', 'rounded-md shadow-lg', 
@@ -105,7 +105,7 @@ const Menu = React.forwardRef(({ buttonText, items, disabled = false, className,
     'px-1 py-0.5 sm:px-2 sm:py-1 md:px-3 md:py-2 lg:px-4 lg:py-3 xl:px-5 xl:py-4', 
     // Enhanced responsive margins
     '-mx-1 sm:-mx-2 md:-mx-3 lg:-mx-4 xl:-mx-5');
-    return (jsx("div", { ref: ref, className: cn('relative inline-block', className), ...props, children: jsxs("div", { ref: menuRef, children: [jsx("button", { ref: buttonRef, type: "button", className: buttonClasses, onClick: handleToggle, onKeyDown: handleKeyDown, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "true", "aria-label": ariaLabel || `منوی ${buttonText}`, children: jsx(Typography, { variant: "body-s-heavy", color: "neutral-darker", className: "text-right", children: buttonText }) }), jsx("div", { className: dropdownClasses, children: jsx("div", { className: "flex flex-col gap-1 sm:gap-2 md:gap-3 lg:gap-4 xl:gap-5", children: items.map((item) => {
+    return (jsx("div", { ref: ref, className: cn('relative inline-block', wrapperClassName), ...props, children: jsxs("div", { ref: menuRef, children: [jsx("button", { ref: buttonRef, type: "button", className: buttonClasses, onClick: handleToggle, onKeyDown: handleKeyDown, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "true", "aria-label": ariaLabel || `منوی ${buttonText}`, children: jsx(Typography, { variant: "body-s-heavy", color: "neutral-darker", className: "text-right", children: buttonText }) }), jsx("div", { className: dropdownClasses, children: jsx("div", { className: "flex flex-col gap-1 sm:gap-2 md:gap-3 lg:gap-4 xl:gap-5", children: items.map((item) => {
                             const content = (jsx(Typography, { variant: "body-s-heavy", color: item.disabled ? 'neutral-main' : 'neutral-darker', className: "text-right", children: item.label }));
                             const commonProps = {
                                 className: cn(itemClasses, {

package/dist/types/components/Menu/Menu.d.ts

@@ -20,9 +20,13 @@ export interface MenuProps {
      */
     disabled?: boolean;
     /**
-     * Additional CSS classes for the menu container
+     * Additional CSS classes for the menu wrapper container
      */
-    className?: string;
+    wrapperClassName?: string;
+    /**
+     * Additional CSS classes for the main menu button
+     */
+    buttonClassName?: string;
     /**
      * Callback fired when menu open state changes
      */

package/dist/types/components/Menu/Menu.stories.d.ts

@@ -31,6 +31,20 @@ declare const _default: {
                 type: string;
             };
         };
+        wrapperClassName: {
+            name: string;
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        buttonClassName: {
+            name: string;
+            control: {
+                type: string;
+            };
+            description: string;
+        };
         items: {
             name: string;
             control: {
@@ -44,6 +58,8 @@ type StoryProps = {
     buttonText: string;
     disabled: boolean;
     isOpen?: boolean;
+    wrapperClassName?: string;
+    buttonClassName?: string;
     items: MenuItem[];
 };
 export declare const Playground: {
@@ -79,6 +95,10 @@ export declare const ControlledMenu: {
     (): import("react/jsx-runtime").JSX.Element;
     storyName: string;
 };
+export declare const CustomStyling: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
 export declare const ResponsiveDemo: {
     (): import("react/jsx-runtime").JSX.Element;
     storyName: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "automoby-kit",
-  "version": "1.0.59",
+  "version": "1.0.60",
   "description": "A comprehensive React UI component library - created in war 2025",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",