automoby-kit 1.0.12 → 1.0.13

package/README.md

@@ -1,6 +1,6 @@
 # Automoby Kit
 
-A comprehensive React UI component library with built-in licensing system.
+A comprehensive React UI component library - created in war 2025.
 
 ## 🚀 Installation
 
@@ -8,42 +8,16 @@ A comprehensive React UI component library with built-in licensing system.
 npm install automoby-kit
 ```
 
-## 🔑 License Initialization (Required)
-
-**Important**: You must initialize Automoby Kit with a valid license key before using any components.
-
-```typescript
-import { initializeAutomobiKit } from 'automoby-kit';
-
-// Initialize with your license key (call this once at the start of your app)
-const success = initializeAutomobiKit({
-  key: 'your-license-key-here'
-});
-
-if (success) {
-  console.log('✅ Automoby Kit initialized successfully');
-} else {
-  console.error('❌ Failed to initialize Automoby Kit');
-}
-```
 ## 📦 Usage
 
-After successful initialization, you can use any component:
-
 ```typescript
 import { 
   Button, 
   Typography, 
   Input, 
-  Tabs,
-  initializeAutomobiKit 
+  Tabs
 } from 'automoby-kit';
 
-// Initialize first
-initializeAutomobiKit({
-  key: '-------------------'
-});
-
 function App() {
   return (
     <div>
@@ -71,38 +45,7 @@ function App() {
 - **Divider** - Visual separators
 - **RadioGroup** - Radio button groups
 - **Chips** - Tag-like elements
-
-## 🔧 License Management Functions
-
-```typescript
-import { 
-  initializeAutomobiKit, 
-  getLicenseStatus, 
-  canUseComponents 
-} from 'automoby-kit';
-
-// Check if components can be used
-const canUse = canUseComponents();
-
-// Get detailed license status
-const status = getLicenseStatus();
-console.log(status);
-// {
-//   initialized: true,
-//   valid: true,
-//   key: "automoby-..."
-// }
-```
-
-## ⚠️ What Happens Without a Valid License?
-
-If you try to use components without proper initialization or with an invalid key, you'll see a license error component instead of the actual component:
-
-```
-🔒 License Required
-Component "Button" requires a valid license key.
-Please initialize Automoby Kit with your license key before using components.
-```
+- **Menu** - Context menus and dropdowns
 
 ## 🏗️ TypeScript Support
 
@@ -129,8 +72,6 @@ function App() {
       <MyComponent />
     </MobileProvider>
   );
-}
-  );
 }
 ```
 
@@ -147,18 +88,13 @@ This package requires the following peer dependencies:
 }
 ```
 
-## 📄 License
-
-This is a commercial package. You need a valid license key to use it in production.
-
 ## 🆘 Support
 
-If you need a license key or have issues:
+If you have issues:
 
