automoby-kit 1.0.55 → 1.0.56
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/dist/cjs/Input.js +1 -1
- package/dist/cjs/Menu.js +1 -1
- package/dist/cjs/Typography.js +1 -1
- package/dist/esm/Input.js +1 -1
- package/dist/esm/Menu.js +1 -1
- package/dist/esm/Typography.js +1 -1
- package/dist/types/Input.js +32 -32
- package/dist/types/Menu.js +11 -11
- package/dist/types/Typography.js +24 -24
- package/package.json +1 -1
package/dist/cjs/Input.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";var t=require("react/jsx-runtime"),
|
|
1
|
+
"use client";"use strict";var t=require("react/jsx-runtime"),l=require("react"),e=require("./utils.js"),r=require("./contexts.js");const x=l.forwardRef(({state:x="default",label:s,value:m,onChange:i,helperText:a,startIcon:d,endIcon:n,type:h="text",placeholder:g,isMobile:o,containerClassName:p,...u},c)=>{const[f,w]=l.useState(!1),b=l.useId(),j=r.useMobile(),v=o??j,y=f||""!==m&&null!=m,N="disabled"===x,I=e("relative flex items-center border rounded-lg transition-all duration-300 w-full sm:w-90 md:w-90 lg:w-90",{"h-10 sm:h-12 md:h-14 lg:h-16 xl:h-16":v,"h-12 sm:h-14 md:h-16 lg:h-18 xl:h-18":!v},"transition-all duration-300",{"border-neutral-light":"default"===x&&!f,"border-primary":"default"===x&&f,"border-error":"error"===x,"bg-white border-neutral-light cursor-not-allowed":N},p),q=e("absolute pointer-events-none transition-all duration-300",{"-top-2.5 bg-white px-1 mx-3 font-medium":y,"text-xs sm:text-s md:text-m lg:text-l xl:text-l":y&&v,"text-s sm:text-m md:text-l lg:text-xl xl:text-xl":y&&!v,"text-s sm:text-m md:text-l lg:text-xl xl:text-xl font-medium":!y&&v,"text-m sm:text-l md:text-xl lg:text-xl xl:text-xl font-medium":!y&&!v,"right-1 sm:right-1 md:right-2 lg:right-3 xl:right-3":d,"right-3 sm:right-3 md:right-4 lg:right-5 xl:right-5":!d,"top-1/2 -translate-y-1/2":!y,"right-11 sm:right-12 md:right-14 lg:right-16 xl:right-16":!y&&d,"right-4 sm:right-5 md:right-6 lg:right-7 xl:right-7":!y&&!d,"text-neutral-main":!f&&"default"===x,"text-neutral-light":N,"text-primary":f&&"default"===x,"text-error":y&&"error"===x}),C=e("peer w-full h-full bg-transparent outline-none font-medium disabled:text-neutral-light",{"text-s sm:text-m md:text-l lg:text-xl xl:text-xl":v,"text-m sm:text-l md:text-xl lg:text-xl xl:text-xl":!v},{"pr-8 sm:pr-10 md:pr-12 lg:pr-14 xl:pr-16":d,"pl-8 sm:pl-10 md:pl-12 lg:pl-14 xl:pl-16":n,"px-2 sm:px-3 md:px-4 lg:px-5 xl:px-6":!d&&!n,"pr-2 pl-8 sm:pr-3 sm:pl-10 md:pr-4 md:pl-12 lg:pr-5 lg:pl-14 xl:pr-6 xl:pl-16":!d&&n,"pl-2 pr-8 sm:pl-3 sm:pr-10 md:pl-4 md:pr-12 lg:pl-5 lg:pr-14 xl:pl-6 xl:pr-16":d&&!n,"cursor-not-allowed text-red-500":N,"text-neutral-dark":!f,"text-neutral-darker":f}),F=e("absolute transition-colors duration-300",{"h-3 w-3 sm:h-4 sm:w-4 md:h-5 md:w-5 lg:h-6 lg:w-6 xl:h-7 xl:w-7":v,"h-4 w-4 sm:h-5 sm:w-5 md:h-6 md:w-6 lg:h-7 lg:w-7 xl:h-8 xl:w-8":!v},{"text-neutral-main":"error"!==x&&!f,"text-primary":"default"===x&&f,"text-error":"error"===x,"text-neutral-light":N}),k=e("font-light mt-1 h-4","px-2 sm:px-3 md:px-4 lg:px-5 xl:px-6",{"text-xs sm:text-s md:text-m lg:text-l xl:text-l":v,"text-s sm:text-m md:text-l lg:text-xl xl:text-xl":!v},{"text-neutral-main":"default"===x,"text-primary":"default"===x&&f,"text-error":"error"===x,"text-neutral-light":N}),B=g&&!f?void 0:g;return t.jsxs("div",{children:[t.jsxs("div",{className:I,children:[n&&t.jsx("span",{className:e(F,"left-2 sm:left-3 md:left-4 lg:left-5 xl:left-6"),children:n}),t.jsx("label",{htmlFor:b,className:q,children:s}),t.jsx("input",{ref:c,id:b,type:h,value:m,onChange:i,onFocus:t=>{N||(w(!0),u.onFocus?.(t))},onBlur:t=>{N||(w(!1),u.onBlur?.(t))},disabled:N,placeholder:B,className:C,...u}),d&&t.jsx("span",{className:e(F,"right-2 sm:right-3 md:right-4 lg:right-5 xl:right-6"),children:d})]}),a&&t.jsx("p",{className:k,children:a})]})});x.displayName="Input",exports.Input=x;
|
package/dist/cjs/Menu.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("./utils.js"),n=require("./Typography.js");const a=r.forwardRef(({buttonText:a,items:
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("./utils.js"),n=require("./Typography.js");const a=r.forwardRef(({buttonText:a,items:l,disabled:i=!1,className:s,onOpenChange:o,isOpen:d,"aria-label":u,...c},p)=>{const[m,x]=r.useState(!1),g=r.useRef(null),b=r.useRef(null),y=void 0!==d?d:m,handleToggle=()=>{if(i)return;const e=!y;void 0===d&&x(e),o?.(e)};r.useEffect(()=>{const handleClickOutside=e=>{g.current&&!g.current.contains(e.target)&&(void 0===d&&x(!1),o?.(!1))};if(y)return document.addEventListener("mousedown",handleClickOutside),()=>{document.removeEventListener("mousedown",handleClickOutside)}},[y,d,o]);const f=t("inline-flex items-center justify-center","bg-white border border-neutral-light","rounded-md transition-colors duration-200","px-2 py-1 sm:px-3 sm:py-2 md:px-4 md:py-3 lg:px-6 lg:py-4 xl:px-8 xl:py-5","min-w-16 sm:min-w-20 md:min-w-24 lg:min-w-32 xl:min-w-40","hover:bg-neutral-lighter","focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",{"opacity-50 cursor-not-allowed":i,"cursor-pointer":!i}),h=t("absolute top-full z-10 mt-1","bg-white border border-neutral-light","rounded-md shadow-lg","left-0 right-0 sm:left-0 sm:right-auto sm:min-w-40 md:min-w-48 lg:min-w-56 xl:min-w-64","py-1 px-2 sm:py-2 sm:px-3 md:py-3 md:px-4 lg:py-4 lg:px-6 xl:py-5 xl:px-8","transition-all duration-200",{"opacity-100 translate-y-0 pointer-events-auto":y,"opacity-0 -translate-y-2 pointer-events-none":!y}),v=t("block w-full text-right","transition-colors duration-200","hover:bg-neutral-lighter rounded","focus:outline-none focus:bg-neutral-lighter","px-1 py-0.5 sm:px-2 sm:py-1 md:px-3 md:py-2 lg:px-4 lg:py-3 xl:px-5 xl:py-4","-mx-1 sm:-mx-2 md:-mx-3 lg:-mx-4 xl:-mx-5");return e.jsx("div",{ref:p,className:t("relative inline-block",s),...c,children:e.jsxs("div",{ref:g,children:[e.jsx("button",{ref:b,type:"button",className:f,onClick:handleToggle,onKeyDown:e=>{if(!i)switch(e.key){case"Escape":y&&(e.preventDefault(),void 0===d&&x(!1),o?.(!1),b.current?.focus());break;case"ArrowDown":y||(e.preventDefault(),handleToggle());break;case"Enter":case" ":e.preventDefault(),handleToggle()}},disabled:i,"aria-expanded":y,"aria-haspopup":"true","aria-label":u||`منوی ${a}`,children:e.jsx(n.Typography,{variant:"body-s-heavy",color:"neutral-darker",className:"text-right",children:a})}),e.jsx("div",{className:h,children:e.jsx("div",{className:"flex flex-col gap-1 sm:gap-2 md:gap-3 lg:gap-4 xl:gap-5",children:l.map(r=>{const a=e.jsx(n.Typography,{variant:"body-s-heavy",color:r.disabled?"neutral-main":"neutral-darker",className:"text-right",children:r.label}),l={className:t(v,{"opacity-50 cursor-not-allowed":r.disabled,"cursor-pointer":!r.disabled}),onClick:r.disabled?void 0:()=>(e=>{e.disabled||(void 0===d&&x(!1),o?.(!1),e.onClick?.())})(r),"aria-label":`منوی ${r.label}`};return r.href&&!r.disabled?e.jsx("a",{...l,href:r.href,role:"menuitem",tabIndex:y?0:-1,children:a},r.id):e.jsx("button",{...l,type:"button",role:"menuitem",tabIndex:y?0:-1,disabled:r.disabled,children:a},r.id)})})})]})})});a.displayName="Menu",exports.Menu=a;
|
package/dist/cjs/Typography.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var t=require("react"),e=require("./utils.js");const x={h1:"text-
|
|
1
|
+
"use strict";var t=require("react"),e=require("./utils.js");const x={h1:"text-h4 sm:text-h3 md:text-h2 lg:text-h1 xl:text-h1 font-fat",h2:"text-h5 sm:text-h4 md:text-h3 lg:text-h2 xl:text-h2 font-fat",h3:"text-h6 sm:text-h5 md:text-h4 lg:text-h3 xl:text-h3 font-fat",h4:"text-l sm:text-xl md:text-h5 lg:text-h4 xl:text-h4 font-heavy",h5:"text-m sm:text-l md:text-xl lg:text-h5 xl:text-h5 font-heavy",h6:"text-s sm:text-m md:text-l lg:text-h6 xl:text-h6 font-heavy","body-xl-heavy":"text-m sm:text-l md:text-xl lg:text-xl xl:text-xl font-heavy","body-l-heavy":"text-s sm:text-m md:text-l lg:text-l xl:text-l font-heavy","body-l-bold":"text-s sm:text-m md:text-l lg:text-l xl:text-l font-bold","body-l-medium":"text-s sm:text-m md:text-l lg:text-l xl:text-l font-medium","body-m-heavy":"text-ms sm:text-s md:text-m lg:text-m xl:text-m font-heavy","body-m-bold":"text-ms sm:text-s md:text-m lg:text-m xl:text-m font-bold","body-m-medium":"text-ms sm:text-s md:text-m lg:text-m xl:text-m font-medium","body-s-heavy":"text-xs sm:text-ms md:text-s lg:text-s xl:text-s font-heavy","body-s-bold":"text-xs sm:text-ms md:text-s lg:text-s xl:text-s font-bold","body-s-medium":"text-xs sm:text-ms md:text-s lg:text-s xl:text-s font-medium","body-ms-bold":"text-t sm:text-xs md:text-ms lg:text-ms xl:text-ms font-bold","body-ms-medium":"text-t sm:text-xs md:text-ms lg:text-ms xl:text-ms font-medium","body-xs-bold":"text-ss sm:text-t md:text-xs lg:text-xs xl:text-xs font-bold","body-xs-medium":"text-ss sm:text-t md:text-xs lg:text-xs xl:text-xs font-medium","body-t-bold":"text-ss sm:text-ss md:text-t lg:text-t xl:text-t font-bold","body-t-medium":"text-ss sm:text-ss md:text-t lg:text-t xl:text-t font-medium","body-ss-medium":"text-ss sm:text-ss md:text-ss lg:text-ss xl:text-ss font-medium"},m={primary:"text-primary",secondary:"text-secondary","neutral-darker":"text-neutral-darker","neutral-dark":"text-neutral-dark","neutral-main":"text-neutral-main",white:"text-white",inherit:"text-inherit"},s=t.forwardRef(({variant:s="body-m-medium",color:l="inherit",as:d,className:o,children:h,...a},r)=>{const n=d||(t=>t.startsWith("h")?t.split("-")[0]:"p")(s);return t.createElement(n,{ref:r,className:e(m[l],x[s],o),...a},h)});s.displayName="Typography",exports.Typography=s,exports.getTypographyClasses=t=>x[t];
|
package/dist/esm/Input.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as t,jsx as
|
|
1
|
+
"use client";import{jsxs as t,jsx as l}from"react/jsx-runtime";import e,{useState as r,useId as x}from"react";import m from"./utils.js";import{useMobile as i}from"./contexts.js";const a=e.forwardRef(({state:e="default",label:a,value:s,onChange:d,helperText:n,startIcon:o,endIcon:h,type:g="text",placeholder:p,isMobile:u,containerClassName:c,...f},w)=>{const[b,y]=r(!1),N=x(),v=i(),j=u??v,C=b||""!==s&&null!=s,F="disabled"===e,I=m("relative flex items-center border rounded-lg transition-all duration-300 w-full sm:w-90 md:w-90 lg:w-90",{"h-10 sm:h-12 md:h-14 lg:h-16 xl:h-16":j,"h-12 sm:h-14 md:h-16 lg:h-18 xl:h-18":!j},"transition-all duration-300",{"border-neutral-light":"default"===e&&!b,"border-primary":"default"===e&&b,"border-error":"error"===e,"bg-white border-neutral-light cursor-not-allowed":F},c),k=m("absolute pointer-events-none transition-all duration-300",{"-top-2.5 bg-white px-1 mx-3 font-medium":C,"text-xs sm:text-s md:text-m lg:text-l xl:text-l":C&&j,"text-s sm:text-m md:text-l lg:text-xl xl:text-xl":C&&!j,"text-s sm:text-m md:text-l lg:text-xl xl:text-xl font-medium":!C&&j,"text-m sm:text-l md:text-xl lg:text-xl xl:text-xl font-medium":!C&&!j,"right-1 sm:right-1 md:right-2 lg:right-3 xl:right-3":o,"right-3 sm:right-3 md:right-4 lg:right-5 xl:right-5":!o,"top-1/2 -translate-y-1/2":!C,"right-11 sm:right-12 md:right-14 lg:right-16 xl:right-16":!C&&o,"right-4 sm:right-5 md:right-6 lg:right-7 xl:right-7":!C&&!o,"text-neutral-main":!b&&"default"===e,"text-neutral-light":F,"text-primary":b&&"default"===e,"text-error":C&&"error"===e}),B=m("peer w-full h-full bg-transparent outline-none font-medium disabled:text-neutral-light",{"text-s sm:text-m md:text-l lg:text-xl xl:text-xl":j,"text-m sm:text-l md:text-xl lg:text-xl xl:text-xl":!j},{"pr-8 sm:pr-10 md:pr-12 lg:pr-14 xl:pr-16":o,"pl-8 sm:pl-10 md:pl-12 lg:pl-14 xl:pl-16":h,"px-2 sm:px-3 md:px-4 lg:px-5 xl:px-6":!o&&!h,"pr-2 pl-8 sm:pr-3 sm:pl-10 md:pr-4 md:pl-12 lg:pr-5 lg:pl-14 xl:pr-6 xl:pl-16":!o&&h,"pl-2 pr-8 sm:pl-3 sm:pr-10 md:pl-4 md:pr-12 lg:pl-5 lg:pr-14 xl:pl-6 xl:pr-16":o&&!h,"cursor-not-allowed text-red-500":F,"text-neutral-dark":!b,"text-neutral-darker":b}),M=m("absolute transition-colors duration-300",{"h-3 w-3 sm:h-4 sm:w-4 md:h-5 md:w-5 lg:h-6 lg:w-6 xl:h-7 xl:w-7":j,"h-4 w-4 sm:h-5 sm:w-5 md:h-6 md:w-6 lg:h-7 lg:w-7 xl:h-8 xl:w-8":!j},{"text-neutral-main":"error"!==e&&!b,"text-primary":"default"===e&&b,"text-error":"error"===e,"text-neutral-light":F}),R=m("font-light mt-1 h-4","px-2 sm:px-3 md:px-4 lg:px-5 xl:px-6",{"text-xs sm:text-s md:text-m lg:text-l xl:text-l":j,"text-s sm:text-m md:text-l lg:text-xl xl:text-xl":!j},{"text-neutral-main":"default"===e,"text-primary":"default"===e&&b,"text-error":"error"===e,"text-neutral-light":F}),T=p&&!b?void 0:p;return t("div",{children:[t("div",{className:I,children:[h&&l("span",{className:m(M,"left-2 sm:left-3 md:left-4 lg:left-5 xl:left-6"),children:h}),l("label",{htmlFor:N,className:k,children:a}),l("input",{ref:w,id:N,type:g,value:s,onChange:d,onFocus:t=>{F||(y(!0),f.onFocus?.(t))},onBlur:t=>{F||(y(!1),f.onBlur?.(t))},disabled:F,placeholder:T,className:B,...f}),o&&l("span",{className:m(M,"right-2 sm:right-3 md:right-4 lg:right-5 xl:right-6"),children:o})]}),n&&l("p",{className:R,children:n})]})});a.displayName="Input";export{a as Input};
|
package/dist/esm/Menu.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import t,{useState as n,useRef as
|
|
1
|
+
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import t,{useState as n,useRef as l,useEffect as a}from"react";import i from"./utils.js";import{Typography as o}from"./Typography.js";const s=t.forwardRef(({buttonText:t,items:s,disabled:d=!1,className:m,onOpenChange:p,isOpen:c,"aria-label":u,...x},b)=>{const[g,f]=n(!1),y=l(null),h=l(null),v=void 0!==c?c:g,handleToggle=()=>{if(d)return;const e=!v;void 0===c&&f(e),p?.(e)};a(()=>{const handleClickOutside=e=>{y.current&&!y.current.contains(e.target)&&(void 0===c&&f(!1),p?.(!1))};if(v)return document.addEventListener("mousedown",handleClickOutside),()=>{document.removeEventListener("mousedown",handleClickOutside)}},[v,c,p]);const w=i("inline-flex items-center justify-center","bg-white border border-neutral-light","rounded-md transition-colors duration-200","px-2 py-1 sm:px-3 sm:py-2 md:px-4 md:py-3 lg:px-6 lg:py-4 xl:px-8 xl:py-5","min-w-16 sm:min-w-20 md:min-w-24 lg:min-w-32 xl:min-w-40","hover:bg-neutral-lighter","focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",{"opacity-50 cursor-not-allowed":d,"cursor-pointer":!d}),k=i("absolute top-full z-10 mt-1","bg-white border border-neutral-light","rounded-md shadow-lg","left-0 right-0 sm:left-0 sm:right-auto sm:min-w-40 md:min-w-48 lg:min-w-56 xl:min-w-64","py-1 px-2 sm:py-2 sm:px-3 md:py-3 md:px-4 lg:py-4 lg:px-6 xl:py-5 xl:px-8","transition-all duration-200",{"opacity-100 translate-y-0 pointer-events-auto":v,"opacity-0 -translate-y-2 pointer-events-none":!v}),N=i("block w-full text-right","transition-colors duration-200","hover:bg-neutral-lighter rounded","focus:outline-none focus:bg-neutral-lighter","px-1 py-0.5 sm:px-2 sm:py-1 md:px-3 md:py-2 lg:px-4 lg:py-3 xl:px-5 xl:py-4","-mx-1 sm:-mx-2 md:-mx-3 lg:-mx-4 xl:-mx-5");return e("div",{ref:b,className:i("relative inline-block",m),...x,children:r("div",{ref:y,children:[e("button",{ref:h,type:"button",className:w,onClick:handleToggle,onKeyDown:e=>{if(!d)switch(e.key){case"Escape":v&&(e.preventDefault(),void 0===c&&f(!1),p?.(!1),h.current?.focus());break;case"ArrowDown":v||(e.preventDefault(),handleToggle());break;case"Enter":case" ":e.preventDefault(),handleToggle()}},disabled:d,"aria-expanded":v,"aria-haspopup":"true","aria-label":u||`منوی ${t}`,children:e(o,{variant:"body-s-heavy",color:"neutral-darker",className:"text-right",children:t})}),e("div",{className:k,children:e("div",{className:"flex flex-col gap-1 sm:gap-2 md:gap-3 lg:gap-4 xl:gap-5",children:s.map(r=>{const t=e(o,{variant:"body-s-heavy",color:r.disabled?"neutral-main":"neutral-darker",className:"text-right",children:r.label}),n={className:i(N,{"opacity-50 cursor-not-allowed":r.disabled,"cursor-pointer":!r.disabled}),onClick:r.disabled?void 0:()=>(e=>{e.disabled||(void 0===c&&f(!1),p?.(!1),e.onClick?.())})(r),"aria-label":`منوی ${r.label}`};return r.href&&!r.disabled?e("a",{...n,href:r.href,role:"menuitem",tabIndex:v?0:-1,children:t},r.id):e("button",{...n,type:"button",role:"menuitem",tabIndex:v?0:-1,disabled:r.disabled,children:t},r.id)})})})]})})});s.displayName="Menu";export{s as Menu};
|
package/dist/esm/Typography.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import t from"react";import e from"./utils.js";const x={h1:"text-
|
|
1
|
+
import t from"react";import e from"./utils.js";const x={h1:"text-h4 sm:text-h3 md:text-h2 lg:text-h1 xl:text-h1 font-fat",h2:"text-h5 sm:text-h4 md:text-h3 lg:text-h2 xl:text-h2 font-fat",h3:"text-h6 sm:text-h5 md:text-h4 lg:text-h3 xl:text-h3 font-fat",h4:"text-l sm:text-xl md:text-h5 lg:text-h4 xl:text-h4 font-heavy",h5:"text-m sm:text-l md:text-xl lg:text-h5 xl:text-h5 font-heavy",h6:"text-s sm:text-m md:text-l lg:text-h6 xl:text-h6 font-heavy","body-xl-heavy":"text-m sm:text-l md:text-xl lg:text-xl xl:text-xl font-heavy","body-l-heavy":"text-s sm:text-m md:text-l lg:text-l xl:text-l font-heavy","body-l-bold":"text-s sm:text-m md:text-l lg:text-l xl:text-l font-bold","body-l-medium":"text-s sm:text-m md:text-l lg:text-l xl:text-l font-medium","body-m-heavy":"text-ms sm:text-s md:text-m lg:text-m xl:text-m font-heavy","body-m-bold":"text-ms sm:text-s md:text-m lg:text-m xl:text-m font-bold","body-m-medium":"text-ms sm:text-s md:text-m lg:text-m xl:text-m font-medium","body-s-heavy":"text-xs sm:text-ms md:text-s lg:text-s xl:text-s font-heavy","body-s-bold":"text-xs sm:text-ms md:text-s lg:text-s xl:text-s font-bold","body-s-medium":"text-xs sm:text-ms md:text-s lg:text-s xl:text-s font-medium","body-ms-bold":"text-t sm:text-xs md:text-ms lg:text-ms xl:text-ms font-bold","body-ms-medium":"text-t sm:text-xs md:text-ms lg:text-ms xl:text-ms font-medium","body-xs-bold":"text-ss sm:text-t md:text-xs lg:text-xs xl:text-xs font-bold","body-xs-medium":"text-ss sm:text-t md:text-xs lg:text-xs xl:text-xs font-medium","body-t-bold":"text-ss sm:text-ss md:text-t lg:text-t xl:text-t font-bold","body-t-medium":"text-ss sm:text-ss md:text-t lg:text-t xl:text-t font-medium","body-ss-medium":"text-ss sm:text-ss md:text-ss lg:text-ss xl:text-ss font-medium"},getTypographyClasses=t=>x[t],m={primary:"text-primary",secondary:"text-secondary","neutral-darker":"text-neutral-darker","neutral-dark":"text-neutral-dark","neutral-main":"text-neutral-main",white:"text-white",inherit:"text-inherit"},s=t.forwardRef(({variant:s="body-m-medium",color:l="inherit",as:d,className:o,children:h,...a},n)=>{const r=d||(t=>t.startsWith("h")?t.split("-")[0]:"p")(s);return t.createElement(r,{ref:n,className:e(m[l],x[s],o),...a},h)});s.displayName="Typography";export{s as Typography,getTypographyClasses};
|
package/dist/types/Input.js
CHANGED
|
@@ -30,10 +30,10 @@ const Input = React.forwardRef(({ state = 'default', label, value, onChange, hel
|
|
|
30
30
|
const baseInputClasses = 'peer w-full h-full bg-transparent outline-none font-medium disabled:text-neutral-light';
|
|
31
31
|
const baseIconClasses = 'absolute transition-colors duration-300';
|
|
32
32
|
const containerClasses = cn(baseContainerClasses,
|
|
33
|
-
// SSR-safe
|
|
33
|
+
// Enhanced SSR-safe height with notable differences across breakpoints
|
|
34
34
|
{
|
|
35
|
-
'h-
|
|
36
|
-
'h-
|
|
35
|
+
'h-10 sm:h-12 md:h-14 lg:h-16 xl:h-16': actualIsMobile,
|
|
36
|
+
'h-12 sm:h-14 md:h-16 lg:h-18 xl:h-18': !actualIsMobile,
|
|
37
37
|
},
|
|
38
38
|
// Enhanced responsive breakpoints for client-side optimization
|
|
39
39
|
'transition-all duration-300', {
|
|
@@ -44,18 +44,18 @@ const Input = React.forwardRef(({ state = 'default', label, value, onChange, hel
|
|
|
44
44
|
}, containerClassName);
|
|
45
45
|
const labelClasses = cn(baseLabelClasses, {
|
|
46
46
|
'-top-2.5 bg-white px-1 mx-3 font-medium': isLabelFloated,
|
|
47
|
-
// SSR-safe label text sizes with
|
|
48
|
-
'text-xs sm:text-s md:text-
|
|
49
|
-
'text-s sm:text-
|
|
50
|
-
'text-s sm:text-m md:text-
|
|
51
|
-
'text-m sm:text-
|
|
52
|
-
//
|
|
53
|
-
'right-1 sm:right-1 md:right-
|
|
54
|
-
'right-3 sm:right-3 md:right-
|
|
47
|
+
// Enhanced SSR-safe label text sizes with notable differences
|
|
48
|
+
'text-xs sm:text-s md:text-m lg:text-l xl:text-l': isLabelFloated && actualIsMobile,
|
|
49
|
+
'text-s sm:text-m md:text-l lg:text-xl xl:text-xl': isLabelFloated && !actualIsMobile,
|
|
50
|
+
'text-s sm:text-m md:text-l lg:text-xl xl:text-xl font-medium': !isLabelFloated && actualIsMobile,
|
|
51
|
+
'text-m sm:text-l md:text-xl lg:text-xl xl:text-xl font-medium': !isLabelFloated && !actualIsMobile,
|
|
52
|
+
// Enhanced responsive positioning
|
|
53
|
+
'right-1 sm:right-1 md:right-2 lg:right-3 xl:right-3': startIcon,
|
|
54
|
+
'right-3 sm:right-3 md:right-4 lg:right-5 xl:right-5': !startIcon,
|
|
55
55
|
'top-1/2 -translate-y-1/2': !isLabelFloated,
|
|
56
|
-
//
|
|
57
|
-
'right-11 sm:right-
|
|
58
|
-
'right-4 sm:right-
|
|
56
|
+
// Enhanced responsive positioning for non-floated with icons
|
|
57
|
+
'right-11 sm:right-12 md:right-14 lg:right-16 xl:right-16': !isLabelFloated && startIcon,
|
|
58
|
+
'right-4 sm:right-5 md:right-6 lg:right-7 xl:right-7': !isLabelFloated && !startIcon,
|
|
59
59
|
// Colors
|
|
60
60
|
'text-neutral-main': !isFocused && state === 'default',
|
|
61
61
|
'text-neutral-light': isDisabled,
|
|
@@ -63,27 +63,27 @@ const Input = React.forwardRef(({ state = 'default', label, value, onChange, hel
|
|
|
63
63
|
'text-error': isLabelFloated && state === 'error',
|
|
64
64
|
});
|
|
65
65
|
const inputClasses = cn(baseInputClasses,
|
|
66
|
-
// SSR-safe text size with
|
|
66
|
+
// Enhanced SSR-safe text size with notable differences
|
|
67
67
|
{
|
|
68
|
-
'text-s sm:text-m md:text-
|
|
69
|
-
'text-m sm:text-
|
|
68
|
+
'text-s sm:text-m md:text-l lg:text-xl xl:text-xl': actualIsMobile,
|
|
69
|
+
'text-m sm:text-l md:text-xl lg:text-xl xl:text-xl': !actualIsMobile,
|
|
70
70
|
}, {
|
|
71
|
-
//
|
|
72
|
-
'pr-
|
|
73
|
-
'pl-
|
|
74
|
-
'px-
|
|
75
|
-
'pr-
|
|
76
|
-
'pl-
|
|
71
|
+
// Enhanced responsive padding with icons
|
|
72
|
+
'pr-8 sm:pr-10 md:pr-12 lg:pr-14 xl:pr-16': startIcon,
|
|
73
|
+
'pl-8 sm:pl-10 md:pl-12 lg:pl-14 xl:pl-16': endIcon,
|
|
74
|
+
'px-2 sm:px-3 md:px-4 lg:px-5 xl:px-6': !startIcon && !endIcon,
|
|
75
|
+
'pr-2 pl-8 sm:pr-3 sm:pl-10 md:pr-4 md:pl-12 lg:pr-5 lg:pl-14 xl:pr-6 xl:pl-16': !startIcon && endIcon,
|
|
76
|
+
'pl-2 pr-8 sm:pl-3 sm:pr-10 md:pl-4 md:pr-12 lg:pl-5 lg:pr-14 xl:pl-6 xl:pr-16': startIcon && !endIcon,
|
|
77
77
|
// States
|
|
78
78
|
'cursor-not-allowed text-red-500': isDisabled,
|
|
79
79
|
'text-neutral-dark': !isFocused,
|
|
80
80
|
'text-neutral-darker': isFocused,
|
|
81
81
|
});
|
|
82
82
|
const iconClasses = cn(baseIconClasses,
|
|
83
|
-
// SSR-safe icon size with
|
|
83
|
+
// Enhanced SSR-safe icon size with notable differences
|
|
84
84
|
{
|
|
85
|
-
'h-
|
|
86
|
-
'h-
|
|
85
|
+
'h-3 w-3 sm:h-4 sm:w-4 md:h-5 md:w-5 lg:h-6 lg:w-6 xl:h-7 xl:w-7': actualIsMobile,
|
|
86
|
+
'h-4 w-4 sm:h-5 sm:w-5 md:h-6 md:w-6 lg:h-7 lg:w-7 xl:h-8 xl:w-8': !actualIsMobile,
|
|
87
87
|
}, {
|
|
88
88
|
'text-neutral-main': state !== 'error' && !isFocused,
|
|
89
89
|
'text-primary': state === 'default' && isFocused,
|
|
@@ -91,11 +91,11 @@ const Input = React.forwardRef(({ state = 'default', label, value, onChange, hel
|
|
|
91
91
|
'text-neutral-light': isDisabled,
|
|
92
92
|
});
|
|
93
93
|
const helperTextClasses = cn('font-light mt-1 h-4',
|
|
94
|
-
//
|
|
95
|
-
'px-2 sm:px-
|
|
96
|
-
// SSR-safe text sizing with
|
|
97
|
-
'text-xs sm:text-s md:text-
|
|
98
|
-
'text-s sm:text-
|
|
94
|
+
// Enhanced responsive padding and text size
|
|
95
|
+
'px-2 sm:px-3 md:px-4 lg:px-5 xl:px-6', {
|
|
96
|
+
// Enhanced SSR-safe text sizing with notable differences
|
|
97
|
+
'text-xs sm:text-s md:text-m lg:text-l xl:text-l': actualIsMobile,
|
|
98
|
+
'text-s sm:text-m md:text-l lg:text-xl xl:text-xl': !actualIsMobile,
|
|
99
99
|
}, {
|
|
100
100
|
'text-neutral-main': state === 'default',
|
|
101
101
|
'text-primary': state === 'default' && isFocused,
|
|
@@ -104,7 +104,7 @@ const Input = React.forwardRef(({ state = 'default', label, value, onChange, hel
|
|
|
104
104
|
});
|
|
105
105
|
// If both label and placeholder are provided, hide placeholder when not focused
|
|
106
106
|
const computedPlaceholder = placeholder && !isFocused ? undefined : placeholder;
|
|
107
|
-
return (jsxs("div", { children: [jsxs("div", { className: containerClasses, children: [endIcon && (jsx("span", { className: cn(iconClasses, 'left-
|
|
107
|
+
return (jsxs("div", { children: [jsxs("div", { className: containerClasses, children: [endIcon && (jsx("span", { className: cn(iconClasses, 'left-2 sm:left-3 md:left-4 lg:left-5 xl:left-6'), children: endIcon })), jsx("label", { htmlFor: id, className: labelClasses, children: label }), jsx("input", { ref: ref, id: id, type: type, value: value, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, disabled: isDisabled, placeholder: computedPlaceholder, className: inputClasses, ...props }), startIcon && (jsx("span", { className: cn(iconClasses, 'right-2 sm:right-3 md:right-4 lg:right-5 xl:right-6'), children: startIcon }))] }), helperText && jsx("p", { className: helperTextClasses, children: helperText })] }));
|
|
108
108
|
});
|
|
109
109
|
Input.displayName = 'Input';
|
|
110
110
|
|
package/dist/types/Menu.js
CHANGED
|
@@ -79,8 +79,8 @@ const Menu = React.forwardRef(({ buttonText, items, disabled = false, className,
|
|
|
79
79
|
const buttonClasses = cn(
|
|
80
80
|
// Base button styles matching Figma design
|
|
81
81
|
'inline-flex items-center justify-center', 'bg-white border border-neutral-light', 'rounded-md transition-colors duration-200',
|
|
82
|
-
//
|
|
83
|
-
'px-
|
|
82
|
+
// Enhanced responsive padding and sizing with notable differences
|
|
83
|
+
'px-2 py-1 sm:px-3 sm:py-2 md:px-4 md:py-3 lg:px-6 lg:py-4 xl:px-8 xl:py-5', 'min-w-16 sm:min-w-20 md:min-w-24 lg:min-w-32 xl:min-w-40',
|
|
84
84
|
// Interactive states
|
|
85
85
|
'hover:bg-neutral-lighter', 'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
|
|
86
86
|
// Disabled state
|
|
@@ -91,21 +91,21 @@ const Menu = React.forwardRef(({ buttonText, items, disabled = false, className,
|
|
|
91
91
|
const dropdownClasses = cn(
|
|
92
92
|
// Base dropdown styles
|
|
93
93
|
'absolute top-full z-10 mt-1', 'bg-white border border-neutral-light', 'rounded-md shadow-lg',
|
|
94
|
-
//
|
|
95
|
-
'left-0 right-0 sm:left-0 sm:right-auto sm:min-w-
|
|
96
|
-
//
|
|
97
|
-
'py-
|
|
94
|
+
// Enhanced responsive positioning and sizing with notable differences
|
|
95
|
+
'left-0 right-0 sm:left-0 sm:right-auto sm:min-w-40 md:min-w-48 lg:min-w-56 xl:min-w-64',
|
|
96
|
+
// Enhanced responsive padding
|
|
97
|
+
'py-1 px-2 sm:py-2 sm:px-3 md:py-3 md:px-4 lg:py-4 lg:px-6 xl:py-5 xl:px-8',
|
|
98
98
|
// Animation
|
|
99
99
|
'transition-all duration-200', {
|
|
100
100
|
'opacity-100 translate-y-0 pointer-events-auto': isOpen,
|
|
101
101
|
'opacity-0 -translate-y-2 pointer-events-none': !isOpen,
|
|
102
102
|
});
|
|
103
103
|
const itemClasses = cn('block w-full text-right', 'transition-colors duration-200', 'hover:bg-neutral-lighter rounded', 'focus:outline-none focus:bg-neutral-lighter',
|
|
104
|
-
//
|
|
105
|
-
'px-
|
|
106
|
-
//
|
|
107
|
-
'-mx-
|
|
108
|
-
return (jsx("div", { ref: ref, className: cn('relative inline-block', className), ...props, children: jsxs("div", { ref: menuRef, children: [jsx("button", { ref: buttonRef, type: "button", className: buttonClasses, onClick: handleToggle, onKeyDown: handleKeyDown, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "true", "aria-label": ariaLabel || `منوی ${buttonText}`, children: jsx(Typography, { variant: "body-s-heavy", color: "neutral-darker", className: "text-right", children: buttonText }) }), jsx("div", { className: dropdownClasses, children: jsx("div", { className: "flex flex-col gap-
|
|
104
|
+
// Enhanced responsive padding with notable differences
|
|
105
|
+
'px-1 py-0.5 sm:px-2 sm:py-1 md:px-3 md:py-2 lg:px-4 lg:py-3 xl:px-5 xl:py-4',
|
|
106
|
+
// Enhanced responsive margins
|
|
107
|
+
'-mx-1 sm:-mx-2 md:-mx-3 lg:-mx-4 xl:-mx-5');
|
|
108
|
+
return (jsx("div", { ref: ref, className: cn('relative inline-block', className), ...props, children: jsxs("div", { ref: menuRef, children: [jsx("button", { ref: buttonRef, type: "button", className: buttonClasses, onClick: handleToggle, onKeyDown: handleKeyDown, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "true", "aria-label": ariaLabel || `منوی ${buttonText}`, children: jsx(Typography, { variant: "body-s-heavy", color: "neutral-darker", className: "text-right", children: buttonText }) }), jsx("div", { className: dropdownClasses, children: jsx("div", { className: "flex flex-col gap-1 sm:gap-2 md:gap-3 lg:gap-4 xl:gap-5", children: items.map((item) => {
|
|
109
109
|
const content = (jsx(Typography, { variant: "body-s-heavy", color: item.disabled ? 'neutral-main' : 'neutral-darker', className: "text-right", children: item.label }));
|
|
110
110
|
const commonProps = {
|
|
111
111
|
className: cn(itemClasses, {
|
package/dist/types/Typography.js
CHANGED
|
@@ -2,30 +2,30 @@ import React from 'react';
|
|
|
2
2
|
import cn from './utils.js';
|
|
3
3
|
|
|
4
4
|
const variantClasses = {
|
|
5
|
-
// Headings with Fat weight (900) -
|
|
6
|
-
h1: 'text-
|
|
7
|
-
h2: 'text-
|
|
8
|
-
h3: 'text-
|
|
9
|
-
h4: 'text-
|
|
10
|
-
h5: 'text-
|
|
11
|
-
h6: 'text-
|
|
12
|
-
// Body Copy with specific weight variants -
|
|
13
|
-
'body-xl-heavy': 'text-
|
|
14
|
-
'body-l-heavy': 'text-
|
|
15
|
-
'body-l-bold': 'text-
|
|
16
|
-
'body-l-medium': 'text-
|
|
17
|
-
'body-m-heavy': 'text-
|
|
18
|
-
'body-m-bold': 'text-
|
|
19
|
-
'body-m-medium': 'text-
|
|
20
|
-
'body-s-heavy': 'text-
|
|
21
|
-
'body-s-bold': 'text-
|
|
22
|
-
'body-s-medium': 'text-
|
|
23
|
-
'body-ms-bold': 'text-
|
|
24
|
-
'body-ms-medium': 'text-
|
|
25
|
-
'body-xs-bold': 'text-
|
|
26
|
-
'body-xs-medium': 'text-
|
|
27
|
-
'body-t-bold': 'text-ss sm:text-
|
|
28
|
-
'body-t-medium': 'text-ss sm:text-
|
|
5
|
+
// Headings with Fat weight (900) - Enhanced responsive scaling with notable differences
|
|
6
|
+
h1: 'text-h4 sm:text-h3 md:text-h2 lg:text-h1 xl:text-h1 font-fat',
|
|
7
|
+
h2: 'text-h5 sm:text-h4 md:text-h3 lg:text-h2 xl:text-h2 font-fat',
|
|
8
|
+
h3: 'text-h6 sm:text-h5 md:text-h4 lg:text-h3 xl:text-h3 font-fat',
|
|
9
|
+
h4: 'text-l sm:text-xl md:text-h5 lg:text-h4 xl:text-h4 font-heavy',
|
|
10
|
+
h5: 'text-m sm:text-l md:text-xl lg:text-h5 xl:text-h5 font-heavy',
|
|
11
|
+
h6: 'text-s sm:text-m md:text-l lg:text-h6 xl:text-h6 font-heavy',
|
|
12
|
+
// Body Copy with specific weight variants - Enhanced responsive scaling
|
|
13
|
+
'body-xl-heavy': 'text-m sm:text-l md:text-xl lg:text-xl xl:text-xl font-heavy',
|
|
14
|
+
'body-l-heavy': 'text-s sm:text-m md:text-l lg:text-l xl:text-l font-heavy',
|
|
15
|
+
'body-l-bold': 'text-s sm:text-m md:text-l lg:text-l xl:text-l font-bold',
|
|
16
|
+
'body-l-medium': 'text-s sm:text-m md:text-l lg:text-l xl:text-l font-medium',
|
|
17
|
+
'body-m-heavy': 'text-ms sm:text-s md:text-m lg:text-m xl:text-m font-heavy',
|
|
18
|
+
'body-m-bold': 'text-ms sm:text-s md:text-m lg:text-m xl:text-m font-bold',
|
|
19
|
+
'body-m-medium': 'text-ms sm:text-s md:text-m lg:text-m xl:text-m font-medium',
|
|
20
|
+
'body-s-heavy': 'text-xs sm:text-ms md:text-s lg:text-s xl:text-s font-heavy',
|
|
21
|
+
'body-s-bold': 'text-xs sm:text-ms md:text-s lg:text-s xl:text-s font-bold',
|
|
22
|
+
'body-s-medium': 'text-xs sm:text-ms md:text-s lg:text-s xl:text-s font-medium',
|
|
23
|
+
'body-ms-bold': 'text-t sm:text-xs md:text-ms lg:text-ms xl:text-ms font-bold',
|
|
24
|
+
'body-ms-medium': 'text-t sm:text-xs md:text-ms lg:text-ms xl:text-ms font-medium',
|
|
25
|
+
'body-xs-bold': 'text-ss sm:text-t md:text-xs lg:text-xs xl:text-xs font-bold',
|
|
26
|
+
'body-xs-medium': 'text-ss sm:text-t md:text-xs lg:text-xs xl:text-xs font-medium',
|
|
27
|
+
'body-t-bold': 'text-ss sm:text-ss md:text-t lg:text-t xl:text-t font-bold',
|
|
28
|
+
'body-t-medium': 'text-ss sm:text-ss md:text-t lg:text-t xl:text-t font-medium',
|
|
29
29
|
'body-ss-medium': 'text-ss sm:text-ss md:text-ss lg:text-ss xl:text-ss font-medium',
|
|
30
30
|
};
|
|
31
31
|
// Export for reuse in other components
|