automoby-kit 1.0.39 → 1.0.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +99 -99
- package/dist/cjs/Backdrop.js +1 -1
- package/dist/cjs/Breadcrumb.js +1 -1
- package/dist/cjs/Chips.js +1 -1
- package/dist/cjs/chunks/Chips-BY1LBLLt.js +1 -0
- package/dist/cjs/index.js +1 -1
- package/dist/esm/Backdrop.js +1 -1
- package/dist/esm/Breadcrumb.js +1 -1
- package/dist/esm/Chips.js +1 -1
- package/dist/esm/chunks/Chips-DV9Y7v7k.js +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/types/Backdrop.js +1 -1
- package/dist/types/Breadcrumb.js +13 -5
- package/dist/types/Chips-zfhiOvK2.js +112 -0
- package/dist/types/Chips.js +6 -112
- package/dist/types/components/Breadcrumb/Breadcrumb.d.ts +6 -0
- package/dist/types/components/Breadcrumb/Breadcrumb.stories.d.ts +74 -9
- package/dist/types/components/Dialog/Dialog.d.ts +18 -0
- package/dist/types/components/Dialog/Dialog.stories.d.ts +13 -0
- package/dist/types/index.d.ts +2 -1
- package/dist/types/index.js +35 -5
- package/package.json +176 -176
package/README.md
CHANGED
|
@@ -1,100 +1,100 @@
|
|
|
1
|
-
# Automoby Kit
|
|
2
|
-
|
|
3
|
-
A comprehensive React UI component library - created in war 2025.
|
|
4
|
-
|
|
5
|
-
## 🚀 Installation
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install automoby-kit
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## 📦 Usage
|
|
12
|
-
|
|
13
|
-
```typescript
|
|
14
|
-
import {
|
|
15
|
-
Button,
|
|
16
|
-
Typography,
|
|
17
|
-
Input,
|
|
18
|
-
Tabs
|
|
19
|
-
} from 'automoby-kit';
|
|
20
|
-
|
|
21
|
-
function App() {
|
|
22
|
-
return (
|
|
23
|
-
<div>
|
|
24
|
-
<Typography variant="h1">Welcome to Automoby Kit</Typography>
|
|
25
|
-
<Button variant="primary" size="lg">
|
|
26
|
-
Click me!
|
|
27
|
-
</Button>
|
|
28
|
-
<Input placeholder="Enter text..." />
|
|
29
|
-
</div>
|
|
30
|
-
);
|
|
31
|
-
}
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## 🧩 Available Components
|
|
35
|
-
|
|
36
|
-
- **Typography** - Text rendering with various styles
|
|
37
|
-
- **Button** - Interactive buttons with multiple variants
|
|
38
|
-
- **Input** - Form input fields
|
|
39
|
-
- **Tabs** - Tabbed interfaces
|
|
40
|
-
- **Drawer** - Slide-out panels
|
|
41
|
-
- **Backdrop** - Modal overlays
|
|
42
|
-
- **Breadcrumb** - Navigation breadcrumbs
|
|
43
|
-
- **Pagination** - Page navigation
|
|
44
|
-
- **Accordion** - Collapsible content sections
|
|
45
|
-
- **Divider** - Visual separators
|
|
46
|
-
- **RadioGroup** - Radio button groups
|
|
47
|
-
- **Chips** - Tag-like elements
|
|
48
|
-
- **Menu** - Context menus and dropdowns
|
|
49
|
-
|
|
50
|
-
## 🏗️ TypeScript Support
|
|
51
|
-
|
|
52
|
-
All components come with full TypeScript support:
|
|
53
|
-
|
|
54
|
-
```typescript
|
|
55
|
-
import { ButtonProps, TypographyVariant } from 'automoby-kit';
|
|
56
|
-
|
|
57
|
-
const MyButton: React.FC<ButtonProps> = (props) => {
|
|
58
|
-
return <Button {...props} />;
|
|
59
|
-
};
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
## 📱 Mobile Context
|
|
63
|
-
|
|
64
|
-
The library includes a mobile detection context:
|
|
65
|
-
|
|
66
|
-
```typescript
|
|
67
|
-
import { MobileProvider } from 'automoby-kit';
|
|
68
|
-
|
|
69
|
-
function App() {
|
|
70
|
-
return (
|
|
71
|
-
<MobileProvider userAgent={navigator.userAgent}>
|
|
72
|
-
<MyComponent />
|
|
73
|
-
</MobileProvider>
|
|
74
|
-
);
|
|
75
|
-
}
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
## 🛠️ Development
|
|
79
|
-
|
|
80
|
-
This package requires the following peer dependencies:
|
|
81
|
-
|
|
82
|
-
```json
|
|
83
|
-
{
|
|
84
|
-
"react": "^19.1.0",
|
|
85
|
-
"react-dom": "^19.1.0",
|
|
86
|
-
"clsx": "^2.1.1",
|
|
87
|
-
"tailwindcss": "^4.1.10"
|
|
88
|
-
}
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
## 🆘 Support
|
|
92
|
-
|
|
93
|
-
If you have issues:
|
|
94
|
-
|
|
95
|
-
1. Check the [GitHub issues](https://github.com/yourusername/automoby-kit/issues) for known problems
|
|
96
|
-
2. Submit a new issue with detailed information about your problem
|
|
97
|
-
|
|
98
|
-
## 🔄 Version History
|
|
99
|
-
|
|
1
|
+
# Automoby Kit
|
|
2
|
+
|
|
3
|
+
A comprehensive React UI component library - created in war 2025.
|
|
4
|
+
|
|
5
|
+
## 🚀 Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install automoby-kit
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 📦 Usage
|
|
12
|
+
|
|
13
|
+
```typescript
|
|
14
|
+
import {
|
|
15
|
+
Button,
|
|
16
|
+
Typography,
|
|
17
|
+
Input,
|
|
18
|
+
Tabs
|
|
19
|
+
} from 'automoby-kit';
|
|
20
|
+
|
|
21
|
+
function App() {
|
|
22
|
+
return (
|
|
23
|
+
<div>
|
|
24
|
+
<Typography variant="h1">Welcome to Automoby Kit</Typography>
|
|
25
|
+
<Button variant="primary" size="lg">
|
|
26
|
+
Click me!
|
|
27
|
+
</Button>
|
|
28
|
+
<Input placeholder="Enter text..." />
|
|
29
|
+
</div>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## 🧩 Available Components
|
|
35
|
+
|
|
36
|
+
- **Typography** - Text rendering with various styles
|
|
37
|
+
- **Button** - Interactive buttons with multiple variants
|
|
38
|
+
- **Input** - Form input fields
|
|
39
|
+
- **Tabs** - Tabbed interfaces
|
|
40
|
+
- **Drawer** - Slide-out panels
|
|
41
|
+
- **Backdrop** - Modal overlays
|
|
42
|
+
- **Breadcrumb** - Navigation breadcrumbs
|
|
43
|
+
- **Pagination** - Page navigation
|
|
44
|
+
- **Accordion** - Collapsible content sections
|
|
45
|
+
- **Divider** - Visual separators
|
|
46
|
+
- **RadioGroup** - Radio button groups
|
|
47
|
+
- **Chips** - Tag-like elements
|
|
48
|
+
- **Menu** - Context menus and dropdowns
|
|
49
|
+
|
|
50
|
+
## 🏗️ TypeScript Support
|
|
51
|
+
|
|
52
|
+
All components come with full TypeScript support:
|
|
53
|
+
|
|
54
|
+
```typescript
|
|
55
|
+
import { ButtonProps, TypographyVariant } from 'automoby-kit';
|
|
56
|
+
|
|
57
|
+
const MyButton: React.FC<ButtonProps> = (props) => {
|
|
58
|
+
return <Button {...props} />;
|
|
59
|
+
};
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## 📱 Mobile Context
|
|
63
|
+
|
|
64
|
+
The library includes a mobile detection context:
|
|
65
|
+
|
|
66
|
+
```typescript
|
|
67
|
+
import { MobileProvider } from 'automoby-kit';
|
|
68
|
+
|
|
69
|
+
function App() {
|
|
70
|
+
return (
|
|
71
|
+
<MobileProvider userAgent={navigator.userAgent}>
|
|
72
|
+
<MyComponent />
|
|
73
|
+
</MobileProvider>
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## 🛠️ Development
|
|
79
|
+
|
|
80
|
+
This package requires the following peer dependencies:
|
|
81
|
+
|
|
82
|
+
```json
|
|
83
|
+
{
|
|
84
|
+
"react": "^19.1.0",
|
|
85
|
+
"react-dom": "^19.1.0",
|
|
86
|
+
"clsx": "^2.1.1",
|
|
87
|
+
"tailwindcss": "^4.1.10"
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## 🆘 Support
|
|
92
|
+
|
|
93
|
+
If you have issues:
|
|
94
|
+
|
|
95
|
+
1. Check the [GitHub issues](https://github.com/yourusername/automoby-kit/issues) for known problems
|
|
96
|
+
2. Submit a new issue with detailed information about your problem
|
|
97
|
+
|
|
98
|
+
## 🔄 Version History
|
|
99
|
+
|
|
100
100
|
- **1.0.0** - Initial release
|
package/dist/cjs/Backdrop.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var r=require("react/jsx-runtime"),e=require("react"),t=require("./utils.js");const
|
|
1
|
+
"use strict";var r=require("react/jsx-runtime"),e=require("react"),t=require("./utils.js");const n=e.forwardRef(({isOpen:e=!1,onClick:n,blur:i=!1,zIndex:s=40,className:a,children:c,...l},o)=>{if(!e)return null;const u=t("fixed inset-0 transition-all duration-300 flex items-center justify-center",{"backdrop-blur-sm":i},a),d={backgroundColor:"rgba(0, 0, 0, 0.60)",zIndex:s};return r.jsx("div",{ref:o,className:u,style:d,onClick:r=>{n&&r.target===r.currentTarget&&n()},role:"presentation",...l,children:c})});n.displayName="Backdrop",exports.Backdrop=n;
|
package/dist/cjs/Breadcrumb.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("./utils.js"),n=require("./contexts.js"),t=require("./Typography.js"),a=require("./chunks/chevron-left-Do__K6cA.js");require("./chunks/createLucideIcon-BqJVOzoK.js");const s=r.forwardRef(({items:r,className:s,isMobile:l},o)=>{const c=n.useMobile(),u=l??c;return e.jsx("nav",{ref:o,className:i("flex items-center",u?"gap-1 px-4 py-2.5":"gap-3 pr-1 pt-3 pb-4 pl-0",s),"aria-label":"Breadcrumb navigation",children:e.jsx("ol",{className:"flex items-center gap-inherit",children:r.map((n,s)=>{const l=s===r.length-1,o=!l&&!!n.onClick,c=`${n.label}-${s}`,d=n.component??(!l&&n.href?"a":"span"),h=o&&!n.href;return e.jsxs("li",{className:"flex items-center gap-inherit",children:[e.jsx(d,{className:i("whitespace-nowrap text-neutral-main",o?"cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm":void 0),role:h?"button":void 0,tabIndex:h?0:void 0,"aria-current":l?"page":void 0,"aria-label":l?`Current page: ${n.label}`:void 0,title:n.title,href:l?void 0:n.href,onClick:o?e=>((e,i,n)=>{i!==r.length-1&&e.onClick&&(e.href||n.preventDefault(),e.onClick())})(n,s,e):void 0,onKeyDown:h?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),n.onClick&&n.onClick())}:void 0,children:e.jsx(t.Typography,{variant:u?"body-t-medium":"body-s-medium",children:n.label})}),!l&&e.jsx(a.ChevronLeft,{className:i("text-neutral-main flex-shrink-0",u?"w-2.5 h-2.5":"w-3 h-3"),"aria-hidden":"true"})]},c)})})})});s.displayName="Breadcrumb",exports.Breadcrumb=s;
|
package/dist/cjs/Chips.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,"__esModule",{value:!0})
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("react/jsx-runtime"),require("react"),require("./utils.js"),require("./contexts.js");var e=require("./chunks/Chips-BY1LBLLt.js");require("./chunks/createLucideIcon-BqJVOzoK.js"),exports.Chips=e.Chips,exports.default=e.Chips;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("../utils.js"),i=require("../contexts.js");const o=require("./createLucideIcon-BqJVOzoK.js").createLucideIcon("x",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]),n={purple:{background:"bg-primary-lightest",text:"text-primary-darkest",border:"border-primary-light"},red:{background:"bg-error-light",text:"text-error",border:"border-[#f0d6d6]"},green:{background:"bg-success-light",text:"text-success",border:"border-[#d4e8dc]"},orange:{background:"bg-warning-light",text:"text-warning",border:"border-[#f5e1d1]"},blue:{background:"bg-info-light",text:"text-info",border:"border-[#d3e9f2]"},white:{background:"bg-white",text:"text-neutral-darker",border:"border-neutral-light"},disabled:{background:"bg-neutral-lighter",text:"text-neutral-main",border:"border-neutral-light"}},a={mobile:{padding:"px-2.5 py-1",gap:"gap-1",iconSize:"size-4",fontSize:"text-xs",lineHeight:"leading-[1.8]"},desktop:{padding:"px-3 py-1",gap:"gap-1.5",iconSize:"size-5",fontSize:"text-s",lineHeight:"leading-[24px]"}},d=r.forwardRef(({variant:r="purple",size:d,children:s="متن پیشفرض",disabled:l=!1,onClick:c,onIconClick:b,className:g,isMobile:u,...p},x)=>{const h=i.useMobile(),k=n[l?"disabled":r],f=a[d||(u??h?"mobile":"desktop")],handleIconClick=e=>{e.stopPropagation(),b&&b()};return e.jsxs("div",{ref:x,className:t("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",k.background,k.text,k.border,f.padding,f.gap,f.fontSize,f.lineHeight,c&&!l&&"cursor-pointer hover:opacity-80",l&&"cursor-not-allowed opacity-60",g),onClick:l?void 0:c,onKeyDown:c&&!l?e=>{"Enter"!==e.key&&" "!==e.key||!c||l||(e.preventDefault(),c())}:void 0,tabIndex:c&&!l?0:void 0,role:c?"button":void 0,...p,children:[e.jsx("span",{className:"text-center",children:s}),(()=>{const r=e.jsx(o,{className:t(f.iconSize)});return b?e.jsx("button",{type:"button",onClick:handleIconClick,disabled:l,className:t("flex items-center justify-center","hover:opacity-70 transition-opacity",l&&"cursor-not-allowed opacity-50"),"aria-label":"حذف",children:r}):r})()]})});d.displayName="Chips",exports.Chips=d,exports.X=o;
|
package/dist/cjs/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var e=require("./Typography.js"),r=require("./Button.js"),s=require("./Input.js"),o=require("./Tabs.js"),a=require("./Drawer.js"),i=require("./Backdrop.js"),t=require("./Breadcrumb.js"),l=require("./Pagination.js"),n=require("./Accordion.js"),c=require("./Divider.js"),d=require("./RadioGroup.js"),u=require("./chunks/Chips-BY1LBLLt.js"),x=require("./Menu.js"),p=require("react/jsx-runtime"),b=require("react"),m=require("./utils.js"),h=require("./contexts.js");require("react-dom"),require("./chunks/chevron-left-Do__K6cA.js"),require("./chunks/createLucideIcon-BqJVOzoK.js");const j=b.forwardRef(({isOpen:e=!1,onClose:r,title:s,content:o,buttons:a,showCloseButton:t=!0,size:l="md",className:n,children:c},d)=>{const handleClose=()=>{r&&r()},x=m("bg-white rounded-[10px] shadow-lg mx-4 w-full",{sm:"max-w-sm",md:"max-w-md",lg:"max-w-lg",xl:"max-w-xl"}[l],n);return p.jsx(i.Backdrop,{isOpen:e,onClick:handleClose,blur:!0,children:p.jsx("div",{ref:d,className:x,onClick:e=>e.stopPropagation(),onKeyDown:e=>{"Escape"===e.key&&r&&r()},role:"dialog","aria-modal":"true","aria-labelledby":s?"dialog-title":void 0,children:p.jsxs("div",{className:"flex flex-col p-6 gap-8",children:[s&&p.jsx("div",{className:"flex flex-col gap-2.5",children:p.jsx("div",{className:"flex items-center justify-between pb-4 border-b border-[#ebeaf0]",children:p.jsxs("div",{className:"flex items-center justify-between gap-3 w-full flex-row-reverse",children:[p.jsx("div",{className:"text-[#590d8b] text-xl font-extrabold leading-8",children:s}),t&&p.jsx("button",{type:"button",onClick:handleClose,className:"p-1 rounded-full hover:bg-gray-100 transition-colors","aria-label":"Close dialog",children:p.jsx(u.X,{className:"w-6 h-6 text-[#a4a2bb]"})})]})})}),o&&p.jsx("div",{className:"flex flex-col gap-4",children:o}),c&&!o&&p.jsx("div",{className:"flex flex-col gap-4",children:c}),a&&p.jsx("div",{className:"flex flex-col gap-1.5",children:a})]})})})});j.displayName="Dialog";const g=b.forwardRef(({variant:e="primary",icon:r,children:s,className:o,...a},i)=>{const t=m("h-14 px-4 py-[13px] rounded-md font-bold text-base leading-[1.8] flex items-center justify-center gap-2 transition-colors",{"bg-[#590d8b] text-white hover:bg-[#4a0a75]":"primary"===e,"bg-white text-[#1a1922] border border-[#ebeaf0] hover:bg-gray-50":"secondary"===e},o);return p.jsxs("button",{type:"button",ref:i,className:t,...a,children:[s,r&&p.jsx("span",{className:"w-5 h-5",children:r})]})});g.displayName="DialogButton";const f=e.Typography,v=r.Button,w=s.Input,y=o.Tabs,q=a.Drawer,N=i.Backdrop,B=t.Breadcrumb,k=l.Pagination,D=n.Accordion,C=c.Divider,M=d.RadioGroup,P=u.Chips,T=x.Menu;exports.MobileProvider=h.MobileProvider,exports.useMobile=h.useMobile,exports.Accordion=D,exports.Backdrop=N,exports.Breadcrumb=B,exports.Button=v,exports.Chips=P,exports.Dialog=j,exports.DialogButton=g,exports.Divider=C,exports.Drawer=q,exports.Input=w,exports.Menu=T,exports.Pagination=k,exports.RadioGroup=M,exports.Tabs=y,exports.Typography=f;
|
package/dist/esm/Backdrop.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as r}from"react/jsx-runtime";import e from"react";import t from"./utils.js";const n=e.forwardRef(({isOpen:e=!1,onClick:n,blur:
|
|
1
|
+
import{jsx as r}from"react/jsx-runtime";import e from"react";import t from"./utils.js";const n=e.forwardRef(({isOpen:e=!1,onClick:n,blur:i=!1,zIndex:o=40,className:a,children:l,...s},c)=>{if(!e)return null;const d=t("fixed inset-0 transition-all duration-300 flex items-center justify-center",{"backdrop-blur-sm":i},a);return r("div",{ref:c,className:d,style:{backgroundColor:"rgba(0, 0, 0, 0.60)",zIndex:o},onClick:r=>{n&&r.target===r.currentTarget&&n()},role:"presentation",...s,children:l})});n.displayName="Backdrop";export{n as Backdrop};
|
package/dist/esm/Breadcrumb.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import t from"react";import
|
|
1
|
+
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import t from"react";import i from"./utils.js";import{useMobile as n}from"./contexts.js";import{Typography as o}from"./Typography.js";import{C as a}from"./chunks/chevron-left-4HSuTes3.js";import"./chunks/createLucideIcon-DGp0SoUT.js";const l=t.forwardRef(({items:t,className:l,isMobile:s},c)=>{const m=n(),p=s??m;return e("nav",{ref:c,className:i("flex items-center",p?"gap-1 px-4 py-2.5":"gap-3 pr-1 pt-3 pb-4 pl-0",l),"aria-label":"Breadcrumb navigation",children:e("ol",{className:"flex items-center gap-inherit",children:t.map((n,l)=>{const s=l===t.length-1,c=!s&&!!n.onClick,m=`${n.label}-${l}`,u=n.component??(!s&&n.href?"a":"span"),d=c&&!n.href;return r("li",{className:"flex items-center gap-inherit",children:[e(u,{className:i("whitespace-nowrap text-neutral-main",c?"cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm":void 0),role:d?"button":void 0,tabIndex:d?0:void 0,"aria-current":s?"page":void 0,"aria-label":s?`Current page: ${n.label}`:void 0,title:n.title,href:s?void 0:n.href,onClick:c?e=>((e,r,i)=>{r!==t.length-1&&e.onClick&&(e.href||i.preventDefault(),e.onClick())})(n,l,e):void 0,onKeyDown:d?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),n.onClick&&n.onClick())}:void 0,children:e(o,{variant:p?"body-t-medium":"body-s-medium",children:n.label})}),!s&&e(a,{className:i("text-neutral-main flex-shrink-0",p?"w-2.5 h-2.5":"w-3 h-3"),"aria-hidden":"true"})]},m)})})})});l.displayName="Breadcrumb";export{l as Breadcrumb};
|
package/dist/esm/Chips.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import
|
|
1
|
+
"use client";import"react/jsx-runtime";import"react";import"./utils.js";import"./contexts.js";export{C as Chips,C as default}from"./chunks/Chips-DV9Y7v7k.js";import"./chunks/createLucideIcon-DGp0SoUT.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import o from"../utils.js";import{useMobile as i}from"../contexts.js";import{c as n}from"./createLucideIcon-DGp0SoUT.js";const a=n("x",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]),d={purple:{background:"bg-primary-lightest",text:"text-primary-darkest",border:"border-primary-light"},red:{background:"bg-error-light",text:"text-error",border:"border-[#f0d6d6]"},green:{background:"bg-success-light",text:"text-success",border:"border-[#d4e8dc]"},orange:{background:"bg-warning-light",text:"text-warning",border:"border-[#f5e1d1]"},blue:{background:"bg-info-light",text:"text-info",border:"border-[#d3e9f2]"},white:{background:"bg-white",text:"text-neutral-darker",border:"border-neutral-light"},disabled:{background:"bg-neutral-lighter",text:"text-neutral-main",border:"border-neutral-light"}},l={mobile:{padding:"px-2.5 py-1",gap:"gap-1",iconSize:"size-4",fontSize:"text-xs",lineHeight:"leading-[1.8]"},desktop:{padding:"px-3 py-1",gap:"gap-1.5",iconSize:"size-5",fontSize:"text-s",lineHeight:"leading-[24px]"}},s=r.forwardRef(({variant:r="purple",size:n,children:s="متن پیشفرض",disabled:c=!1,onClick:b,onIconClick:p,className:g,isMobile:u,...x},m)=>{const f=i(),h=d[c?"disabled":r],k=l[n||(u??f?"mobile":"desktop")],handleIconClick=e=>{e.stopPropagation(),p&&p()};return e("div",{ref:m,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",h.background,h.text,h.border,k.padding,k.gap,k.fontSize,k.lineHeight,b&&!c&&"cursor-pointer hover:opacity-80",c&&"cursor-not-allowed opacity-60",g),onClick:c?void 0:b,onKeyDown:b&&!c?e=>{"Enter"!==e.key&&" "!==e.key||!b||c||(e.preventDefault(),b())}:void 0,tabIndex:b&&!c?0:void 0,role:b?"button":void 0,...x,children:[t("span",{className:"text-center",children:s}),(()=>{const e=t(a,{className:o(k.iconSize)});return p?t("button",{type:"button",onClick:handleIconClick,disabled:c,className:o("flex items-center justify-center","hover:opacity-70 transition-opacity",c&&"cursor-not-allowed opacity-50"),"aria-label":"حذف",children:e}):e})()]})});s.displayName="Chips";export{s as C,a as X};
|
package/dist/esm/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Typography as
|
|
1
|
+
import{Typography as e}from"./Typography.js";import{Button as r}from"./Button.js";import{Input as o}from"./Input.js";import{Tabs as a}from"./Tabs.js";import{Drawer as t}from"./Drawer.js";import{Backdrop as s}from"./Backdrop.js";import{Breadcrumb as i}from"./Breadcrumb.js";import{Pagination as l}from"./Pagination.js";import{Accordion as n}from"./Accordion.js";import{Divider as m}from"./Divider.js";import{RadioGroup as c}from"./RadioGroup.js";import{X as d,C as p}from"./chunks/Chips-DV9Y7v7k.js";import{Menu as f}from"./Menu.js";import{jsx as b,jsxs as u}from"react/jsx-runtime";import x from"react";import h from"./utils.js";export{MobileProvider,useMobile}from"./contexts.js";import"react-dom";import"./chunks/chevron-left-4HSuTes3.js";import"./chunks/createLucideIcon-DGp0SoUT.js";const g=x.forwardRef(({isOpen:e=!1,onClose:r,title:o,content:a,buttons:t,showCloseButton:i=!0,size:l="md",className:n,children:m},c)=>{const handleClose=()=>{r&&r()},p=h("bg-white rounded-[10px] shadow-lg mx-4 w-full",{sm:"max-w-sm",md:"max-w-md",lg:"max-w-lg",xl:"max-w-xl"}[l],n);return b(s,{isOpen:e,onClick:handleClose,blur:!0,children:b("div",{ref:c,className:p,onClick:e=>e.stopPropagation(),onKeyDown:e=>{"Escape"===e.key&&r&&r()},role:"dialog","aria-modal":"true","aria-labelledby":o?"dialog-title":void 0,children:u("div",{className:"flex flex-col p-6 gap-8",children:[o&&b("div",{className:"flex flex-col gap-2.5",children:b("div",{className:"flex items-center justify-between pb-4 border-b border-[#ebeaf0]",children:u("div",{className:"flex items-center justify-between gap-3 w-full flex-row-reverse",children:[b("div",{className:"text-[#590d8b] text-xl font-extrabold leading-8",children:o}),i&&b("button",{type:"button",onClick:handleClose,className:"p-1 rounded-full hover:bg-gray-100 transition-colors","aria-label":"Close dialog",children:b(d,{className:"w-6 h-6 text-[#a4a2bb]"})})]})})}),a&&b("div",{className:"flex flex-col gap-4",children:a}),m&&!a&&b("div",{className:"flex flex-col gap-4",children:m}),t&&b("div",{className:"flex flex-col gap-1.5",children:t})]})})})});g.displayName="Dialog";const j=x.forwardRef(({variant:e="primary",icon:r,children:o,className:a,...t},s)=>{const i=h("h-14 px-4 py-[13px] rounded-md font-bold text-base leading-[1.8] flex items-center justify-center gap-2 transition-colors",{"bg-[#590d8b] text-white hover:bg-[#4a0a75]":"primary"===e,"bg-white text-[#1a1922] border border-[#ebeaf0] hover:bg-gray-50":"secondary"===e},a);return u("button",{type:"button",ref:s,className:i,...t,children:[o,r&&b("span",{className:"w-5 h-5",children:r})]})});j.displayName="DialogButton";const w=e,y=r,v=o,N=a,k=t,B=s,C=i,D=l,M=n,P=m,R=c,T=p,I=f;export{M as Accordion,B as Backdrop,C as Breadcrumb,y as Button,T as Chips,g as Dialog,j as DialogButton,P as Divider,k as Drawer,v as Input,I as Menu,D as Pagination,R as RadioGroup,N as Tabs,w as Typography};
|
package/dist/types/Backdrop.js
CHANGED
|
@@ -12,7 +12,7 @@ const Backdrop = React.forwardRef(({ isOpen = false, onClick, blur = false, zInd
|
|
|
12
12
|
onClick();
|
|
13
13
|
}
|
|
14
14
|
};
|
|
15
|
-
const backdropClasses = cn('fixed inset-0 transition-all duration-300', {
|
|
15
|
+
const backdropClasses = cn('fixed inset-0 transition-all duration-300 flex items-center justify-center', {
|
|
16
16
|
'backdrop-blur-sm': blur,
|
|
17
17
|
}, className);
|
|
18
18
|
const backdropStyle = {
|
package/dist/types/Breadcrumb.js
CHANGED
|
@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import cn from './utils.js';
|
|
4
4
|
import { useMobile } from './contexts.js';
|
|
5
|
+
import { Typography } from './Typography.js';
|
|
5
6
|
import { C as ChevronLeft } from './chevron-left-Ck6O99eF.js';
|
|
6
7
|
import './createLucideIcon-D-q73LTT.js';
|
|
7
8
|
|
|
@@ -13,7 +14,10 @@ const Breadcrumb = React.forwardRef(({ items, className, isMobile }, ref) => {
|
|
|
13
14
|
if (index === items.length - 1)
|
|
14
15
|
return;
|
|
15
16
|
if (item.onClick) {
|
|
16
|
-
|
|
17
|
+
// If there is no href, we fully handle the click
|
|
18
|
+
if (!item.href) {
|
|
19
|
+
e.preventDefault();
|
|
20
|
+
}
|
|
17
21
|
item.onClick();
|
|
18
22
|
}
|
|
19
23
|
};
|
|
@@ -25,11 +29,15 @@ const Breadcrumb = React.forwardRef(({ items, className, isMobile }, ref) => {
|
|
|
25
29
|
const isLast = index === items.length - 1;
|
|
26
30
|
const isClickable = !isLast && !!item.onClick;
|
|
27
31
|
const itemKey = `${item.label}-${index}`;
|
|
28
|
-
|
|
32
|
+
const ItemElement = item.component ?? (!isLast && item.href ? 'a' : 'span');
|
|
33
|
+
const isButtonLike = isClickable && !item.href;
|
|
34
|
+
return (jsxs("li", { className: "flex items-center gap-inherit", children: [jsx(ItemElement, { className: cn('whitespace-nowrap text-neutral-main', isClickable
|
|
29
35
|
? 'cursor-pointer hover:text-neutral-dark transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-sm'
|
|
30
|
-
: undefined),
|
|
36
|
+
: undefined),
|
|
37
|
+
// Accessibility only for non-link button-like behavior
|
|
38
|
+
role: isButtonLike ? 'button' : undefined, tabIndex: isButtonLike ? 0 : undefined, "aria-current": isLast ? 'page' : undefined, "aria-label": isLast ? `Current page: ${item.label}` : undefined, title: item.title, href: !isLast ? item.href : undefined, onClick: isClickable
|
|
31
39
|
? (e) => handleItemClick(item, index, e)
|
|
32
|
-
: undefined, onKeyDown:
|
|
40
|
+
: undefined, onKeyDown: isButtonLike
|
|
33
41
|
? (e) => {
|
|
34
42
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
35
43
|
e.preventDefault();
|
|
@@ -38,7 +46,7 @@ const Breadcrumb = React.forwardRef(({ items, className, isMobile }, ref) => {
|
|
|
38
46
|
}
|
|
39
47
|
}
|
|
40
48
|
}
|
|
41
|
-
: undefined, children: item.label }), !isLast && (jsx(ChevronLeft, { className: cn('text-neutral-main flex-shrink-0',
|
|
49
|
+
: undefined, children: jsx(Typography, { variant: actualIsMobile ? 'body-t-medium' : 'body-s-medium', children: item.label }) }), !isLast && (jsx(ChevronLeft, { className: cn('text-neutral-main flex-shrink-0',
|
|
42
50
|
// Responsive icon size
|
|
43
51
|
actualIsMobile ? 'w-2.5 h-2.5' : 'w-3 h-3'), "aria-hidden": "true" }))] }, itemKey));
|
|
44
52
|
}) }) }));
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import cn from './utils.js';
|
|
4
|
+
import { useMobile } from './contexts.js';
|
|
5
|
+
import { c as createLucideIcon } from './createLucideIcon-D-q73LTT.js';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* @license lucide-react v0.522.0 - ISC
|
|
9
|
+
*
|
|
10
|
+
* This source code is licensed under the ISC license.
|
|
11
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
const __iconNode = [
|
|
16
|
+
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
|
|
17
|
+
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
|
|
18
|
+
];
|
|
19
|
+
const X = createLucideIcon("x", __iconNode);
|
|
20
|
+
|
|
21
|
+
const chipVariants = {
|
|
22
|
+
purple: {
|
|
23
|
+
background: 'bg-primary-lightest',
|
|
24
|
+
text: 'text-primary-darkest',
|
|
25
|
+
border: 'border-primary-light',
|
|
26
|
+
},
|
|
27
|
+
red: {
|
|
28
|
+
background: 'bg-error-light',
|
|
29
|
+
text: 'text-error',
|
|
30
|
+
border: 'border-[#f0d6d6]',
|
|
31
|
+
},
|
|
32
|
+
green: {
|
|
33
|
+
background: 'bg-success-light',
|
|
34
|
+
text: 'text-success',
|
|
35
|
+
border: 'border-[#d4e8dc]',
|
|
36
|
+
},
|
|
37
|
+
orange: {
|
|
38
|
+
background: 'bg-warning-light',
|
|
39
|
+
text: 'text-warning',
|
|
40
|
+
border: 'border-[#f5e1d1]',
|
|
41
|
+
},
|
|
42
|
+
blue: {
|
|
43
|
+
background: 'bg-info-light',
|
|
44
|
+
text: 'text-info',
|
|
45
|
+
border: 'border-[#d3e9f2]',
|
|
46
|
+
},
|
|
47
|
+
white: {
|
|
48
|
+
background: 'bg-white',
|
|
49
|
+
text: 'text-neutral-darker',
|
|
50
|
+
border: 'border-neutral-light',
|
|
51
|
+
},
|
|
52
|
+
disabled: {
|
|
53
|
+
background: 'bg-neutral-lighter',
|
|
54
|
+
text: 'text-neutral-main',
|
|
55
|
+
border: 'border-neutral-light',
|
|
56
|
+
},
|
|
57
|
+
};
|
|
58
|
+
const chipSizes = {
|
|
59
|
+
mobile: {
|
|
60
|
+
padding: 'px-2.5 py-1',
|
|
61
|
+
gap: 'gap-1',
|
|
62
|
+
iconSize: 'size-4',
|
|
63
|
+
fontSize: 'text-xs',
|
|
64
|
+
lineHeight: 'leading-[1.8]',
|
|
65
|
+
},
|
|
66
|
+
desktop: {
|
|
67
|
+
padding: 'px-3 py-1',
|
|
68
|
+
gap: 'gap-1.5',
|
|
69
|
+
iconSize: 'size-5',
|
|
70
|
+
fontSize: 'text-s',
|
|
71
|
+
lineHeight: 'leading-[24px]',
|
|
72
|
+
},
|
|
73
|
+
};
|
|
74
|
+
const Chips = React.forwardRef(({ variant = 'purple', size, children = 'متن پیشفرض', disabled = false, onClick, onIconClick, className, isMobile, ...props }, ref) => {
|
|
75
|
+
const detectedIsMobile = useMobile();
|
|
76
|
+
const actualIsMobile = isMobile ?? detectedIsMobile;
|
|
77
|
+
const actualSize = size || (actualIsMobile ? 'mobile' : 'desktop');
|
|
78
|
+
const actualVariant = disabled ? 'disabled' : variant;
|
|
79
|
+
const variantStyles = chipVariants[actualVariant];
|
|
80
|
+
const sizeStyles = chipSizes[actualSize];
|
|
81
|
+
const handleIconClick = (e) => {
|
|
82
|
+
e.stopPropagation();
|
|
83
|
+
if (onIconClick) {
|
|
84
|
+
onIconClick();
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
const handleKeyDown = (e) => {
|
|
88
|
+
if ((e.key === 'Enter' || e.key === ' ') && onClick && !disabled) {
|
|
89
|
+
e.preventDefault();
|
|
90
|
+
onClick();
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
const renderIcon = () => {
|
|
94
|
+
const iconElement = jsx(X, { className: cn(sizeStyles.iconSize) });
|
|
95
|
+
if (onIconClick) {
|
|
96
|
+
return (jsx("button", { type: "button", onClick: handleIconClick, disabled: disabled, className: cn('flex items-center justify-center', 'hover:opacity-70 transition-opacity', disabled && 'cursor-not-allowed opacity-50'), "aria-label": "\u062D\u0630\u0641", children: iconElement }));
|
|
97
|
+
}
|
|
98
|
+
return iconElement;
|
|
99
|
+
};
|
|
100
|
+
return (jsxs("div", { ref: ref, className: cn(
|
|
101
|
+
// Base styles
|
|
102
|
+
'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',
|
|
103
|
+
// Variant styles
|
|
104
|
+
variantStyles.background, variantStyles.text, variantStyles.border,
|
|
105
|
+
// Size styles
|
|
106
|
+
sizeStyles.padding, sizeStyles.gap, sizeStyles.fontSize, sizeStyles.lineHeight,
|
|
107
|
+
// Interactive styles
|
|
108
|
+
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: [jsx("span", { className: "text-center", children: children }), renderIcon()] }));
|
|
109
|
+
});
|
|
110
|
+
Chips.displayName = 'Chips';
|
|
111
|
+
|
|
112
|
+
export { Chips as C, X };
|
package/dist/types/Chips.js
CHANGED
|
@@ -1,112 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* @license lucide-react v0.522.0 - ISC
|
|
9
|
-
*
|
|
10
|
-
* This source code is licensed under the ISC license.
|
|
11
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
const __iconNode = [
|
|
16
|
-
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
|
|
17
|
-
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
|
|
18
|
-
];
|
|
19
|
-
const X = createLucideIcon("x", __iconNode);
|
|
20
|
-
|
|
21
|
-
const chipVariants = {
|
|
22
|
-
purple: {
|
|
23
|
-
background: 'bg-primary-lightest',
|
|
24
|
-
text: 'text-primary-darkest',
|
|
25
|
-
border: 'border-primary-light',
|
|
26
|
-
},
|
|
27
|
-
red: {
|
|
28
|
-
background: 'bg-error-light',
|
|
29
|
-
text: 'text-error',
|
|
30
|
-
border: 'border-[#f0d6d6]',
|
|
31
|
-
},
|
|
32
|
-
green: {
|
|
33
|
-
background: 'bg-success-light',
|
|
34
|
-
text: 'text-success',
|
|
35
|
-
border: 'border-[#d4e8dc]',
|
|
36
|
-
},
|
|
37
|
-
orange: {
|
|
38
|
-
background: 'bg-warning-light',
|
|
39
|
-
text: 'text-warning',
|
|
40
|
-
border: 'border-[#f5e1d1]',
|
|
41
|
-
},
|
|
42
|
-
blue: {
|
|
43
|
-
background: 'bg-info-light',
|
|
44
|
-
text: 'text-info',
|
|
45
|
-
border: 'border-[#d3e9f2]',
|
|
46
|
-
},
|
|
47
|
-
white: {
|
|
48
|
-
background: 'bg-white',
|
|
49
|
-
text: 'text-neutral-darker',
|
|
50
|
-
border: 'border-neutral-light',
|
|
51
|
-
},
|
|
52
|
-
disabled: {
|
|
53
|
-
background: 'bg-neutral-lighter',
|
|
54
|
-
text: 'text-neutral-main',
|
|
55
|
-
border: 'border-neutral-light',
|
|
56
|
-
},
|
|
57
|
-
};
|
|
58
|
-
const chipSizes = {
|
|
59
|
-
mobile: {
|
|
60
|
-
padding: 'px-2.5 py-1',
|
|
61
|
-
gap: 'gap-1',
|
|
62
|
-
iconSize: 'size-4',
|
|
63
|
-
fontSize: 'text-xs',
|
|
64
|
-
lineHeight: 'leading-[1.8]',
|
|
65
|
-
},
|
|
66
|
-
desktop: {
|
|
67
|
-
padding: 'px-3 py-1',
|
|
68
|
-
gap: 'gap-1.5',
|
|
69
|
-
iconSize: 'size-5',
|
|
70
|
-
fontSize: 'text-s',
|
|
71
|
-
lineHeight: 'leading-[24px]',
|
|
72
|
-
},
|
|
73
|
-
};
|
|
74
|
-
const Chips = React.forwardRef(({ variant = 'purple', size, children = 'متن پیشفرض', disabled = false, onClick, onIconClick, className, isMobile, ...props }, ref) => {
|
|
75
|
-
const detectedIsMobile = useMobile();
|
|
76
|
-
const actualIsMobile = isMobile ?? detectedIsMobile;
|
|
77
|
-
const actualSize = size || (actualIsMobile ? 'mobile' : 'desktop');
|
|
78
|
-
const actualVariant = disabled ? 'disabled' : variant;
|
|
79
|
-
const variantStyles = chipVariants[actualVariant];
|
|
80
|
-
const sizeStyles = chipSizes[actualSize];
|
|
81
|
-
const handleIconClick = (e) => {
|
|
82
|
-
e.stopPropagation();
|
|
83
|
-
if (onIconClick) {
|
|
84
|
-
onIconClick();
|
|
85
|
-
}
|
|
86
|
-
};
|
|
87
|
-
const handleKeyDown = (e) => {
|
|
88
|
-
if ((e.key === 'Enter' || e.key === ' ') && onClick && !disabled) {
|
|
89
|
-
e.preventDefault();
|
|
90
|
-
onClick();
|
|
91
|
-
}
|
|
92
|
-
};
|
|
93
|
-
const renderIcon = () => {
|
|
94
|
-
const iconElement = jsx(X, { className: cn(sizeStyles.iconSize) });
|
|
95
|
-
if (onIconClick) {
|
|
96
|
-
return (jsx("button", { type: "button", onClick: handleIconClick, disabled: disabled, className: cn('flex items-center justify-center', 'hover:opacity-70 transition-opacity', disabled && 'cursor-not-allowed opacity-50'), "aria-label": "\u062D\u0630\u0641", children: iconElement }));
|
|
97
|
-
}
|
|
98
|
-
return iconElement;
|
|
99
|
-
};
|
|
100
|
-
return (jsxs("div", { ref: ref, className: cn(
|
|
101
|
-
// Base styles
|
|
102
|
-
'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',
|
|
103
|
-
// Variant styles
|
|
104
|
-
variantStyles.background, variantStyles.text, variantStyles.border,
|
|
105
|
-
// Size styles
|
|
106
|
-
sizeStyles.padding, sizeStyles.gap, sizeStyles.fontSize, sizeStyles.lineHeight,
|
|
107
|
-
// Interactive styles
|
|
108
|
-
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: [jsx("span", { className: "text-center", children: children }), renderIcon()] }));
|
|
109
|
-
});
|
|
110
|
-
Chips.displayName = 'Chips';
|
|
111
|
-
|
|
112
|
-
export { Chips, Chips as default };
|
|
1
|
+
import 'react/jsx-runtime';
|
|
2
|
+
import 'react';
|
|
3
|
+
import './utils.js';
|
|
4
|
+
import './contexts.js';
|
|
5
|
+
export { C as Chips, C as default } from './Chips-zfhiOvK2.js';
|
|
6
|
+
import './createLucideIcon-D-q73LTT.js';
|
|
@@ -2,6 +2,12 @@ import React from 'react';
|
|
|
2
2
|
export interface BreadcrumbItem {
|
|
3
3
|
label: string;
|
|
4
4
|
onClick?: () => void;
|
|
5
|
+
/** Optional href for link-like items */
|
|
6
|
+
href?: string;
|
|
7
|
+
/** Optional title attribute passed to the rendered item component */
|
|
8
|
+
title?: string;
|
|
9
|
+
/** Optional custom component to render the item (e.g., Link) */
|
|
10
|
+
component?: React.ElementType;
|
|
5
11
|
}
|
|
6
12
|
export interface BreadcrumbProps {
|
|
7
13
|
items: BreadcrumbItem[];
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { BreadcrumbProps } from './Breadcrumb';
|
|
2
3
|
type StoryArgs = BreadcrumbProps;
|
|
3
4
|
declare const _default: {
|
|
4
5
|
title: string;
|
|
5
|
-
component:
|
|
6
|
+
component: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
|
|
6
7
|
parameters: {
|
|
7
8
|
docs: {
|
|
8
9
|
description: {
|
|
@@ -36,9 +37,13 @@ declare const _default: {
|
|
|
36
37
|
args: {
|
|
37
38
|
items: ({
|
|
38
39
|
label: string;
|
|
40
|
+
href: string;
|
|
41
|
+
title: string;
|
|
39
42
|
onClick: () => void;
|
|
40
43
|
} | {
|
|
41
44
|
label: string;
|
|
45
|
+
href?: undefined;
|
|
46
|
+
title?: undefined;
|
|
42
47
|
onClick?: undefined;
|
|
43
48
|
})[];
|
|
44
49
|
isMobile: boolean;
|
|
@@ -51,9 +56,18 @@ export declare const Default: {
|
|
|
51
56
|
args: {
|
|
52
57
|
items: ({
|
|
53
58
|
label: string;
|
|
59
|
+
href: string;
|
|
60
|
+
title: string;
|
|
54
61
|
onClick: () => void;
|
|
55
62
|
} | {
|
|
56
63
|
label: string;
|
|
64
|
+
onClick: () => void;
|
|
65
|
+
href?: undefined;
|
|
66
|
+
title?: undefined;
|
|
67
|
+
} | {
|
|
68
|
+
label: string;
|
|
69
|
+
href?: undefined;
|
|
70
|
+
title?: undefined;
|
|
57
71
|
onClick?: undefined;
|
|
58
72
|
})[];
|
|
59
73
|
};
|
|
@@ -64,10 +78,12 @@ export declare const ShortBreadcrumb: {
|
|
|
64
78
|
args: {
|
|
65
79
|
items: ({
|
|
66
80
|
label: string;
|
|
67
|
-
|
|
81
|
+
href: string;
|
|
82
|
+
title: string;
|
|
68
83
|
} | {
|
|
69
84
|
label: string;
|
|
70
|
-
|
|
85
|
+
href?: undefined;
|
|
86
|
+
title?: undefined;
|
|
71
87
|
})[];
|
|
72
88
|
};
|
|
73
89
|
};
|
|
@@ -77,10 +93,10 @@ export declare const LongBreadcrumb: {
|
|
|
77
93
|
args: {
|
|
78
94
|
items: ({
|
|
79
95
|
label: string;
|
|
80
|
-
|
|
96
|
+
href: string;
|
|
81
97
|
} | {
|
|
82
98
|
label: string;
|
|
83
|
-
|
|
99
|
+
href?: undefined;
|
|
84
100
|
})[];
|
|
85
101
|
};
|
|
86
102
|
};
|
|
@@ -90,10 +106,19 @@ export declare const WithClickHandlers: {
|
|
|
90
106
|
args: {
|
|
91
107
|
items: ({
|
|
92
108
|
label: string;
|
|
109
|
+
href: string;
|
|
110
|
+
onClick: () => void;
|
|
111
|
+
title?: undefined;
|
|
112
|
+
} | {
|
|
113
|
+
label: string;
|
|
114
|
+
href: string;
|
|
115
|
+
title: string;
|
|
93
116
|
onClick: () => void;
|
|
94
117
|
} | {
|
|
95
118
|
label: string;
|
|
119
|
+
href?: undefined;
|
|
96
120
|
onClick?: undefined;
|
|
121
|
+
title?: undefined;
|
|
97
122
|
})[];
|
|
98
123
|
};
|
|
99
124
|
};
|
|
@@ -103,9 +128,11 @@ export declare const WithMixedNavigation: {
|
|
|
103
128
|
args: {
|
|
104
129
|
items: ({
|
|
105
130
|
label: string;
|
|
131
|
+
href: string;
|
|
106
132
|
onClick: () => void;
|
|
107
133
|
} | {
|
|
108
134
|
label: string;
|
|
135
|
+
href?: undefined;
|
|
109
136
|
onClick?: undefined;
|
|
110
137
|
})[];
|
|
111
138
|
};
|
|
@@ -115,10 +142,19 @@ export declare const EnglishContent: {
|
|
|
115
142
|
storyName: string;
|
|
116
143
|
args: {
|
|
117
144
|
items: ({
|
|
145
|
+
label: string;
|
|
146
|
+
href: string;
|
|
147
|
+
title: string;
|
|
148
|
+
onClick?: undefined;
|
|
149
|
+
} | {
|
|
118
150
|
label: string;
|
|
119
151
|
onClick: () => void;
|
|
152
|
+
href?: undefined;
|
|
153
|
+
title?: undefined;
|
|
120
154
|
} | {
|
|
121
155
|
label: string;
|
|
156
|
+
href?: undefined;
|
|
157
|
+
title?: undefined;
|
|
122
158
|
onClick?: undefined;
|
|
123
159
|
})[];
|
|
124
160
|
};
|
|
@@ -130,10 +166,16 @@ export declare const DesktopView: {
|
|
|
130
166
|
isMobile: boolean;
|
|
131
167
|
items: ({
|
|
132
168
|
label: string;
|
|
133
|
-
|
|
169
|
+
href: string;
|
|
170
|
+
title: string;
|
|
134
171
|
} | {
|
|
135
172
|
label: string;
|
|
136
|
-
|
|
173
|
+
href: string;
|
|
174
|
+
title?: undefined;
|
|
175
|
+
} | {
|
|
176
|
+
label: string;
|
|
177
|
+
href?: undefined;
|
|
178
|
+
title?: undefined;
|
|
137
179
|
})[];
|
|
138
180
|
};
|
|
139
181
|
};
|
|
@@ -144,10 +186,16 @@ export declare const MobileView: {
|
|
|
144
186
|
isMobile: boolean;
|
|
145
187
|
items: ({
|
|
146
188
|
label: string;
|
|
147
|
-
|
|
189
|
+
href: string;
|
|
190
|
+
title: string;
|
|
148
191
|
} | {
|
|
149
192
|
label: string;
|
|
150
|
-
|
|
193
|
+
href: string;
|
|
194
|
+
title?: undefined;
|
|
195
|
+
} | {
|
|
196
|
+
label: string;
|
|
197
|
+
href?: undefined;
|
|
198
|
+
title?: undefined;
|
|
151
199
|
})[];
|
|
152
200
|
};
|
|
153
201
|
};
|
|
@@ -155,3 +203,20 @@ export declare const ResponsiveComparison: {
|
|
|
155
203
|
(): import("react/jsx-runtime").JSX.Element;
|
|
156
204
|
storyName: string;
|
|
157
205
|
};
|
|
206
|
+
export declare const WithCustomComponent: {
|
|
207
|
+
(args: StoryArgs): import("react/jsx-runtime").JSX.Element;
|
|
208
|
+
storyName: string;
|
|
209
|
+
args: {
|
|
210
|
+
items: ({
|
|
211
|
+
label: string;
|
|
212
|
+
href: string;
|
|
213
|
+
component: React.FC<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">>;
|
|
214
|
+
title: string;
|
|
215
|
+
} | {
|
|
216
|
+
label: string;
|
|
217
|
+
href?: undefined;
|
|
218
|
+
component?: undefined;
|
|
219
|
+
title?: undefined;
|
|
220
|
+
})[];
|
|
221
|
+
};
|
|
222
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface DialogProps {
|
|
3
|
+
isOpen?: boolean;
|
|
4
|
+
onClose?: () => void;
|
|
5
|
+
title?: React.ReactNode;
|
|
6
|
+
content?: React.ReactNode;
|
|
7
|
+
buttons?: React.ReactNode;
|
|
8
|
+
showCloseButton?: boolean;
|
|
9
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
10
|
+
className?: string;
|
|
11
|
+
children?: React.ReactNode;
|
|
12
|
+
}
|
|
13
|
+
declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;
|
|
14
|
+
export declare const DialogButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
15
|
+
variant?: "primary" | "secondary";
|
|
16
|
+
icon?: React.ReactNode;
|
|
17
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
18
|
+
export { Dialog };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Dialog } from './Dialog';
|
|
3
|
+
declare const meta: Meta<typeof Dialog>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Dialog>;
|
|
6
|
+
export declare const Basic: Story;
|
|
7
|
+
export declare const WithTitle: Story;
|
|
8
|
+
export declare const WithButtons: Story;
|
|
9
|
+
export declare const FormDialog: Story;
|
|
10
|
+
export declare const LargeContent: Story;
|
|
11
|
+
export declare const NoCloseButton: Story;
|
|
12
|
+
export declare const DifferentSizes: Story;
|
|
13
|
+
export declare const WithoutTitle: Story;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -24,7 +24,8 @@ export type { InputProps } from './components/Input/Input';
|
|
|
24
24
|
export type { TabsProps, TabItem } from './components/Tabs/Tabs';
|
|
25
25
|
export type { DrawerProps, DrawerDirection } from './components/Drawer/Drawer';
|
|
26
26
|
export type { BackdropProps } from './components/Backdrop/Backdrop';
|
|
27
|
-
export
|
|
27
|
+
export { Dialog, DialogButton } from './components/Dialog/Dialog';
|
|
28
|
+
export type { DialogProps } from './components/Dialog/Dialog';
|
|
28
29
|
export type { UnifiedPaginationProps as PaginationProps } from './components/Pagination/Pagination';
|
|
29
30
|
export type { AccordionProps } from './components/Accordion/Accordion';
|
|
30
31
|
export type { DividerProps } from './components/Divider/Divider';
|
package/dist/types/index.js
CHANGED
|
@@ -9,16 +9,46 @@ import { Pagination as Pagination$1 } from './Pagination.js';
|
|
|
9
9
|
import { Accordion as Accordion$1 } from './Accordion.js';
|
|
10
10
|
import { Divider as Divider$1 } from './Divider.js';
|
|
11
11
|
import { RadioGroup as RadioGroup$1 } from './RadioGroup.js';
|
|
12
|
-
import {
|
|
12
|
+
import { X, C as Chips$1 } from './Chips-zfhiOvK2.js';
|
|
13
13
|
import { Menu as Menu$1 } from './Menu.js';
|
|
14
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
15
|
+
import React from 'react';
|
|
16
|
+
import cn from './utils.js';
|
|
14
17
|
export { MobileProvider, useMobile } from './contexts.js';
|
|
15
|
-
import 'react';
|
|
16
|
-
import './utils.js';
|
|
17
|
-
import 'react/jsx-runtime';
|
|
18
18
|
import 'react-dom';
|
|
19
19
|
import './chevron-left-Ck6O99eF.js';
|
|
20
20
|
import './createLucideIcon-D-q73LTT.js';
|
|
21
21
|
|
|
22
|
+
const Dialog = React.forwardRef(({ isOpen = false, onClose, title, content, buttons, showCloseButton = true, size = 'md', className, children, }, ref) => {
|
|
23
|
+
const handleClose = () => {
|
|
24
|
+
if (onClose) {
|
|
25
|
+
onClose();
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
const sizeClasses = {
|
|
29
|
+
sm: 'max-w-sm',
|
|
30
|
+
md: 'max-w-md',
|
|
31
|
+
lg: 'max-w-lg',
|
|
32
|
+
xl: 'max-w-xl',
|
|
33
|
+
};
|
|
34
|
+
const dialogClasses = cn('bg-white rounded-[10px] shadow-lg mx-4 w-full', sizeClasses[size], className);
|
|
35
|
+
return (jsx(Backdrop$1, { isOpen: isOpen, onClick: handleClose, blur: true, children: jsx("div", { ref: ref, className: dialogClasses, onClick: (e) => e.stopPropagation(), onKeyDown: (e) => {
|
|
36
|
+
if (e.key === 'Escape' && onClose) {
|
|
37
|
+
onClose();
|
|
38
|
+
}
|
|
39
|
+
}, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? 'dialog-title' : undefined, children: jsxs("div", { className: "flex flex-col p-6 gap-8", children: [title && (jsx("div", { className: "flex flex-col gap-2.5", children: jsx("div", { className: "flex items-center justify-between pb-4 border-b border-[#ebeaf0]", children: jsxs("div", { className: "flex items-center justify-between gap-3 w-full flex-row-reverse", children: [jsx("div", { className: "text-[#590d8b] text-xl font-extrabold leading-8", children: title }), showCloseButton && (jsx("button", { type: "button", onClick: handleClose, className: "p-1 rounded-full hover:bg-gray-100 transition-colors", "aria-label": "Close dialog", children: jsx(X, { className: "w-6 h-6 text-[#a4a2bb]" }) }))] }) }) })), content && jsx("div", { className: "flex flex-col gap-4", children: content }), children && !content && (jsx("div", { className: "flex flex-col gap-4", children: children })), buttons && jsx("div", { className: "flex flex-col gap-1.5", children: buttons })] }) }) }));
|
|
40
|
+
});
|
|
41
|
+
Dialog.displayName = 'Dialog';
|
|
42
|
+
// Button components for the dialog
|
|
43
|
+
const DialogButton = React.forwardRef(({ variant = 'primary', icon, children, className, ...props }, ref) => {
|
|
44
|
+
const buttonClasses = cn('h-14 px-4 py-[13px] rounded-md font-bold text-base leading-[1.8] flex items-center justify-center gap-2 transition-colors', {
|
|
45
|
+
'bg-[#590d8b] text-white hover:bg-[#4a0a75]': variant === 'primary',
|
|
46
|
+
'bg-white text-[#1a1922] border border-[#ebeaf0] hover:bg-gray-50': variant === 'secondary',
|
|
47
|
+
}, className);
|
|
48
|
+
return (jsxs("button", { type: "button", ref: ref, className: buttonClasses, ...props, children: [children, icon && jsx("span", { className: "w-5 h-5", children: icon })] }));
|
|
49
|
+
});
|
|
50
|
+
DialogButton.displayName = 'DialogButton';
|
|
51
|
+
|
|
22
52
|
// Original Components (for internal use)
|
|
23
53
|
// Components (direct exports)
|
|
24
54
|
const Typography = Typography$1;
|
|
@@ -35,4 +65,4 @@ const RadioGroup = RadioGroup$1;
|
|
|
35
65
|
const Chips = Chips$1;
|
|
36
66
|
const Menu = Menu$1;
|
|
37
67
|
|
|
38
|
-
export { Accordion, Backdrop, Breadcrumb, Button, Chips, Divider, Drawer, Input, Menu, Pagination, RadioGroup, Tabs, Typography };
|
|
68
|
+
export { Accordion, Backdrop, Breadcrumb, Button, Chips, Dialog, DialogButton, Divider, Drawer, Input, Menu, Pagination, RadioGroup, Tabs, Typography };
|
package/package.json
CHANGED
|
@@ -1,176 +1,176 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "automoby-kit",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "A comprehensive React UI component library - created in war 2025",
|
|
5
|
-
"main": "dist/cjs/index.js",
|
|
6
|
-
"module": "dist/esm/index.js",
|
|
7
|
-
"types": "dist/types/index.d.ts",
|
|
8
|
-
"files": [
|
|
9
|
-
"dist"
|
|
10
|
-
],
|
|
11
|
-
"exports": {
|
|
12
|
-
".": {
|
|
13
|
-
"import": "./dist/esm/index.js",
|
|
14
|
-
"require": "./dist/cjs/index.js",
|
|
15
|
-
"types": "./dist/types/index.d.ts"
|
|
16
|
-
},
|
|
17
|
-
"./Typography": {
|
|
18
|
-
"import": "./dist/esm/Typography.js",
|
|
19
|
-
"require": "./dist/cjs/Typography.js",
|
|
20
|
-
"types": "./dist/types/components/Typography/Typography.d.ts"
|
|
21
|
-
},
|
|
22
|
-
"./Button": {
|
|
23
|
-
"import": "./dist/esm/Button.js",
|
|
24
|
-
"require": "./dist/cjs/Button.js",
|
|
25
|
-
"types": "./dist/types/components/Button/Button.d.ts"
|
|
26
|
-
},
|
|
27
|
-
"./Input": {
|
|
28
|
-
"import": "./dist/esm/Input.js",
|
|
29
|
-
"require": "./dist/cjs/Input.js",
|
|
30
|
-
"types": "./dist/types/components/Input/Input.d.ts"
|
|
31
|
-
},
|
|
32
|
-
"./Tabs": {
|
|
33
|
-
"import": "./dist/esm/Tabs.js",
|
|
34
|
-
"require": "./dist/cjs/Tabs.js",
|
|
35
|
-
"types": "./dist/types/components/Tabs/Tabs.d.ts"
|
|
36
|
-
},
|
|
37
|
-
"./Drawer": {
|
|
38
|
-
"import": "./dist/esm/Drawer.js",
|
|
39
|
-
"require": "./dist/cjs/Drawer.js",
|
|
40
|
-
"types": "./dist/types/components/Drawer/Drawer.d.ts"
|
|
41
|
-
},
|
|
42
|
-
"./Backdrop": {
|
|
43
|
-
"import": "./dist/esm/Backdrop.js",
|
|
44
|
-
"require": "./dist/cjs/Backdrop.js",
|
|
45
|
-
"types": "./dist/types/components/Backdrop/Backdrop.d.ts"
|
|
46
|
-
},
|
|
47
|
-
"./Breadcrumb": {
|
|
48
|
-
"import": "./dist/esm/Breadcrumb.js",
|
|
49
|
-
"require": "./dist/cjs/Breadcrumb.js",
|
|
50
|
-
"types": "./dist/types/components/Breadcrumb/Breadcrumb.d.ts"
|
|
51
|
-
},
|
|
52
|
-
"./Pagination": {
|
|
53
|
-
"import": "./dist/esm/Pagination.js",
|
|
54
|
-
"require": "./dist/cjs/Pagination.js",
|
|
55
|
-
"types": "./dist/types/components/Pagination/Pagination.d.ts"
|
|
56
|
-
},
|
|
57
|
-
"./Accordion": {
|
|
58
|
-
"import": "./dist/esm/Accordion.js",
|
|
59
|
-
"require": "./dist/cjs/Accordion.js",
|
|
60
|
-
"types": "./dist/types/components/Accordion/Accordion.d.ts"
|
|
61
|
-
},
|
|
62
|
-
"./Divider": {
|
|
63
|
-
"import": "./dist/esm/Divider.js",
|
|
64
|
-
"require": "./dist/cjs/Divider.js",
|
|
65
|
-
"types": "./dist/types/components/Divider/Divider.d.ts"
|
|
66
|
-
},
|
|
67
|
-
"./RadioGroup": {
|
|
68
|
-
"import": "./dist/esm/RadioGroup.js",
|
|
69
|
-
"require": "./dist/cjs/RadioGroup.js",
|
|
70
|
-
"types": "./dist/types/components/RadioGroup/RadioGroup.d.ts"
|
|
71
|
-
},
|
|
72
|
-
"./Chips": {
|
|
73
|
-
"import": "./dist/esm/Chips.js",
|
|
74
|
-
"require": "./dist/cjs/Chips.js",
|
|
75
|
-
"types": "./dist/types/components/Chips/Chips.d.ts"
|
|
76
|
-
},
|
|
77
|
-
"./Menu": {
|
|
78
|
-
"import": "./dist/esm/Menu.js",
|
|
79
|
-
"require": "./dist/cjs/Menu.js",
|
|
80
|
-
"types": "./dist/types/components/Menu/Menu.d.ts"
|
|
81
|
-
},
|
|
82
|
-
"./contexts": {
|
|
83
|
-
"import": "./dist/esm/contexts.js",
|
|
84
|
-
"require": "./dist/cjs/contexts.js",
|
|
85
|
-
"types": "./dist/types/contexts/index.d.ts"
|
|
86
|
-
},
|
|
87
|
-
"./utils": {
|
|
88
|
-
"import": "./dist/esm/utils.js",
|
|
89
|
-
"require": "./dist/cjs/utils.js",
|
|
90
|
-
"types": "./dist/types/utils/cn.d.ts"
|
|
91
|
-
}
|
|
92
|
-
},
|
|
93
|
-
"keywords": [
|
|
94
|
-
"react",
|
|
95
|
-
"ui",
|
|
96
|
-
"components",
|
|
97
|
-
"typescript",
|
|
98
|
-
"tailwind",
|
|
99
|
-
"kit"
|
|
100
|
-
],
|
|
101
|
-
"scripts": {
|
|
102
|
-
"test": "echo \"Error: no test specified\" && exit 1",
|
|
103
|
-
"lint": "eslint \"src/**/*.{js,ts,jsx,tsx}\" --fix",
|
|
104
|
-
"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
|
|
105
|
-
"check-format": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
|
|
106
|
-
"check-lint": "eslint \"src/**/*.{js,ts,jsx,tsx}\"",
|
|
107
|
-
"check-types": "tsc --noEmit",
|
|
108
|
-
"prepare": "husky",
|
|
109
|
-
"prepublishOnly": "npm run build",
|
|
110
|
-
"storybook": "storybook dev -p 6006",
|
|
111
|
-
"storybook:dev": "concurrently \"npm:build:storybook:css:watch\" \"cross-env STORYBOOK_FORCE_MOBILE=true storybook dev -p 6006 \"",
|
|
112
|
-
"storybook:dev:mobile": "concurrently \"npm:build:storybook:css:watch\" \"cross-env STORYBOOK_FORCE_MOBILE=true storybook dev -p 6006 \"",
|
|
113
|
-
"storybook:dev:desktop": "concurrently \"npm:build:storybook:css:watch\" \"cross-env STORYBOOK_FORCE_MOBILE=false storybook dev -p 6006 \"",
|
|
114
|
-
"build-storybook": "storybook build",
|
|
115
|
-
"build:storybook:css:watch": "npx @tailwindcss/cli -i ./.storybook/tailwind.css -o ./tailwind-build/tailwind.build.css --watch",
|
|
116
|
-
"build:storybook:css": "npx @tailwindcss/cli -i ./.storybook/tailwind.css -o ./tailwind-build/tailwind.build.css",
|
|
117
|
-
"clean": "rimraf dist",
|
|
118
|
-
"build": "npm run clean && rollup -c"
|
|
119
|
-
},
|
|
120
|
-
"author": "Ghazal_kordi Alireza_mirzaee",
|
|
121
|
-
"license": "ISC",
|
|
122
|
-
"peerDependencies": {
|
|
123
|
-
"clsx": "^2.1.1",
|
|
124
|
-
"lucide-react": "^0.522.0",
|
|
125
|
-
"react": "^19.1.0",
|
|
126
|
-
"react-dom": "^19.1.0",
|
|
127
|
-
"tailwindcss": "^4.1.10",
|
|
128
|
-
"typescript": "^5.8.3",
|
|
129
|
-
"ua-parser-js": "^2.0.4"
|
|
130
|
-
},
|
|
131
|
-
"devDependencies": {
|
|
132
|
-
"@rollup/plugin-alias": "^5.1.1",
|
|
133
|
-
"@rollup/plugin-commonjs": "^28.0.6",
|
|
134
|
-
"@rollup/plugin-node-resolve": "^16.0.1",
|
|
135
|
-
"@rollup/plugin-terser": "^0.4.4",
|
|
136
|
-
"@rollup/plugin-typescript": "^12.1.3",
|
|
137
|
-
"@storybook/addon-docs": "^9.0.6",
|
|
138
|
-
"@storybook/addon-onboarding": "^9.0.6",
|
|
139
|
-
"@storybook/react-vite": "^9.0.6",
|
|
140
|
-
"@tailwindcss/cli": "^4.1.10",
|
|
141
|
-
"@tailwindcss/postcss": "^4.1.10",
|
|
142
|
-
"@types/node": "^24.0.3",
|
|
143
|
-
"@types/react": "^19.1.4",
|
|
144
|
-
"@types/react-dom": "^19.1.5",
|
|
145
|
-
"@types/ua-parser-js": "^0.7.39",
|
|
146
|
-
"@typescript-eslint/eslint-plugin": "^7.18.0",
|
|
147
|
-
"@typescript-eslint/parser": "^7.18.0",
|
|
148
|
-
"autoprefixer": "^10.4.21",
|
|
149
|
-
"clsx": "^2.1.1",
|
|
150
|
-
"concurrently": "^9.2.0",
|
|
151
|
-
"cross-env": "^7.0.3",
|
|
152
|
-
"eslint": "^8.57.0",
|
|
153
|
-
"eslint-config-airbnb": "^19.0.4",
|
|
154
|
-
"eslint-config-airbnb-typescript": "^18.0.0",
|
|
155
|
-
"eslint-config-prettier": "^10.1.5",
|
|
156
|
-
"eslint-import-resolver-typescript": "^4.4.3",
|
|
157
|
-
"eslint-plugin-import": "^2.32.0",
|
|
158
|
-
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
159
|
-
"eslint-plugin-prettier": "^5.5.0",
|
|
160
|
-
"eslint-plugin-react": "^7.37.5",
|
|
161
|
-
"eslint-plugin-storybook": "^9.0.6",
|
|
162
|
-
"husky": "^9.1.7",
|
|
163
|
-
"lucide-react": "^0.522.0",
|
|
164
|
-
"prettier": "^3.5.3",
|
|
165
|
-
"react": "^19.1.0",
|
|
166
|
-
"react-dom": "^19.1.0",
|
|
167
|
-
"rimraf": "^6.0.1",
|
|
168
|
-
"rollup": "^4.44.0",
|
|
169
|
-
"serve": "^14.2.4",
|
|
170
|
-
"storybook": "^9.0.6",
|
|
171
|
-
"tailwind-merge": "^3.3.1",
|
|
172
|
-
"tailwindcss": "^4.1.10",
|
|
173
|
-
"typescript": "^5.8.3",
|
|
174
|
-
"ua-parser-js": "^2.0.4"
|
|
175
|
-
}
|
|
176
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "automoby-kit",
|
|
3
|
+
"version": "1.0.41",
|
|
4
|
+
"description": "A comprehensive React UI component library - created in war 2025",
|
|
5
|
+
"main": "dist/cjs/index.js",
|
|
6
|
+
"module": "dist/esm/index.js",
|
|
7
|
+
"types": "dist/types/index.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist"
|
|
10
|
+
],
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"import": "./dist/esm/index.js",
|
|
14
|
+
"require": "./dist/cjs/index.js",
|
|
15
|
+
"types": "./dist/types/index.d.ts"
|
|
16
|
+
},
|
|
17
|
+
"./Typography": {
|
|
18
|
+
"import": "./dist/esm/Typography.js",
|
|
19
|
+
"require": "./dist/cjs/Typography.js",
|
|
20
|
+
"types": "./dist/types/components/Typography/Typography.d.ts"
|
|
21
|
+
},
|
|
22
|
+
"./Button": {
|
|
23
|
+
"import": "./dist/esm/Button.js",
|
|
24
|
+
"require": "./dist/cjs/Button.js",
|
|
25
|
+
"types": "./dist/types/components/Button/Button.d.ts"
|
|
26
|
+
},
|
|
27
|
+
"./Input": {
|
|
28
|
+
"import": "./dist/esm/Input.js",
|
|
29
|
+
"require": "./dist/cjs/Input.js",
|
|
30
|
+
"types": "./dist/types/components/Input/Input.d.ts"
|
|
31
|
+
},
|
|
32
|
+
"./Tabs": {
|
|
33
|
+
"import": "./dist/esm/Tabs.js",
|
|
34
|
+
"require": "./dist/cjs/Tabs.js",
|
|
35
|
+
"types": "./dist/types/components/Tabs/Tabs.d.ts"
|
|
36
|
+
},
|
|
37
|
+
"./Drawer": {
|
|
38
|
+
"import": "./dist/esm/Drawer.js",
|
|
39
|
+
"require": "./dist/cjs/Drawer.js",
|
|
40
|
+
"types": "./dist/types/components/Drawer/Drawer.d.ts"
|
|
41
|
+
},
|
|
42
|
+
"./Backdrop": {
|
|
43
|
+
"import": "./dist/esm/Backdrop.js",
|
|
44
|
+
"require": "./dist/cjs/Backdrop.js",
|
|
45
|
+
"types": "./dist/types/components/Backdrop/Backdrop.d.ts"
|
|
46
|
+
},
|
|
47
|
+
"./Breadcrumb": {
|
|
48
|
+
"import": "./dist/esm/Breadcrumb.js",
|
|
49
|
+
"require": "./dist/cjs/Breadcrumb.js",
|
|
50
|
+
"types": "./dist/types/components/Breadcrumb/Breadcrumb.d.ts"
|
|
51
|
+
},
|
|
52
|
+
"./Pagination": {
|
|
53
|
+
"import": "./dist/esm/Pagination.js",
|
|
54
|
+
"require": "./dist/cjs/Pagination.js",
|
|
55
|
+
"types": "./dist/types/components/Pagination/Pagination.d.ts"
|
|
56
|
+
},
|
|
57
|
+
"./Accordion": {
|
|
58
|
+
"import": "./dist/esm/Accordion.js",
|
|
59
|
+
"require": "./dist/cjs/Accordion.js",
|
|
60
|
+
"types": "./dist/types/components/Accordion/Accordion.d.ts"
|
|
61
|
+
},
|
|
62
|
+
"./Divider": {
|
|
63
|
+
"import": "./dist/esm/Divider.js",
|
|
64
|
+
"require": "./dist/cjs/Divider.js",
|
|
65
|
+
"types": "./dist/types/components/Divider/Divider.d.ts"
|
|
66
|
+
},
|
|
67
|
+
"./RadioGroup": {
|
|
68
|
+
"import": "./dist/esm/RadioGroup.js",
|
|
69
|
+
"require": "./dist/cjs/RadioGroup.js",
|
|
70
|
+
"types": "./dist/types/components/RadioGroup/RadioGroup.d.ts"
|
|
71
|
+
},
|
|
72
|
+
"./Chips": {
|
|
73
|
+
"import": "./dist/esm/Chips.js",
|
|
74
|
+
"require": "./dist/cjs/Chips.js",
|
|
75
|
+
"types": "./dist/types/components/Chips/Chips.d.ts"
|
|
76
|
+
},
|
|
77
|
+
"./Menu": {
|
|
78
|
+
"import": "./dist/esm/Menu.js",
|
|
79
|
+
"require": "./dist/cjs/Menu.js",
|
|
80
|
+
"types": "./dist/types/components/Menu/Menu.d.ts"
|
|
81
|
+
},
|
|
82
|
+
"./contexts": {
|
|
83
|
+
"import": "./dist/esm/contexts.js",
|
|
84
|
+
"require": "./dist/cjs/contexts.js",
|
|
85
|
+
"types": "./dist/types/contexts/index.d.ts"
|
|
86
|
+
},
|
|
87
|
+
"./utils": {
|
|
88
|
+
"import": "./dist/esm/utils.js",
|
|
89
|
+
"require": "./dist/cjs/utils.js",
|
|
90
|
+
"types": "./dist/types/utils/cn.d.ts"
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
"keywords": [
|
|
94
|
+
"react",
|
|
95
|
+
"ui",
|
|
96
|
+
"components",
|
|
97
|
+
"typescript",
|
|
98
|
+
"tailwind",
|
|
99
|
+
"kit"
|
|
100
|
+
],
|
|
101
|
+
"scripts": {
|
|
102
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
|
103
|
+
"lint": "eslint \"src/**/*.{js,ts,jsx,tsx}\" --fix",
|
|
104
|
+
"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
|
|
105
|
+
"check-format": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
|
|
106
|
+
"check-lint": "eslint \"src/**/*.{js,ts,jsx,tsx}\"",
|
|
107
|
+
"check-types": "tsc --noEmit",
|
|
108
|
+
"prepare": "husky",
|
|
109
|
+
"prepublishOnly": "npm run build",
|
|
110
|
+
"storybook": "storybook dev -p 6006",
|
|
111
|
+
"storybook:dev": "concurrently \"npm:build:storybook:css:watch\" \"cross-env STORYBOOK_FORCE_MOBILE=true storybook dev -p 6006 \"",
|
|
112
|
+
"storybook:dev:mobile": "concurrently \"npm:build:storybook:css:watch\" \"cross-env STORYBOOK_FORCE_MOBILE=true storybook dev -p 6006 \"",
|
|
113
|
+
"storybook:dev:desktop": "concurrently \"npm:build:storybook:css:watch\" \"cross-env STORYBOOK_FORCE_MOBILE=false storybook dev -p 6006 \"",
|
|
114
|
+
"build-storybook": "storybook build",
|
|
115
|
+
"build:storybook:css:watch": "npx @tailwindcss/cli -i ./.storybook/tailwind.css -o ./tailwind-build/tailwind.build.css --watch",
|
|
116
|
+
"build:storybook:css": "npx @tailwindcss/cli -i ./.storybook/tailwind.css -o ./tailwind-build/tailwind.build.css",
|
|
117
|
+
"clean": "rimraf dist",
|
|
118
|
+
"build": "npm run clean && rollup -c"
|
|
119
|
+
},
|
|
120
|
+
"author": "Ghazal_kordi Alireza_mirzaee",
|
|
121
|
+
"license": "ISC",
|
|
122
|
+
"peerDependencies": {
|
|
123
|
+
"clsx": "^2.1.1",
|
|
124
|
+
"lucide-react": "^0.522.0",
|
|
125
|
+
"react": "^19.1.0",
|
|
126
|
+
"react-dom": "^19.1.0",
|
|
127
|
+
"tailwindcss": "^4.1.10",
|
|
128
|
+
"typescript": "^5.8.3",
|
|
129
|
+
"ua-parser-js": "^2.0.4"
|
|
130
|
+
},
|
|
131
|
+
"devDependencies": {
|
|
132
|
+
"@rollup/plugin-alias": "^5.1.1",
|
|
133
|
+
"@rollup/plugin-commonjs": "^28.0.6",
|
|
134
|
+
"@rollup/plugin-node-resolve": "^16.0.1",
|
|
135
|
+
"@rollup/plugin-terser": "^0.4.4",
|
|
136
|
+
"@rollup/plugin-typescript": "^12.1.3",
|
|
137
|
+
"@storybook/addon-docs": "^9.0.6",
|
|
138
|
+
"@storybook/addon-onboarding": "^9.0.6",
|
|
139
|
+
"@storybook/react-vite": "^9.0.6",
|
|
140
|
+
"@tailwindcss/cli": "^4.1.10",
|
|
141
|
+
"@tailwindcss/postcss": "^4.1.10",
|
|
142
|
+
"@types/node": "^24.0.3",
|
|
143
|
+
"@types/react": "^19.1.4",
|
|
144
|
+
"@types/react-dom": "^19.1.5",
|
|
145
|
+
"@types/ua-parser-js": "^0.7.39",
|
|
146
|
+
"@typescript-eslint/eslint-plugin": "^7.18.0",
|
|
147
|
+
"@typescript-eslint/parser": "^7.18.0",
|
|
148
|
+
"autoprefixer": "^10.4.21",
|
|
149
|
+
"clsx": "^2.1.1",
|
|
150
|
+
"concurrently": "^9.2.0",
|
|
151
|
+
"cross-env": "^7.0.3",
|
|
152
|
+
"eslint": "^8.57.0",
|
|
153
|
+
"eslint-config-airbnb": "^19.0.4",
|
|
154
|
+
"eslint-config-airbnb-typescript": "^18.0.0",
|
|
155
|
+
"eslint-config-prettier": "^10.1.5",
|
|
156
|
+
"eslint-import-resolver-typescript": "^4.4.3",
|
|
157
|
+
"eslint-plugin-import": "^2.32.0",
|
|
158
|
+
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
159
|
+
"eslint-plugin-prettier": "^5.5.0",
|
|
160
|
+
"eslint-plugin-react": "^7.37.5",
|
|
161
|
+
"eslint-plugin-storybook": "^9.0.6",
|
|
162
|
+
"husky": "^9.1.7",
|
|
163
|
+
"lucide-react": "^0.522.0",
|
|
164
|
+
"prettier": "^3.5.3",
|
|
165
|
+
"react": "^19.1.0",
|
|
166
|
+
"react-dom": "^19.1.0",
|
|
167
|
+
"rimraf": "^6.0.1",
|
|
168
|
+
"rollup": "^4.44.0",
|
|
169
|
+
"serve": "^14.2.4",
|
|
170
|
+
"storybook": "^9.0.6",
|
|
171
|
+
"tailwind-merge": "^3.3.1",
|
|
172
|
+
"tailwindcss": "^4.1.10",
|
|
173
|
+
"typescript": "^5.8.3",
|
|
174
|
+
"ua-parser-js": "^2.0.4"
|
|
175
|
+
}
|
|
176
|
+
}
|