-1. Contact our sales team for licensing
-2. Check the [GitHub issues](https://github.com/yourusername/automoby-kit/issues) for known problems
-3. Make sure you're calling `initializeAutomobiKit()` before using any components
+1. Check the [GitHub issues](https://github.com/yourusername/automoby-kit/issues) for known problems
+2. Submit a new issue with detailed information about your problem
 
 ## 🔄 Version History
 
-- **1.0.0** - Initial release with licensing system 
+- **1.0.0** - Initial release 

package/dist/cjs/Accordion.js

@@ -1 +1,59 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),a=require("./utils.js"),i=require("./Typography.js"),s=require("./chunks/createLucideIcon-BqJVOzoK.js");const t=s.createLucideIcon("chevron-down",[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]]),n=s.createLucideIcon("chevron-up",[["path",{d:"m18 15-6-6-6 6",key:"153udz"}]]),d=r.forwardRef(({title:s,body:d,startIcon:o,isExpanded:l,onToggle:c,defaultExpanded:u=!1,className:h,id:m,disabled:x=!1,isMobile:p,...f},y)=>{const[b,v]=r.useState(u),j=void 0!==l?l:b,g=m||`accordion-${Math.random().toString(36).substr(2,9)}`,N=`${g}-header`,k=`${g}-content`,w=p?20:24,q=p?"body-s-heavy":"body-l-heavy",I=p?"body-s-medium":"body-m-medium";return e.jsxs("div",{ref:y,className:a("rounded-2xl border-0 overflow-hidden","transition-all duration-200 ease-in-out",h),...f,children:[e.jsxs("button",{id:N,type:"button",onClick:()=>{if(x)return;const e=!j;void 0===l&&v(e),c?.(e)},disabled:x,"aria-expanded":j,"aria-controls":k,className:a("w-full flex items-center justify-between",p?"p-3":"p-4","focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2","disabled:opacity-50 disabled:cursor-not-allowed","transition-all duration-200 ease-in-out",!x&&"hover:bg-neutral-lighter"),children:[e.jsx("div",{className:"flex-shrink-0 mr-4",children:j?e.jsx(n,{size:w,className:"text-neutral-darker transition-transform duration-200","aria-hidden":"true"}):e.jsx(t,{size:w,className:"text-neutral-darker transition-transform duration-200","aria-hidden":"true"})}),e.jsxs("div",{className:a("flex items-center flex-1",p?"gap-3":"gap-4"),children:[e.jsx("div",{className:"flex-1 text-right",children:e.jsx(i.Typography,{variant:q,color:"neutral-darker",children:s})}),o&&e.jsx("div",{className:a("flex-shrink-0 flex items-center justify-center",p?"w-6 h-6":"w-8 h-8"),children:o})]})]}),e.jsx("div",{id:k,role:"region","aria-labelledby":N,className:a("w-full overflow-hidden transition-all duration-300 ease-in-out",j?"max-h-screen opacity-100":"max-h-0 opacity-0"),children:e.jsx("div",{className:a(p?"pb-3 mt-1":"pb-4 mt-1.5"),children:e.jsx("div",{className:a("bg-neutral-lighter rounded-lg",p?"p-3":"p-4"),children:e.jsx(i.Typography,{variant:I,color:"neutral-dark",children:d})})})})]})});d.displayName="Accordion",exports.Accordion=d;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('./utils.js');
+var contexts = require('./contexts.js');
+var Typography = require('./Typography.js');
+var createLucideIcon = require('./createLucideIcon-BTjFFtDc.js');
+
+/**
+ * @license lucide-react v0.522.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$1 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon.createLucideIcon("chevron-down", __iconNode$1);
+
+/**
+ * @license lucide-react v0.522.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon.createLucideIcon("chevron-up", __iconNode);
+
+const Accordion = React.forwardRef(({ title, body, startIcon, isExpanded: controlledExpanded, onToggle, defaultExpanded = false, className, id, disabled = false, isMobile, ...props }, ref) => {
+    const detectedIsMobile = contexts.useMobile();
+    const actualIsMobile = isMobile ?? detectedIsMobile;
+    const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);
+    // Use controlled state if provided, otherwise use internal state
+    const isExpanded = controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
+    const handleToggle = () => {
+        if (disabled)
+            return;
+        const newExpanded = !isExpanded;
+        if (controlledExpanded === undefined) {
+            setInternalExpanded(newExpanded);
+        }
+        onToggle?.(newExpanded);
+    };
+    const accordionId = id || `accordion-${Math.random().toString(36).substr(2, 9)}`;
+    const headerId = `${accordionId}-header`;
+    const contentId = `${accordionId}-content`;
+    // Icon size based on device
+    const iconSize = actualIsMobile ? 20 : 24;
+    // Typography variants based on device
+    const titleVariant = actualIsMobile ? 'body-s-heavy' : 'body-l-heavy';
+    const bodyVariant = actualIsMobile ? 'body-s-medium' : 'body-m-medium';
+    return (jsxRuntime.jsxs("div", { ref: ref, className: utils('rounded-2xl border-0 overflow-hidden', 'transition-all duration-200 ease-in-out', className), ...props, children: [jsxRuntime.jsxs("button", { id: headerId, type: "button", onClick: handleToggle, disabled: disabled, "aria-expanded": isExpanded, "aria-controls": contentId, className: utils('w-full flex items-center justify-between', actualIsMobile ? 'p-3' : 'p-4', 'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed', 'transition-all duration-200 ease-in-out', !disabled && 'hover:bg-neutral-lighter'), children: [jsxRuntime.jsx("div", { className: "flex-shrink-0 mr-4", children: isExpanded ? (jsxRuntime.jsx(ChevronUp, { size: iconSize, className: "text-neutral-darker transition-transform duration-200", "aria-hidden": "true" })) : (jsxRuntime.jsx(ChevronDown, { size: iconSize, className: "text-neutral-darker transition-transform duration-200", "aria-hidden": "true" })) }), jsxRuntime.jsxs("div", { className: utils('flex items-center flex-1', actualIsMobile ? 'gap-3' : 'gap-4'), children: [jsxRuntime.jsx("div", { className: "flex-1 text-right", children: jsxRuntime.jsx(Typography.Typography, { variant: titleVariant, color: "neutral-darker", children: title }) }), startIcon && (jsxRuntime.jsx("div", { className: utils('flex-shrink-0 flex items-center justify-center', actualIsMobile ? 'w-6 h-6' : 'w-8 h-8'), children: startIcon }))] })] }), jsxRuntime.jsx("div", { id: contentId, role: "region", "aria-labelledby": headerId, className: utils('w-full overflow-hidden transition-all duration-300 ease-in-out', isExpanded ? 'max-h-screen opacity-100' : 'max-h-0 opacity-0'), children: jsxRuntime.jsx("div", { className: utils(actualIsMobile ? 'pb-3 mt-1' : 'pb-4 mt-1.5'), children: jsxRuntime.jsx("div", { className: utils('bg-neutral-lighter rounded-lg', actualIsMobile ? 'p-3' : 'p-4'), children: jsxRuntime.jsx(Typography.Typography, { variant: bodyVariant, color: "neutral-dark", children: body }) }) }) })] }));
+});
+Accordion.displayName = 'Accordion';
+
+exports.Accordion = Accordion;

package/dist/cjs/Backdrop.js

@@ -1 +1,26 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("./utils.js");const a=r.forwardRef(({isOpen:r=!1,onClick:a,blur:n=!1,zIndex:i=51,className:o,children:s,...c},d)=>{const l=t("fixed inset-0 transition-all duration-300",{"opacity-100 pointer-events-auto":r,"opacity-0 pointer-events-none":!r,"backdrop-blur-sm":n},o),u={backgroundColor:"rgba(0, 0, 0, 0.60)",zIndex:i};return e.jsx("div",{ref:d,className:l,style:u,onClick:e=>{a&&e.target===e.currentTarget&&a()},role:"presentation","aria-hidden":!r,...c,children:s})});a.displayName="Backdrop",exports.Backdrop=a;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('./utils.js');
+
+const Backdrop = React.forwardRef(({ isOpen = false, onClick, blur = false, zIndex = 51, className, children, ...props }, ref) => {
+    const handleClick = (event) => {
+        if (onClick && event.target === event.currentTarget) {
+            onClick();
+        }
+    };
+    const backdropClasses = utils('fixed inset-0 transition-all duration-300', {
+        'opacity-100 pointer-events-auto': isOpen,
+        'opacity-0 pointer-events-none': !isOpen,
+        'backdrop-blur-sm': blur,
+    }, className);
+    const backdropStyle = {
+        backgroundColor: 'rgba(0, 0, 0, 0.60)',
+        zIndex,
+    };
+    return (jsxRuntime.jsx("div", { ref: ref, className: backdropClasses, style: backdropStyle, onClick: handleClick, role: "presentation", "aria-hidden": !isOpen, ...props, children: children }));
+});
+Backdrop.displayName = 'Backdrop';
+
+exports.Backdrop = Backdrop;

package/dist/cjs/Breadcrumb.js

@@ -1 +1,61 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),a=require("./utils.js"),t=require("./chunks/chevron-left-Do__K6cA.js");require("./chunks/createLucideIcon-BqJVOzoK.js");const n=r.forwardRef(({items:r,className:n,isMobile:l},s)=>e.jsx("nav",{ref:s,className:a("flex flex-row-reverse items-center",l?"gap-1 px-4 py-2.5":"gap-3 pr-1 pt-3 pb-4 pl-0",n),"aria-label":"Breadcrumb navigation",children:e.jsx("ol",{className:"flex flex-row-reverse items-center gap-inherit",children:r.map((n,s)=>{const i=s===r.length-1,c=!i&&(n.href||n.onClick),o=`${n.label}-${s}`;return e.jsxs("li",{className:"flex items-center gap-inherit",children:[c?e.jsx("a",{href:n.href||"#",className:a("whitespace-nowrap border-0 bg-transparent p-0 no-underline",l?"text-t":"text-s","text-neutral-main","cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm"),onClick:e=>((e,a,t)=>{a!==r.length-1&&e.onClick&&(t.preventDefault(),e.onClick())})(n,s,e),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),n.onClick&&n.onClick())},"aria-label":`Go to ${n.label}`,children:n.label}):e.jsx("span",{className:a("whitespace-nowrap",l?"text-t":"text-s","text-neutral-main","font-medium"),"aria-current":i?"page":void 0,"aria-label":i?`Current page: ${n.label}`:void 0,children:n.label}),!i&&e.jsx(t.ChevronLeft,{className:a("text-black flex-shrink-0",l?"w-2.5 h-2.5":"w-3 h-3"),"aria-hidden":"true"})]},o)})})}));n.displayName="Breadcrumb",exports.Breadcrumb=n;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('./utils.js');
+var contexts = require('./contexts.js');
+var chevronLeft = require('./chevron-left-COj1qGVo.js');
+require('./createLucideIcon-BTjFFtDc.js');
+
+const Breadcrumb = React.forwardRef(({ items, className, isMobile }, ref) => {
+    const detectedIsMobile = contexts.useMobile();
+    const actualIsMobile = isMobile ?? detectedIsMobile;
+    const handleItemClick = (item, index, e) => {
+        // Don't make the last item (current page) clickable
+        if (index === items.length - 1)
+            return;
+        if (item.onClick) {
+            e.preventDefault();
+            item.onClick();
+        }
+        // If item has href, let the anchor tag handle navigation naturally
+    };
+    return (jsxRuntime.jsx("nav", { ref: ref, className: utils(
+        // Base layout - RTL with flex-row-reverse to show items right to left
+        'flex flex-row-reverse items-center', 
+        // Responsive gap and padding based on mobile state
+        actualIsMobile ? 'gap-1 px-4 py-2.5' : 'gap-3 pr-1 pt-3 pb-4 pl-0', className), "aria-label": "Breadcrumb navigation", children: jsxRuntime.jsx("ol", { className: "flex flex-row-reverse items-center gap-inherit", children: items.map((item, index) => {
+                const isLast = index === items.length - 1;
+                const isClickable = !isLast && (item.href || item.onClick);
+                const itemKey = `${item.label}-${index}`;
+                return (jsxRuntime.jsxs("li", { className: "flex items-center gap-inherit", children: [isClickable ? (jsxRuntime.jsx("a", { href: item.href || '#', className: utils(
+                            // Base styles
+                            'whitespace-nowrap border-0 bg-transparent p-0 no-underline', 
+                            // Responsive font size based on mobile state
+                            actualIsMobile ? 'text-t' : 'text-s', 
+                            // Color
+                            'text-neutral-main', 
+                            // Cursor and hover effects for clickable items
+                            'cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm'), onClick: (e) => handleItemClick(item, index, e), onKeyDown: (e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault();
+                                    if (item.onClick) {
+                                        item.onClick();
+                                    }
+                                }
+                            }, "aria-label": `Go to ${item.label}`, children: item.label })) : (jsxRuntime.jsx("span", { className: utils(
+                            // Base styles
+                            'whitespace-nowrap', 
+                            // Responsive font size based on mobile state
+                            actualIsMobile ? 'text-t' : 'text-s', 
+                            // Color
+                            'text-neutral-main', 
+                            // Different styles for current page (last item)
+                            'font-medium'), "aria-current": isLast ? 'page' : undefined, "aria-label": isLast ? `Current page: ${item.label}` : undefined, children: item.label })), !isLast && (jsxRuntime.jsx(chevronLeft.ChevronLeft, { className: utils('text-black flex-shrink-0', 
+                            // Responsive icon size
+                            actualIsMobile ? 'w-2.5 h-2.5' : 'w-3 h-3'), "aria-hidden": "true" }))] }, itemKey));
+            }) }) }));
+});
+Breadcrumb.displayName = 'Breadcrumb';
+
+exports.Breadcrumb = Breadcrumb;

package/dist/cjs/Button.js

@@ -1 +1,48 @@
-"use strict";var r=require("react/jsx-runtime"),e=require("react"),a=require("./utils.js"),t=require("./Typography.js");const l={sm:"px-[16px] py-[7px]",md:"px-[16px] py-[9px]",lg:"px-[16px] py-[13px]",xl:"px-[20px] py-[13px]"},o={sm:"body-s-bold",md:"body-m-bold",lg:"body-l-bold",xl:"body-xl-heavy"},i={primary:"\n    bg-[var(--color-primary)] text-white\n    hover:bg-[var(--color-primary-dark)]\n    disabled:bg-[var(--color-neutral-light)] disabled:text-[var(--color-neutral-darker)]\n  ",secondary:"\n    bg-[var(--color-primary-lightest)] text-[var(--color-primary)]\n    hover:bg-[var(--color-primary-lighter)]\n    disabled:bg-[var(--color-neutral-light)] disabled:text-[var(--color-neutral-darker)]\n  ",tertiary:"\n    bg-white border border-[var(--color-primary-light)] text-[var(--color-primary)]\n    hover:bg-[var(--color-neutral-lighter)]\n    disabled:bg-[var(--color-neutral-light)] disabled:text-[var(--color-neutral-darker)]\n  ",ghost:"\n    bg-transparent text-[var(--color-primary)]\n    hover:bg-[var(--color-primary-lightest)]\n    disabled:bg-[var(--color-neutral-light)] disabled:text-[var(--color-neutral-darker)]\n  "},n=e.forwardRef(({className:e,variant:n="primary",size:s="md",icon:d,iconPosition:c="right",children:p,loading:b=!1,disabled:x,textVariant:g,...y},m)=>{const v=g||o[s];return r.jsxs("button",{ref:m,type:"button",className:a("inline-flex items-center justify-center rounded-[8px] transition-colors duration-200",l[s],i[n],t.getTypographyClasses(v),x&&"opacity-50 pointer-events-none",e),disabled:x||b,...y,children:[d&&"left"===c&&r.jsx("span",{className:"mr-2 flex items-center",children:d}),b?"...":p,d&&"right"===c&&r.jsx("span",{className:"ml-2 flex items-center",children:d})]})});n.displayName="Button",exports.Button=n;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('./utils.js');
+var Typography = require('./Typography.js');
+
+const sizeClasses = {
+    sm: 'px-[16px] py-[7px]',
+    md: 'px-[16px] py-[9px]',
+    lg: 'px-[16px] py-[13px]',
+    xl: 'px-[20px] py-[13px]',
+};
+const defaultTextVariants = {
+    sm: 'body-s-bold', // 14px / Bold (600)
+    md: 'body-m-bold', // 16px / Bold (600)
+    lg: 'body-l-bold', // 18px / Bold (600)
+    xl: 'body-xl-heavy', // 20px / Heavy (700)
+};
+const variantClasses = {
+    primary: `
+    bg-[var(--color-primary)] text-white
+    hover:bg-[var(--color-primary-dark)]
+    disabled:bg-[var(--color-neutral-light)] disabled:text-[var(--color-neutral-darker)]
+  `,
+    secondary: `
+    bg-[var(--color-primary-lightest)] text-[var(--color-primary)]
+    hover:bg-[var(--color-primary-lighter)]
+    disabled:bg-[var(--color-neutral-light)] disabled:text-[var(--color-neutral-darker)]
+  `,
+    tertiary: `
+    bg-white border border-[var(--color-primary-light)] text-[var(--color-primary)]
+    hover:bg-[var(--color-neutral-lighter)]
+    disabled:bg-[var(--color-neutral-light)] disabled:text-[var(--color-neutral-darker)]
+  `,
+    ghost: `
+    bg-transparent text-[var(--color-primary)]
+    hover:bg-[var(--color-primary-lightest)]
+    disabled:bg-[var(--color-neutral-light)] disabled:text-[var(--color-neutral-darker)]
+  `,
+};
+const Button = React.forwardRef(({ className, variant = 'primary', size = 'md', icon, iconPosition = 'right', children, loading = false, disabled, textVariant, ...props }, ref) => {
+    const finalTextVariant = textVariant || defaultTextVariants[size];
+    return (jsxRuntime.jsxs("button", { ref: ref, type: "button", className: utils('inline-flex items-center justify-center rounded-[8px] transition-colors duration-200', sizeClasses[size], variantClasses[variant], Typography.getTypographyClasses(finalTextVariant), disabled && 'opacity-50 pointer-events-none', className), disabled: disabled || loading, ...props, children: [icon && iconPosition === 'left' && (jsxRuntime.jsx("span", { className: "mr-2 flex items-center", children: icon })), loading ? '...' : children, icon && iconPosition === 'right' && (jsxRuntime.jsx("span", { className: "ml-2 flex items-center", children: icon }))] }));
+});
+Button.displayName = 'Button';
+
+exports.Button = Button;

package/dist/cjs/Chips.js

@@ -1 +1,117 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("./utils.js");const t=require("./chunks/createLucideIcon-BqJVOzoK.js").createLucideIcon("x",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]),i={purple:{background:"bg-[var(--color-primary-lightest)]",text:"text-[var(--color-primary-darkest)]",border:"border-[var(--color-primary-light)]"},red:{background:"bg-[var(--color-error-light)]",text:"text-[var(--color-error)]",border:"border-[#f0d6d6]"},green:{background:"bg-[var(--color-success-light)]",text:"text-[var(--color-success)]",border:"border-[#d4e8dc]"},orange:{background:"bg-[var(--color-warning-light)]",text:"text-[var(--color-warning)]",border:"border-[#f5e1d1]"},blue:{background:"bg-[var(--color-info-light)]",text:"text-[var(--color-info)]",border:"border-[#d3e9f2]"},white:{background:"bg-[var(--color-white)]",text:"text-[var(--color-neutral-darker)]",border:"border-[var(--color-neutral-light)]"},disabled:{background:"bg-[var(--color-neutral-lighter)]",text:"text-[var(--color-neutral-main)]",border:"border-[var(--color-neutral-light)]"}},a={mobile:{padding:"px-2.5 py-1",gap:"gap-1",iconSize:"size-4",fontSize:"text-[12px]",lineHeight:"leading-[1.8]"},desktop:{padding:"px-3 py-1",gap:"gap-1.5",iconSize:"size-5",fontSize:"text-[14px]",lineHeight:"leading-[24px]"}},n=r.forwardRef(({variant:r="purple",size:n,children:l="متن پیشفرض",disabled:d=!1,onClick:c,onIconClick:s,className:b,isMobile:p,...u},g)=>{const x=i[d?"disabled":r],v=a[n||(p?"mobile":"desktop")],handleIconClick=e=>{e.stopPropagation(),s&&s()};return e.jsxs("div",{ref:g,className:o("relative rounded-[50px] border border-solid inline-flex","flex-row items-center justify-center","font-sans font-bold not-italic","text-nowrap text-right","transition-all duration-200",x.background,x.text,x.border,v.padding,v.gap,v.fontSize,v.lineHeight,c&&!d&&"cursor-pointer hover:opacity-80",d&&"cursor-not-allowed opacity-60",b),onClick:d?void 0:c,onKeyDown:c&&!d?e=>{"Enter"!==e.key&&" "!==e.key||!c||d||(e.preventDefault(),c())}:void 0,tabIndex:c&&!d?0:void 0,role:c?"button":void 0,...u,children:[e.jsx("span",{className:"text-center",children:l}),(()=>{const r=e.jsx(t,{className:o(v.iconSize)});return s?e.jsx("button",{type:"button",onClick:handleIconClick,disabled:d,className:o("flex items-center justify-center","hover:opacity-70 transition-opacity",d&&"cursor-not-allowed opacity-50"),"aria-label":"حذف",children:r}):r})()]})});n.displayName="Chips",exports.Chips=n,exports.default=n;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('./utils.js');
+var contexts = require('./contexts.js');
+var createLucideIcon = require('./createLucideIcon-BTjFFtDc.js');
+
+/**
+ * @license lucide-react v0.522.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon.createLucideIcon("x", __iconNode);
+
+const chipVariants = {
+    purple: {
+        background: 'bg-[var(--color-primary-lightest)]',
+        text: 'text-[var(--color-primary-darkest)]',
+        border: 'border-[var(--color-primary-light)]',
+    },
+    red: {
+        background: 'bg-[var(--color-error-light)]',
+        text: 'text-[var(--color-error)]',
+        border: 'border-[#f0d6d6]',
+    },
+    green: {
+        background: 'bg-[var(--color-success-light)]',
+        text: 'text-[var(--color-success)]',
+        border: 'border-[#d4e8dc]',
+    },
+    orange: {
+        background: 'bg-[var(--color-warning-light)]',
+        text: 'text-[var(--color-warning)]',
+        border: 'border-[#f5e1d1]',
+    },
+    blue: {
+        background: 'bg-[var(--color-info-light)]',
+        text: 'text-[var(--color-info)]',
+        border: 'border-[#d3e9f2]',
+    },
+    white: {
+        background: 'bg-[var(--color-white)]',
+        text: 'text-[var(--color-neutral-darker)]',
+        border: 'border-[var(--color-neutral-light)]',
+    },
+    disabled: {
+        background: 'bg-[var(--color-neutral-lighter)]',
+        text: 'text-[var(--color-neutral-main)]',
+        border: 'border-[var(--color-neutral-light)]',
+    },
+};
+const chipSizes = {
+    mobile: {
+        padding: 'px-2.5 py-1',
+        gap: 'gap-1',
+        iconSize: 'size-4',
+        fontSize: 'text-[12px]',
+        lineHeight: 'leading-[1.8]',
+    },
+    desktop: {
+        padding: 'px-3 py-1',
+        gap: 'gap-1.5',
+        iconSize: 'size-5',
+        fontSize: 'text-[14px]',
+        lineHeight: 'leading-[24px]',
+    },
+};
+const Chips = React.forwardRef(({ variant = 'purple', size, children = 'متن پیشفرض', disabled = false, onClick, onIconClick, className, isMobile, ...props }, ref) => {
+    const detectedIsMobile = contexts.useMobile();
+    const actualIsMobile = isMobile ?? detectedIsMobile;
+    const actualSize = size || (actualIsMobile ? 'mobile' : 'desktop');
+    const actualVariant = disabled ? 'disabled' : variant;
+    const variantStyles = chipVariants[actualVariant];
+    const sizeStyles = chipSizes[actualSize];
+    const handleIconClick = (e) => {
+        e.stopPropagation();
+        if (onIconClick) {
+            onIconClick();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if ((e.key === 'Enter' || e.key === ' ') && onClick && !disabled) {
+            e.preventDefault();
+            onClick();
+        }
+    };
+    const renderIcon = () => {
+        const iconElement = jsxRuntime.jsx(X, { className: utils(sizeStyles.iconSize) });
+        if (onIconClick) {
+            return (jsxRuntime.jsx("button", { type: "button", onClick: handleIconClick, disabled: disabled, className: utils('flex items-center justify-center', 'hover:opacity-70 transition-opacity', disabled && 'cursor-not-allowed opacity-50'), "aria-label": "\u062D\u0630\u0641", children: iconElement }));
+        }
+        return iconElement;
+    };
+    return (jsxRuntime.jsxs("div", { ref: ref, className: utils(
+        // Base styles
+        'relative rounded-[50px] border border-solid inline-flex', 'flex-row items-center justify-center', 'font-sans font-bold not-italic', 'text-nowrap text-right', 'transition-all duration-200', 
+        // Variant styles
+        variantStyles.background, variantStyles.text, variantStyles.border, 
+        // Size styles
+        sizeStyles.padding, sizeStyles.gap, sizeStyles.fontSize, sizeStyles.lineHeight, 
+        // Interactive styles
+        onClick && !disabled && 'cursor-pointer hover:opacity-80', disabled && 'cursor-not-allowed opacity-60', className), onClick: disabled ? undefined : onClick, onKeyDown: onClick && !disabled ? handleKeyDown : undefined, tabIndex: onClick && !disabled ? 0 : undefined, role: onClick ? 'button' : undefined, ...props, children: [jsxRuntime.jsx("span", { className: "text-center", children: children }), renderIcon()] }));
+});
+Chips.displayName = 'Chips';
+
+exports.Chips = Chips;
+exports.default = Chips;

package/dist/cjs/Divider.js

@@ -1 +1,23 @@
-"use strict";var r=require("react/jsx-runtime"),e=require("react"),t=require("./utils.js");const i=e.forwardRef(({width:e="100%",height:i=1,orientation:a="horizontal",variant:s="neutral-light",className:l,style:n,...h},o)=>{const u="horizontal"===a,g={width:u?e:i,height:u?i:e,...n};return r.jsx("div",{ref:o,className:t("shrink-0",{"neutral-light":"bg-neutral-light","neutral-main":"bg-neutral-main",primary:"bg-primary"}[s],l),style:g,role:"separator",...h})});i.displayName="Divider",exports.Divider=i;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('./utils.js');
+
+const Divider = React.forwardRef(({ width = '100%', height = 1, orientation = 'horizontal', variant = 'neutral-light', className, style, ...props }, ref) => {
+    const isHorizontal = orientation === 'horizontal';
+    const variantClasses = {
+        'neutral-light': 'bg-neutral-light',
+        'neutral-main': 'bg-neutral-main',
+        primary: 'bg-primary',
+    };
+    const dividerStyle = {
+        width: isHorizontal ? width : height,
+        height: isHorizontal ? height : width,
+        ...style,
+    };
+    return (jsxRuntime.jsx("div", { ref: ref, className: utils('shrink-0', variantClasses[variant], className), style: dividerStyle, role: "separator", ...props }));
+});
+Divider.displayName = 'Divider';
+
+exports.Divider = Divider;

package/dist/cjs/Drawer.js

@@ -1 +1,112 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./utils.js");const l=t.forwardRef(({children:l,direction:n="bottom",fullScreen:o=!1,isOpen:a=!1,onClose:s,className:u,isMobile:i,...d},c)=>{const f=t.useRef(null),m=t.useRef(null);t.useEffect(()=>{const handleEscape=e=>{"Escape"===e.key&&a&&s&&s()};return a&&(document.addEventListener("keydown",handleEscape),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",handleEscape),document.body.style.overflow="auto"}},[a,s]);const b=r("fixed inset-0 z-50 transition-all duration-300",{"bg-neutral-darker/50 backdrop-blur-sm":a,"bg-transparent pointer-events-none":!a}),w=r("fixed bg-white shadow-2xl transition-all duration-300 ease-out overflow-auto",(()=>{switch(n){case"top":return"top-0 left-0 right-0";case"bottom":default:return"bottom-0 left-0 right-0";case"left":return"top-0 left-0 bottom-0";case"right":return"top-0 right-0 bottom-0"}})(),(()=>{const e="top"===n||"bottom"===n;return o?"w-full h-full":e?"w-full max-h-[90vh]":"h-full max-w-[90vw]"})(),(()=>{if(!a)switch(n){case"top":return"-translate-y-full";case"bottom":default:return"translate-y-full";case"left":return"-translate-x-full";case"right":return"translate-x-full"}return"translate-x-0 translate-y-0"})(),{"rounded-t-2xl":"bottom"===n&&!o,"rounded-b-2xl":"top"===n&&!o,"rounded-r-2xl":"left"===n&&!o,"rounded-l-2xl":"right"===n&&!o,"p-6":!i,"p-4":i},u);return a?e.jsx("div",{ref:f,className:b,onClick:e=>{!o&&s&&f.current&&e.target===f.current&&s()},onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||!o&&s&&f.current&&e.target===f.current&&s()},tabIndex:-1,role:"button","aria-label":"Close drawer",children:e.jsx("div",{ref:c||m,className:w,role:"dialog","aria-modal":"true","aria-label":"Drawer",...d,children:l})}):null});l.displayName="Drawer",exports.Drawer=l;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('./utils.js');
+var contexts = require('./contexts.js');
+
+const Drawer = React.forwardRef(({ children, direction = 'bottom', fullScreen = false, isOpen = false, onClose, className, isMobile, ...props }, ref) => {
+    const detectedIsMobile = contexts.useMobile();
+    const actualIsMobile = isMobile ?? detectedIsMobile;
+    const overlayRef = React.useRef(null);
+    const drawerRef = React.useRef(null);
+    // Handle escape key
+    React.useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === 'Escape' && isOpen && onClose) {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+            // Prevent body scroll when drawer is open
+            document.body.style.overflow = 'hidden';
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'auto';
+        };
+    }, [isOpen, onClose]);
+    // Handle click outside
+    const handleOverlayClick = (event) => {
+        if (!fullScreen &&
+            onClose &&
+            overlayRef.current &&
+            event.target === overlayRef.current) {
+            onClose();
+        }
+    };
+    // Handle keyboard events on overlay
+    const handleOverlayKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            if (!fullScreen &&
+                onClose &&
+                overlayRef.current &&
+                event.target === overlayRef.current) {
+                onClose();
+            }
+        }
+    };
+    const getTranslateClasses = () => {
+        if (!isOpen) {
+            switch (direction) {
+                case 'top':
+                    return '-translate-y-full';
+                case 'bottom':
+                    return 'translate-y-full';
+                case 'left':
+                    return '-translate-x-full';
+                case 'right':
+                    return 'translate-x-full';
+                default:
+                    return 'translate-y-full';
+            }
+        }
+        return 'translate-x-0 translate-y-0';
+    };
+    const getPositionClasses = () => {
+        switch (direction) {
+            case 'top':
+                return 'top-0 left-0 right-0';
+            case 'bottom':
+                return 'bottom-0 left-0 right-0';
+            case 'left':
+                return 'top-0 left-0 bottom-0';
+            case 'right':
+                return 'top-0 right-0 bottom-0';
+            default:
+                return 'bottom-0 left-0 right-0';
+        }
+    };
+    const getSizeClasses = () => {
+        const isVertical = direction === 'top' || direction === 'bottom';
+        if (fullScreen) {
+            return isVertical ? 'w-full h-full' : 'w-full h-full';
+        }
+        if (isVertical) {
+            return 'w-full max-h-[90vh]';
+        }
+        return 'h-full max-w-[90vw]';
+    };
+    const baseOverlayClasses = 'fixed inset-0 z-50 transition-all duration-300';
+    const baseDrawerClasses = 'fixed bg-white shadow-2xl transition-all duration-300 ease-out overflow-auto';
+    const overlayClasses = utils(baseOverlayClasses, {
+        'bg-neutral-darker/50 backdrop-blur-sm': isOpen,
+        'bg-transparent pointer-events-none': !isOpen,
+    });
+    const drawerClasses = utils(baseDrawerClasses, getPositionClasses(), getSizeClasses(), getTranslateClasses(), {
+        'rounded-t-2xl': direction === 'bottom' && !fullScreen,
+        'rounded-b-2xl': direction === 'top' && !fullScreen,
+        'rounded-r-2xl': direction === 'left' && !fullScreen,
+        'rounded-l-2xl': direction === 'right' && !fullScreen,
+        'p-6': !actualIsMobile,
+        'p-4': actualIsMobile,
+    }, className);
+    if (!isOpen) {
+        return null;
+    }
+    return (jsxRuntime.jsx("div", { ref: overlayRef, className: overlayClasses, onClick: handleOverlayClick, onKeyDown: handleOverlayKeyDown, tabIndex: -1, role: "button", "aria-label": "Close drawer", children: jsxRuntime.jsx("div", { ref: ref || drawerRef, className: drawerClasses, role: "dialog", "aria-modal": "true", "aria-label": "Drawer", ...props, children: children }) }));
+});
+Drawer.displayName = 'Drawer';
+
+exports.Drawer = Drawer;