builder-settings-types 0.0.35 → 0.0.40

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.
Files changed (23) hide show
  1. package/dist/Font.svg +3 -3
  2. package/dist/Opacity.svg +7 -7
  3. package/dist/Typography-Size.svg +3 -3
  4. package/dist/URL.svg +3 -3
  5. package/dist/Upload.svg +4 -4
  6. package/dist/Weight.svg +3 -3
  7. package/dist/align-centre.svg +4 -4
  8. package/dist/align-left.svg +4 -4
  9. package/dist/align-right.svg +4 -4
  10. package/dist/border-size.svg +3 -3
  11. package/dist/builder-settings-types.cjs.js +4 -4
  12. package/dist/builder-settings-types.css +1 -1
  13. package/dist/builder-settings-types.es.js +120 -110
  14. package/dist/colors.svg +3 -3
  15. package/dist/index.d.ts +11 -1
  16. package/dist/margins-bottom.svg +3 -3
  17. package/dist/margins-left.svg +3 -3
  18. package/dist/margins-right.svg +3 -3
  19. package/dist/margins-top.svg +3 -3
  20. package/dist/radius.svg +3 -3
  21. package/dist/spacing-height.svg +3 -3
  22. package/dist/spacing-width.svg +3 -3
  23. package/package.json +1 -1
package/dist/Font.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M3 5.75C3 5.05109 3 4.70163 3.11418 4.42597C3.26642 4.05843 3.55843 3.76642 3.92597 3.61418C4.20163 3.5 4.55109 3.5 5.25 3.5H12.75C13.4489 3.5 13.7984 3.5 14.074 3.61418C14.4416 3.76642 14.7336 4.05843 14.8858 4.42597C15 4.70163 15 5.05109 15 5.75M6.75 15.5H11.25M9 3.5V15.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
- </svg>
1
+ <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M3 5.75C3 5.05109 3 4.70163 3.11418 4.42597C3.26642 4.05843 3.55843 3.76642 3.92597 3.61418C4.20163 3.5 4.55109 3.5 5.25 3.5H12.75C13.4489 3.5 13.7984 3.5 14.074 3.61418C14.4416 3.76642 14.7336 4.05843 14.8858 4.42597C15 4.70163 15 5.05109 15 5.75M6.75 15.5H11.25M9 3.5V15.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
package/dist/Opacity.svg CHANGED
@@ -1,7 +1,7 @@
1
- <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M3.69749 15.365C3.54749 15.365 3.40502 15.305 3.30002 15.2C1.77752 13.6775 0.9375 11.6525 0.9375 9.5C0.9375 5.0525 4.5525 1.4375 9 1.4375C11.1525 1.4375 13.1775 2.2775 14.7 3.8C14.805 3.905 14.865 4.0475 14.865 4.1975C14.865 4.3475 14.805 4.49 14.7 4.595L4.09502 15.2C3.99002 15.305 3.84749 15.365 3.69749 15.365ZM9 2.5625C5.175 2.5625 2.0625 5.675 2.0625 9.5C2.0625 11.165 2.64751 12.74 3.71251 13.9925L13.4925 4.2125C12.24 3.1475 10.665 2.5625 9 2.5625Z" fill="#667085"/>
3
- <path d="M9.00014 17.5626C6.84764 17.5626 4.82266 16.7226 3.30016 15.2001C3.19516 15.0951 3.13513 14.9526 3.13513 14.8026C3.13513 14.6526 3.19516 14.5101 3.30016 14.4051L13.9051 3.80009C14.1226 3.58259 14.4826 3.58259 14.7001 3.80009C16.2226 5.32259 17.0626 7.34759 17.0626 9.50009C17.0626 13.9476 13.4476 17.5626 9.00014 17.5626ZM4.50764 14.7876C5.76014 15.8526 7.33514 16.4376 9.00014 16.4376C12.8251 16.4376 15.9376 13.3251 15.9376 9.50009C15.9376 7.83509 15.3526 6.26009 14.2876 5.00759L4.50764 14.7876Z" fill="#667085"/>
4
- <path d="M10.0575 17.4875C9.91496 17.4875 9.77248 17.435 9.65998 17.3225L5.41496 13.0775C5.19746 12.86 5.19746 12.5 5.41496 12.2825C5.63246 12.065 5.9925 12.065 6.21 12.2825L10.455 16.5275C10.6725 16.745 10.6725 17.105 10.455 17.3225C10.35 17.435 10.2075 17.4875 10.0575 17.4875Z" fill="#667085"/>
5
- <path d="M13.4025 15.5225C13.26 15.5225 13.1175 15.47 13.005 15.3575L8.06999 10.4225C7.85249 10.205 7.85249 9.84498 8.06999 9.62748C8.28749 9.40998 8.64748 9.40998 8.86498 9.62748L13.8 14.5625C14.0175 14.78 14.0175 15.14 13.8 15.3575C13.6875 15.47 13.545 15.5225 13.4025 15.5225Z" fill="#667085"/>
6
- <path d="M15.84 12.6651C15.6975 12.6651 15.555 12.6126 15.4425 12.5001L10.725 7.78259C10.5075 7.56509 10.5075 7.20509 10.725 6.98759C10.9425 6.77009 11.3025 6.77009 11.52 6.98759L16.2375 11.7051C16.455 11.9226 16.455 12.2826 16.2375 12.5001C16.1325 12.6051 15.99 12.6651 15.84 12.6651Z" fill="#667085"/>
7
- </svg>
1
+ <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M3.69749 15.365C3.54749 15.365 3.40502 15.305 3.30002 15.2C1.77752 13.6775 0.9375 11.6525 0.9375 9.5C0.9375 5.0525 4.5525 1.4375 9 1.4375C11.1525 1.4375 13.1775 2.2775 14.7 3.8C14.805 3.905 14.865 4.0475 14.865 4.1975C14.865 4.3475 14.805 4.49 14.7 4.595L4.09502 15.2C3.99002 15.305 3.84749 15.365 3.69749 15.365ZM9 2.5625C5.175 2.5625 2.0625 5.675 2.0625 9.5C2.0625 11.165 2.64751 12.74 3.71251 13.9925L13.4925 4.2125C12.24 3.1475 10.665 2.5625 9 2.5625Z" fill="#667085"/>
3
+ <path d="M9.00014 17.5626C6.84764 17.5626 4.82266 16.7226 3.30016 15.2001C3.19516 15.0951 3.13513 14.9526 3.13513 14.8026C3.13513 14.6526 3.19516 14.5101 3.30016 14.4051L13.9051 3.80009C14.1226 3.58259 14.4826 3.58259 14.7001 3.80009C16.2226 5.32259 17.0626 7.34759 17.0626 9.50009C17.0626 13.9476 13.4476 17.5626 9.00014 17.5626ZM4.50764 14.7876C5.76014 15.8526 7.33514 16.4376 9.00014 16.4376C12.8251 16.4376 15.9376 13.3251 15.9376 9.50009C15.9376 7.83509 15.3526 6.26009 14.2876 5.00759L4.50764 14.7876Z" fill="#667085"/>
4
+ <path d="M10.0575 17.4875C9.91496 17.4875 9.77248 17.435 9.65998 17.3225L5.41496 13.0775C5.19746 12.86 5.19746 12.5 5.41496 12.2825C5.63246 12.065 5.9925 12.065 6.21 12.2825L10.455 16.5275C10.6725 16.745 10.6725 17.105 10.455 17.3225C10.35 17.435 10.2075 17.4875 10.0575 17.4875Z" fill="#667085"/>
5
+ <path d="M13.4025 15.5225C13.26 15.5225 13.1175 15.47 13.005 15.3575L8.06999 10.4225C7.85249 10.205 7.85249 9.84498 8.06999 9.62748C8.28749 9.40998 8.64748 9.40998 8.86498 9.62748L13.8 14.5625C14.0175 14.78 14.0175 15.14 13.8 15.3575C13.6875 15.47 13.545 15.5225 13.4025 15.5225Z" fill="#667085"/>
6
+ <path d="M15.84 12.6651C15.6975 12.6651 15.555 12.6126 15.4425 12.5001L10.725 7.78259C10.5075 7.56509 10.5075 7.20509 10.725 6.98759C10.9425 6.77009 11.3025 6.77009 11.52 6.98759L16.2375 11.7051C16.455 11.9226 16.455 12.2826 16.2375 12.5001C16.1325 12.6051 15.99 12.6651 15.84 12.6651Z" fill="#667085"/>
7
+ </svg>
package/dist/Typography-Size.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M6 5.75H12M9 5.75V13.25M5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
- </svg>
1
+ <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M6 5.75H12M9 5.75V13.25M5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
package/dist/URL.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M15.75 6.75L15.75 2.25M15.75 2.25H11.25M15.75 2.25L9.75 8.25M7.5 3.75H5.85C4.58988 3.75 3.95982 3.75 3.47852 3.99524C3.05516 4.21095 2.71095 4.55516 2.49524 4.97852C2.25 5.45982 2.25 6.08988 2.25 7.35V12.15C2.25 13.4101 2.25 14.0402 2.49524 14.5215C2.71095 14.9448 3.05516 15.289 3.47852 15.5048C3.95982 15.75 4.58988 15.75 5.85 15.75H10.65C11.9101 15.75 12.5402 15.75 13.0215 15.5048C13.4448 15.289 13.789 14.9448 14.0048 14.5215C14.25 14.0402 14.25 13.4101 14.25 12.15V10.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
- </svg>
1
+ <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M15.75 6.75L15.75 2.25M15.75 2.25H11.25M15.75 2.25L9.75 8.25M7.5 3.75H5.85C4.58988 3.75 3.95982 3.75 3.47852 3.99524C3.05516 4.21095 2.71095 4.55516 2.49524 4.97852C2.25 5.45982 2.25 6.08988 2.25 7.35V12.15C2.25 13.4101 2.25 14.0402 2.49524 14.5215C2.71095 14.9448 3.05516 15.289 3.47852 15.5048C3.95982 15.75 4.58988 15.75 5.85 15.75H10.65C11.9101 15.75 12.5402 15.75 13.0215 15.5048C13.4448 15.289 13.789 14.9448 14.0048 14.5215C14.25 14.0402 14.25 13.4101 14.25 12.15V10.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
package/dist/Upload.svg CHANGED
@@ -1,4 +1,4 @@
1
- <svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <rect y="0.5" width="30" height="30" rx="15" fill="#F2F4F7"/>
3
- <path d="M12 17.5L14.5 15M14.5 15L17 17.5M14.5 15V20.625M19.5 17.9643C20.2634 17.3338 20.75 16.38 20.75 15.3125C20.75 13.414 19.211 11.875 17.3125 11.875C17.1759 11.875 17.0482 11.8037 16.9788 11.6861C16.1638 10.303 14.659 9.375 12.9375 9.375C10.3487 9.375 8.25 11.4737 8.25 14.0625C8.25 15.3538 8.77215 16.5232 9.61684 17.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
4
- </svg>
1
+ <svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect y="0.5" width="30" height="30" rx="15" fill="#F2F4F7"/>
3
+ <path d="M12 17.5L14.5 15M14.5 15L17 17.5M14.5 15V20.625M19.5 17.9643C20.2634 17.3338 20.75 16.38 20.75 15.3125C20.75 13.414 19.211 11.875 17.3125 11.875C17.1759 11.875 17.0482 11.8037 16.9788 11.6861C16.1638 10.303 14.659 9.375 12.9375 9.375C10.3487 9.375 8.25 11.4737 8.25 14.0625C8.25 15.3538 8.77215 16.5232 9.61684 17.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
4
+ </svg>
package/dist/Weight.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M3 5.75C3 5.05109 3 4.70163 3.11418 4.42597C3.26642 4.05843 3.55843 3.76642 3.92597 3.61418C4.20163 3.5 4.55109 3.5 5.25 3.5H12.75C13.4489 3.5 13.7984 3.5 14.074 3.61418C14.4416 3.76642 14.7336 4.05843 14.8858 4.42597C15 4.70163 15 5.05109 15 5.75M6 15.5H12M7.6875 3.5V15.5M10.3125 3.5V15.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
- </svg>
1
+ <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M3 5.75C3 5.05109 3 4.70163 3.11418 4.42597C3.26642 4.05843 3.55843 3.76642 3.92597 3.61418C4.20163 3.5 4.55109 3.5 5.25 3.5H12.75C13.4489 3.5 13.7984 3.5 14.074 3.61418C14.4416 3.76642 14.7336 4.05843 14.8858 4.42597C15 4.70163 15 5.05109 15 5.75M6 15.5H12M7.6875 3.5V15.5M10.3125 3.5V15.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
package/dist/align-centre.svg CHANGED
@@ -1,4 +1,4 @@
1
- <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M12 7.5C12.6989 7.5 13.0484 7.5 13.324 7.38582C13.6916 7.23358 13.9836 6.94157 14.1358 6.57402C14.25 6.29837 14.25 5.94891 14.25 5.25C14.25 4.55109 14.25 4.20163 14.1358 3.92598C13.9836 3.55843 13.6916 3.26642 13.324 3.11418C13.0484 3 12.6989 3 12 3L6 3C5.30109 3 4.95163 3 4.67598 3.11418C4.30843 3.26642 4.01642 3.55843 3.86418 3.92597C3.75 4.20163 3.75 4.55109 3.75 5.25C3.75 5.94891 3.75 6.29837 3.86418 6.57402C4.01642 6.94157 4.30843 7.23358 4.67598 7.38582C4.95163 7.5 5.30109 7.5 6 7.5L12 7.5Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
3
- <path d="M13.5 15C14.1989 15 14.5484 15 14.824 14.8858C15.1916 14.7336 15.4836 14.4416 15.6358 14.074C15.75 13.7984 15.75 13.4489 15.75 12.75C15.75 12.0511 15.75 11.7016 15.6358 11.426C15.4836 11.0584 15.1916 10.7664 14.824 10.6142C14.5484 10.5 14.1989 10.5 13.5 10.5H4.5C3.80109 10.5 3.45163 10.5 3.17598 10.6142C2.80843 10.7664 2.51642 11.0584 2.36418 11.426C2.25 11.7016 2.25 12.0511 2.25 12.75C2.25 13.4489 2.25 13.7984 2.36418 14.074C2.51642 14.4416 2.80843 14.7336 3.17597 14.8858C3.45163 15 3.80109 15 4.5 15L13.5 15Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
4
- </svg>
1
+ <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M12 7.5C12.6989 7.5 13.0484 7.5 13.324 7.38582C13.6916 7.23358 13.9836 6.94157 14.1358 6.57402C14.25 6.29837 14.25 5.94891 14.25 5.25C14.25 4.55109 14.25 4.20163 14.1358 3.92598C13.9836 3.55843 13.6916 3.26642 13.324 3.11418C13.0484 3 12.6989 3 12 3L6 3C5.30109 3 4.95163 3 4.67598 3.11418C4.30843 3.26642 4.01642 3.55843 3.86418 3.92597C3.75 4.20163 3.75 4.55109 3.75 5.25C3.75 5.94891 3.75 6.29837 3.86418 6.57402C4.01642 6.94157 4.30843 7.23358 4.67598 7.38582C4.95163 7.5 5.30109 7.5 6 7.5L12 7.5Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M13.5 15C14.1989 15 14.5484 15 14.824 14.8858C15.1916 14.7336 15.4836 14.4416 15.6358 14.074C15.75 13.7984 15.75 13.4489 15.75 12.75C15.75 12.0511 15.75 11.7016 15.6358 11.426C15.4836 11.0584 15.1916 10.7664 14.824 10.6142C14.5484 10.5 14.1989 10.5 13.5 10.5H4.5C3.80109 10.5 3.45163 10.5 3.17598 10.6142C2.80843 10.7664 2.51642 11.0584 2.36418 11.426C2.25 11.7016 2.25 12.0511 2.25 12.75C2.25 13.4489 2.25 13.7984 2.36418 14.074C2.51642 14.4416 2.80843 14.7336 3.17597 14.8858C3.45163 15 3.80109 15 4.5 15L13.5 15Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
4
+ </svg>
package/dist/align-left.svg CHANGED
@@ -1,4 +1,4 @@
1
- <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M10.5 7.5C11.1989 7.5 11.5484 7.5 11.824 7.38582C12.1916 7.23358 12.4836 6.94157 12.6358 6.57402C12.75 6.29837 12.75 5.94891 12.75 5.25C12.75 4.55109 12.75 4.20163 12.6358 3.92598C12.4836 3.55843 12.1916 3.26642 11.824 3.11418C11.5484 3 11.1989 3 10.5 3L4.5 3C3.80109 3 3.45163 3 3.17598 3.11418C2.80843 3.26642 2.51642 3.55843 2.36418 3.92597C2.25 4.20163 2.25 4.55109 2.25 5.25C2.25 5.94891 2.25 6.29837 2.36418 6.57402C2.51642 6.94157 2.80843 7.23358 3.17597 7.38582C3.45163 7.5 3.80109 7.5 4.5 7.5L10.5 7.5Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
3
- <path d="M13.5 15C14.1989 15 14.5484 15 14.824 14.8858C15.1916 14.7336 15.4836 14.4416 15.6358 14.074C15.75 13.7984 15.75 13.4489 15.75 12.75C15.75 12.0511 15.75 11.7016 15.6358 11.426C15.4836 11.0584 15.1916 10.7664 14.824 10.6142C14.5484 10.5 14.1989 10.5 13.5 10.5H4.5C3.80109 10.5 3.45163 10.5 3.17598 10.6142C2.80843 10.7664 2.51642 11.0584 2.36418 11.426C2.25 11.7016 2.25 12.0511 2.25 12.75C2.25 13.4489 2.25 13.7984 2.36418 14.074C2.51642 14.4416 2.80843 14.7336 3.17597 14.8858C3.45163 15 3.80109 15 4.5 15L13.5 15Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
4
- </svg>
1
+ <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M10.5 7.5C11.1989 7.5 11.5484 7.5 11.824 7.38582C12.1916 7.23358 12.4836 6.94157 12.6358 6.57402C12.75 6.29837 12.75 5.94891 12.75 5.25C12.75 4.55109 12.75 4.20163 12.6358 3.92598C12.4836 3.55843 12.1916 3.26642 11.824 3.11418C11.5484 3 11.1989 3 10.5 3L4.5 3C3.80109 3 3.45163 3 3.17598 3.11418C2.80843 3.26642 2.51642 3.55843 2.36418 3.92597C2.25 4.20163 2.25 4.55109 2.25 5.25C2.25 5.94891 2.25 6.29837 2.36418 6.57402C2.51642 6.94157 2.80843 7.23358 3.17597 7.38582C3.45163 7.5 3.80109 7.5 4.5 7.5L10.5 7.5Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M13.5 15C14.1989 15 14.5484 15 14.824 14.8858C15.1916 14.7336 15.4836 14.4416 15.6358 14.074C15.75 13.7984 15.75 13.4489 15.75 12.75C15.75 12.0511 15.75 11.7016 15.6358 11.426C15.4836 11.0584 15.1916 10.7664 14.824 10.6142C14.5484 10.5 14.1989 10.5 13.5 10.5H4.5C3.80109 10.5 3.45163 10.5 3.17598 10.6142C2.80843 10.7664 2.51642 11.0584 2.36418 11.426C2.25 11.7016 2.25 12.0511 2.25 12.75C2.25 13.4489 2.25 13.7984 2.36418 14.074C2.51642 14.4416 2.80843 14.7336 3.17597 14.8858C3.45163 15 3.80109 15 4.5 15L13.5 15Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
4
+ </svg>
package/dist/align-right.svg CHANGED
@@ -1,4 +1,4 @@
1
- <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M13.5 7.5C14.1989 7.5 14.5484 7.5 14.824 7.38582C15.1916 7.23358 15.4836 6.94157 15.6358 6.57402C15.75 6.29837 15.75 5.94891 15.75 5.25C15.75 4.55109 15.75 4.20163 15.6358 3.92598C15.4836 3.55843 15.1916 3.26642 14.824 3.11418C14.5484 3 14.1989 3 13.5 3L7.5 3C6.80109 3 6.45163 3 6.17598 3.11418C5.80843 3.26642 5.51642 3.55843 5.36418 3.92597C5.25 4.20163 5.25 4.55109 5.25 5.25C5.25 5.94891 5.25 6.29837 5.36418 6.57402C5.51642 6.94157 5.80843 7.23358 6.17598 7.38582C6.45163 7.5 6.80109 7.5 7.5 7.5L13.5 7.5Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
3
- <path d="M13.5 15C14.1989 15 14.5484 15 14.824 14.8858C15.1916 14.7336 15.4836 14.4416 15.6358 14.074C15.75 13.7984 15.75 13.4489 15.75 12.75C15.75 12.0511 15.75 11.7016 15.6358 11.426C15.4836 11.0584 15.1916 10.7664 14.824 10.6142C14.5484 10.5 14.1989 10.5 13.5 10.5H4.5C3.80109 10.5 3.45163 10.5 3.17598 10.6142C2.80843 10.7664 2.51642 11.0584 2.36418 11.426C2.25 11.7016 2.25 12.0511 2.25 12.75C2.25 13.4489 2.25 13.7984 2.36418 14.074C2.51642 14.4416 2.80843 14.7336 3.17597 14.8858C3.45163 15 3.80109 15 4.5 15L13.5 15Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
4
- </svg>
1
+ <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M13.5 7.5C14.1989 7.5 14.5484 7.5 14.824 7.38582C15.1916 7.23358 15.4836 6.94157 15.6358 6.57402C15.75 6.29837 15.75 5.94891 15.75 5.25C15.75 4.55109 15.75 4.20163 15.6358 3.92598C15.4836 3.55843 15.1916 3.26642 14.824 3.11418C14.5484 3 14.1989 3 13.5 3L7.5 3C6.80109 3 6.45163 3 6.17598 3.11418C5.80843 3.26642 5.51642 3.55843 5.36418 3.92597C5.25 4.20163 5.25 4.55109 5.25 5.25C5.25 5.94891 5.25 6.29837 5.36418 6.57402C5.51642 6.94157 5.80843 7.23358 6.17598 7.38582C6.45163 7.5 6.80109 7.5 7.5 7.5L13.5 7.5Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M13.5 15C14.1989 15 14.5484 15 14.824 14.8858C15.1916 14.7336 15.4836 14.4416 15.6358 14.074C15.75 13.7984 15.75 13.4489 15.75 12.75C15.75 12.0511 15.75 11.7016 15.6358 11.426C15.4836 11.0584 15.1916 10.7664 14.824 10.6142C14.5484 10.5 14.1989 10.5 13.5 10.5H4.5C3.80109 10.5 3.45163 10.5 3.17598 10.6142C2.80843 10.7664 2.51642 11.0584 2.36418 11.426C2.25 11.7016 2.25 12.0511 2.25 12.75C2.25 13.4489 2.25 13.7984 2.36418 14.074C2.51642 14.4416 2.80843 14.7336 3.17597 14.8858C3.45163 15 3.80109 15 4.5 15L13.5 15Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
4
+ </svg>
package/dist/border-size.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M6 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V6.5M6 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V12.5M15.75 6.5V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H12M15.75 12.5V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H12" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
- </svg>
1
+ <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M6 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V6.5M6 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V12.5M15.75 6.5V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H12M15.75 12.5V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H12" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
package/dist/builder-settings-types.cjs.js CHANGED
@@ -1,15 +1,15 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function g(l,t){for(const e in l)if(l.hasOwnProperty(e)){const s=l[e];t(e,s)}}class C{setOnChange(t){this.onChange=t,g(this.settings,(e,s)=>{s.setOnChange(t)})}constructor(t){this.title=t.title,this.settings=t.settings,Object.assign(this,t.settings)}draw(){const t=document.createElement("div");t.className="setting-group";const e=document.createElement("div");e.className="setting-group-title";const s=document.createElement("h3");s.textContent=this.title;const n=document.createElement("span");n.className="setting-group-arrow",n.innerHTML=`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function w(o,t){for(const e in o)if(o.hasOwnProperty(e)){const i=o[e];t(e,i)}}class f{setOnChange(t){this.onChange=t,w(this.settings,(e,i)=>{i.setOnChange(t)})}constructor(t){this.title=t.title,this.settings=t.settings,Object.assign(this,t.settings)}draw(){const t=document.createElement("div");t.className="setting-group";const e=document.createElement("div");e.className="setting-group-title";const i=document.createElement("h3");i.textContent=this.title;const s=document.createElement("span");s.className="setting-group-arrow",s.innerHTML=`
2
2
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
3
3
  <path d="M5 7.5L10 12.5L15 7.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
4
4
  </svg>
5
- `;const i=document.createElement("div");i.className="setting-group-content";for(const a in this.settings){const u=this.settings[a].draw();i.appendChild(u)}return e.onclick=()=>{i.classList.toggle("collapsed"),n.classList.toggle("rotated")},e.appendChild(s),e.appendChild(n),t.appendChild(e),t.appendChild(i),t}}function v(l){switch(l){case"number":return 0;case"text":return"";case"select":return null;case"color":return"#000000";case"date":return new Date().toISOString().split("T")[0]}}class m{constructor(t={}){this.props=t,this.value=this.props.default,this.title=t.title||"",this.value=t.default}setOnChange(t){this.onChange=t}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const i=document.createElement("div");if(i.className="icon-container",t.icon){let a=this.createIcon(t.icon,t.iconClassName);i.appendChild(a)}if(t.title){const a=this.createLabel(t.title,t.labelClassName);i.appendChild(a)}e.appendChild(i)}const s=document.createElement("div");s.className=t.inputClassName||"";const n=document.createElement("input");return n.value=t.value||v(t.inputType),n.type=t.inputType,n.oninput=i=>{const a=i.target;let c=a.value;t.inputType==="number"?c=Number(a.value):(t.inputType==="color"||t.inputType==="date")&&(c=a.value),this.value=c,this.onChange&&this.onChange(this.value)},t.inputCustomizer&&t.inputCustomizer(n),s.appendChild(n),e.appendChild(s),e}createLabel(t,e){const s=document.createElement("span");return s.textContent=t,s.className="input-label "+(e||""),s}createIcon(t,e){const s=document.createElement("span");return s.className="input-icon "+(e||""),s.innerHTML=t,s}}class h extends m{constructor(t={}){super(t),this.inputType="number"}draw(){const t=e=>{this.props.minValue!==void 0&&(e.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(e.max=String(this.props.maxValue)),this.props.className&&e.classList.add(this.props.className),e.addEventListener("input",()=>{const s=this.props.minValue??Number.MIN_SAFE_INTEGER,n=this.props.maxValue??Number.MAX_SAFE_INTEGER;let i=Number(e.value);i<s&&(i=s),i>n&&(i=n),e.value=String(i)})};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+this.props.inputClassName,wrapperClassName:"number-setting-wrapper "+this.props.wrapperClassName,inputCustomizer:t})}}class w extends C{constructor(){super({title:"Margin",settings:{margin:new h({title:"Margin All"}),marginTop:new h({title:"Margin Top"}),marginRight:new h({title:"Margin Right"}),marginBottom:new h({title:"Margin Bottom"}),marginLeft:new h({title:"Margin Left"})}})}getCssCode(){return`
5
+ `;const n=document.createElement("div");n.className="setting-group-content";for(const a in this.settings){const h=this.settings[a].draw();n.appendChild(h)}return e.onclick=()=>{n.classList.toggle("collapsed"),s.classList.toggle("rotated")},e.appendChild(i),e.appendChild(s),t.appendChild(e),t.appendChild(n),t}}function N(o){switch(o){case"number":return 0;case"text":return"";case"select":return null;case"color":return"#000000";case"date":return new Date().toISOString().split("T")[0]}}class g{constructor(t={}){this.props=t,this.value=this.props.default,this.title=t.title||""}setOnChange(t){this.onChange=t}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t)}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const n=document.createElement("div");if(n.className="icon-container",t.icon){let a=this.createIcon(t.icon,t.iconClassName);n.appendChild(a)}if(t.title){const a=this.createLabel(t.title,t.labelClassName);n.appendChild(a)}e.appendChild(n)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const s=document.createElement("input");return this.inputEl=s,s.value=t.value||N(t.inputType),s.type=t.inputType,s.className=t.inputClassName||"",s.oninput=n=>{const a=n.target;let l=a.value;t.inputType==="number"?l=Number(a.value):(t.inputType==="color"||t.inputType==="date")&&(l=a.value),this.value=l,this.onChange&&this.onChange(this.value)},t.inputCustomizer&&t.inputCustomizer(s),i.appendChild(s),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}class u extends g{constructor(t={}){super(t),this.inputType="number"}draw(){const t=e=>{this.props.minValue!==void 0&&(e.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(e.max=String(this.props.maxValue)),this.props.className&&e.classList.add(this.props.className),e.addEventListener("input",()=>{const i=this.props.minValue??Number.MIN_SAFE_INTEGER,s=this.props.maxValue??Number.MAX_SAFE_INTEGER;let n=Number(e.value);n<i&&(n=i),n>s&&(n=s),e.value=String(n)})};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+this.props.inputClassName,wrapperClassName:"number-setting-wrapper "+this.props.wrapperClassName,inputCustomizer:t})}}class x extends f{constructor(){super({title:"Margin",settings:{margin:new u({title:"Margin All"}),marginTop:new u({title:"Margin Top"}),marginRight:new u({title:"Margin Right"}),marginBottom:new u({title:"Margin Bottom"}),marginLeft:new u({title:"Margin Left"})}})}getCssCode(){return`
6
6
  margin-botton: ${this.settings.marginBottom.value}px;
7
7
  margin-top: ${this.settings.marginTop.value}px;
8
8
  margin-right: ${this.settings.marginRight.value}px;
9
9
  margin-left: ${this.settings.marginLeft.value}px;
10
- `}}class N extends m{constructor(t){super(t),this.inputType="color",this.icon="<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>"}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const s=this.createIcon(this.icon),n=this.createLabel("Color");n.className="color-text",e.appendChild(s),e.appendChild(n);const i=document.createElement("div");i.className="color-input-wrapper";let a,c;a=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input",inputCustomizer:p=>{p.oninput=r=>{var d;let o=r.target.value;this.value=o,(d=this.onChange)==null||d.call(this,o),u.style.backgroundColor=o}}}),c=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker",inputCustomizer:p=>{p.oninput=r=>{var d;let o=r.target.value;this.value=o,(d=this.onChange)==null||d.call(this,o),u.style.backgroundColor=o}}});const u=document.createElement("div");return u.className="color-preview",u.style.backgroundColor=this.value||"",c.oninput=p=>{var o;let r=p.target.value;this.value=r,(o=this.onChange)==null||o.call(this,r),u.style.backgroundColor=r},a.oninput=p=>{var o;let r=p.target.value;this.value=r,(o=this.onChange)==null||o.call(this,r),u.style.backgroundColor=r},i.appendChild(u),i.appendChild(a),i.appendChild(c),t.appendChild(e),t.appendChild(i),t}}class f extends m{constructor(t={}){super(t),this.inputType="text"}draw(){return this.createInput({value:this.value,inputType:this.inputType})}}class y extends h{constructor(t){super({...t,minValue:0,maxValue:100,icon:x,title:t.title||"Opacity",inputClassName:"number-setting-input",wrapperClassName:"opacity-setting-wrapper"}),this.inputType="number"}}const x=`
10
+ `}}class y extends g{constructor(t){super(t),this.inputType="color",this.icon="<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>"}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.icon),s=this.createLabel("Color");e.appendChild(i),e.appendChild(s);const n=document.createElement("div");n.className="color-input-wrapper";let a,l;const h=/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,d=p=>h.test(p.value)?(p.style.border="",!0):(p.style.border="1px solid red",!1);a=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input",inputCustomizer:p=>{p.oninput=v=>{var m;let c=v.target.value.trim();if(!d(p))return;this.value=c,(m=this.onChange)==null||m.call(this,c);const C=document.getElementsByClassName("color-picker")[0];C.value=c,r.style.backgroundColor=c}}}),l=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker",inputCustomizer:p=>{p.oninput=v=>{var m;let c=v.target.value;this.value=c,(m=this.onChange)==null||m.call(this,c);const C=document.getElementsByClassName("color-text-input")[0];C.value=c,r.style.backgroundColor=c,d(C)}}});const r=document.createElement("div");return r.className="color-preview",r.style.backgroundColor=this.value||"",n.appendChild(r),n.appendChild(l),n.appendChild(a),t.appendChild(e),t.appendChild(n),t}}class E extends g{constructor(t={}){super(t),this.inputType="text"}draw(){return this.createInput({value:this.value,inputType:this.inputType})}}class S extends u{constructor(t){super({...t,minValue:0,maxValue:100,icon:b,title:t.title||"Opacity"}),this.inputType="number"}}const b=`
11
11
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
12
12
  <path d="M3.69749 15.365C3.54749 15.365 3.40502 15.305 3.30002 15.2C1.77752 13.6775 0.9375 11.6525 0.9375 9.5C0.9375 5.0525 4.5525 1.4375 9 1.4375C11.1525 1.4375 13.1775 2.2775 14.7 3.8C14.805 3.905 14.865 4.0475 14.865 4.1975C14.865 4.3475 14.805 4.49 14.7 4.595L4.09502 15.2C3.99002 15.305 3.84749 15.365 3.69749 15.365ZM9 2.5625C5.175 2.5625 2.0625 5.675 2.0625 9.5C2.0625 11.165 2.64751 12.74 3.71251 13.9925L13.4925 4.2125C12.24 3.1475 10.665 2.5625 9 2.5625Z" fill="#667085"/>
13
13
  <path d="M9.00026 17.5623C6.84776 17.5623 4.82278 16.7223 3.30028 15.1998C3.19528 15.0948 3.13525 14.9523 3.13525 14.8023C3.13525 14.6523 3.19528 14.5098 3.30028 14.4048L13.9052 3.79984C14.1227 3.58234 14.4827 3.58234 14.7002 3.79984C16.2227 5.32234 17.0628 7.34734 17.0628 9.49984C17.0628 13.9473 13.4478 17.5623 9.00026 17.5623ZM4.50777 14.7873C5.76027 15.8523 7.33526 16.4373 9.00026 16.4373C12.8253 16.4373 15.9378 13.3248 15.9378 9.49984C15.9378 7.83484 15.3527 6.25984 14.2878 5.00734L4.50777 14.7873Z" fill="#667085"/>
14
14
  </svg>
15
- `;class b extends m{constructor(t={}){super(t),this.inputType="select"}draw(){const t=document.createElement("div");if(t.classList.add("custom-select-container"),this.props.title){const n=document.createElement("label");n.textContent=this.props.title,n.classList.add("custom-select-title"),t.appendChild(n)}if(this.props.icon){const n=document.createElement("span");n.innerHTML=this.props.icon,n.classList.add("custom-select-icon"),t.appendChild(n)}const e=document.createElement("select");e.classList.add("custom-select"),e.onchange=n=>{var i;(i=this.onChange)==null||i.call(this,n.target.value)};let s=[];return this.props.getOptions&&(s=this.props.getOptions()),this.props.options&&s.push(...this.props.options),s.forEach(({value:n,name:i})=>{const a=document.createElement("option");a.value=n,a.textContent=i,e.appendChild(a)}),this.props.value&&(e.value=this.props.value),t.appendChild(e),t}}exports.ColorSetting=N;exports.MarginSettingGroup=w;exports.NumberSetting=h;exports.OpacitySetting=y;exports.SelectSetting=b;exports.Setting=m;exports.SettingGroup=C;exports.StringSetting=f;exports.iterateSettings=g;
15
+ `;class T extends g{constructor(t={}){super(t),this.inputType="select",this.props.options||(this.props.options=[]),this.props.getOptionsAsync&&this.props.getOptionsAsync().then(e=>{this.props.options=[...this.props.options,...e],e.forEach(i=>{var s;(s=this.selectNode)==null||s.appendChild(this.createOption(i))})}).catch(e=>{console.error("Failed to fetch async options:",e)})}createOption(t){const e=document.createElement("option");return e.value=t.value,e.textContent=t.name,e}draw(){var l,h;const t=document.createElement("div");t.classList.add("select-container");const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.props.icon||""),s=this.createLabel(this.props.title||""),n=document.createElement("select");return this.selectNode=n,n.classList.add("select"),n.onchange=d=>{var r;(r=this.onChange)==null||r.call(this,d.target.value)},[...this.props.options||[],...((h=(l=this.props).getOptions)==null?void 0:h.call(l))||[]].forEach(d=>{const r=this.createOption(d);n.appendChild(r)}),this.value&&(n.value=this.value),e.appendChild(i),e.appendChild(s),t.appendChild(e),t.appendChild(n),t}}exports.ColorSetting=y;exports.MarginSettingGroup=x;exports.NumberSetting=u;exports.OpacitySetting=S;exports.SelectSetting=T;exports.Setting=g;exports.SettingGroup=f;exports.StringSetting=E;exports.iterateSettings=w;
package/dist/builder-settings-types.css CHANGED
@@ -1 +1 @@
1
- .setting-group{padding:16px;display:flex;flex-direction:column;gap:8px;border-bottom:solid 1px var(--color-border);border-radius:8px;background-color:var(--color-bg)}.setting-group .setting-group{margin-bottom:8px;background-color:var(--color-white)!important;padding:12px;border-bottom:unset;border:1px solid var(--color-border-secondary);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.setting-group-title{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.setting-group-title h3{font-size:14px;font-weight:700;line-height:24px}.setting-group-arrow{display:flex;transition:transform .3s ease-in-out}.setting-group-arrow.rotated{transform:rotate(180deg)}.setting-group-content{display:flex;flex-direction:column;gap:8px;overflow:hidden;max-height:500px;opacity:1;transition:max-height .5s ease-in-out,opacity .4s ease-in-out}.setting-group-content.collapsed{max-height:0;opacity:0}.icon-container{display:flex;align-items:center;gap:4px}.icon-container .input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.icon-container .input-label{color:var(--color-text)}.number-setting-wrapper{display:flex;justify-content:space-between;align-items:center;gap:16px}.number-setting-input{width:120px;padding:8px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg)}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.icon-container{display:flex;align-items:center;gap:.25rem}.color-text{color:var(--color-text)}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:8px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:60%;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px;border:1px solid #ccc;margin-right:6px}.opacity-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.opacity-setting-input{width:120px;padding:8px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg)}.custom-select-container{display:flex;flex-direction:column;gap:4px;max-width:200px}.custom-select-title{font-size:14px;font-weight:700;color:#333}.custom-select-icon{display:flex;align-items:center}.custom-select{padding:8px;font-size:14px;border:1px solid #ccc;border-radius:4px;cursor:pointer}.custom-select:focus{border-color:#007bff;outline:none}
1
+ .setting-group{padding:16px;display:flex;flex-direction:column;gap:8px;border-bottom:solid 1px var(--color-border);border-radius:8px;background-color:var(--color-bg)}.setting-group .setting-group{margin-bottom:8px;background-color:var(--color-white)!important;padding:12px;border-bottom:unset;border:1px solid var(--color-border-secondary);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.setting-group-title{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.setting-group-title h3{font-size:14px;font-weight:700;line-height:24px}.setting-group-arrow{display:flex;transition:transform .3s ease-in-out}.setting-group-arrow.rotated{transform:rotate(180deg)}.setting-group-content{display:flex;flex-direction:column;gap:8px;overflow:hidden;max-height:500px;opacity:1;transition:max-height .5s ease-in-out,opacity .4s ease-in-out}.setting-group-content.collapsed{max-height:0;opacity:0}.icon-container{display:flex;align-items:center;gap:4px}.icon-container .input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.icon-container .input-label{color:var(--color-text)}.input-container{display:inline-flex;align-items:center;position:relative}.with-suffix{flex:1;padding-right:36px}.input-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;font-size:.9em}.number-setting-wrapper{display:flex;justify-content:space-between;align-items:center}.number-setting-wrapper input{width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.color-setting-wrapper .color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:8px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-setting-wrapper .color-input-wrapper .color-text-input{border:none;outline:none;width:100%;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-setting-wrapper .color-input-wrapper .color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-setting-wrapper .color-input-wrapper .color-preview{width:100%;height:25px;border-radius:4px}.select-container{display:flex;align-items:center;gap:4px;justify-content:space-between}.select{width:120px;padding:8px;font-size:14px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer}.select:focus{outline:none}
package/dist/builder-settings-types.es.js CHANGED
@@ -1,14 +1,14 @@
1
- function g(l, t) {
2
- for (const e in l)
3
- if (l.hasOwnProperty(e)) {
4
- const s = l[e];
5
- t(e, s);
1
+ function w(o, t) {
2
+ for (const e in o)
3
+ if (o.hasOwnProperty(e)) {
4
+ const i = o[e];
5
+ t(e, i);
6
6
  }
7
7
  }
8
- class C {
8
+ class f {
9
9
  setOnChange(t) {
10
- this.onChange = t, g(this.settings, (e, s) => {
11
- s.setOnChange(t);
10
+ this.onChange = t, w(this.settings, (e, i) => {
11
+ i.setOnChange(t);
12
12
  });
13
13
  }
14
14
  constructor(t) {
@@ -19,27 +19,27 @@ class C {
19
19
  t.className = "setting-group";
20
20
  const e = document.createElement("div");
21
21
  e.className = "setting-group-title";
22
- const s = document.createElement("h3");
23
- s.textContent = this.title;
24
- const n = document.createElement("span");
25
- n.className = "setting-group-arrow", n.innerHTML = `
22
+ const i = document.createElement("h3");
23
+ i.textContent = this.title;
24
+ const s = document.createElement("span");
25
+ s.className = "setting-group-arrow", s.innerHTML = `
26
26
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
27
27
  <path d="M5 7.5L10 12.5L15 7.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
28
28
  </svg>
29
29
  `;
30
- const i = document.createElement("div");
31
- i.className = "setting-group-content";
30
+ const n = document.createElement("div");
31
+ n.className = "setting-group-content";
32
32
  for (const a in this.settings) {
33
33
  const u = this.settings[a].draw();
34
- i.appendChild(u);
34
+ n.appendChild(u);
35
35
  }
36
36
  return e.onclick = () => {
37
- i.classList.toggle("collapsed"), n.classList.toggle("rotated");
38
- }, e.appendChild(s), e.appendChild(n), t.appendChild(e), t.appendChild(i), t;
37
+ n.classList.toggle("collapsed"), s.classList.toggle("rotated");
38
+ }, e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(n), t;
39
39
  }
40
40
  }
41
- function v(l) {
42
- switch (l) {
41
+ function N(o) {
42
+ switch (o) {
43
43
  case "number":
44
44
  return 0;
45
45
  case "text":
@@ -52,56 +52,59 @@ function v(l) {
52
52
  return (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
53
53
  }
54
54
  }
55
- class m {
55
+ class C {
56
56
  constructor(t = {}) {
57
- this.props = t, this.value = this.props.default, this.title = t.title || "", this.value = t.default;
57
+ this.props = t, this.value = this.props.default, this.title = t.title || "";
58
58
  }
59
59
  setOnChange(t) {
60
60
  this.onChange = t;
61
61
  }
62
+ setValue(t) {
63
+ this.value = t, this.inputEl && (this.inputEl.value = String(t)), this.onChange && this.onChange(t);
64
+ }
62
65
  createInput(t) {
63
66
  t = { ...this.props.inputProps, ...t };
64
67
  const e = document.createElement("div");
65
68
  if (e.className = t.wrapperClassName || "", t.title || t.icon) {
66
- const i = document.createElement("div");
67
- if (i.className = "icon-container", t.icon) {
69
+ const n = document.createElement("div");
70
+ if (n.className = "icon-container", t.icon) {
68
71
  let a = this.createIcon(t.icon, t.iconClassName);
69
- i.appendChild(a);
72
+ n.appendChild(a);
70
73
  }
71
74
  if (t.title) {
72
75
  const a = this.createLabel(t.title, t.labelClassName);
73
- i.appendChild(a);
76
+ n.appendChild(a);
74
77
  }
75
- e.appendChild(i);
78
+ e.appendChild(n);
76
79
  }
77
- const s = document.createElement("div");
78
- s.className = t.inputClassName || "";
79
- const n = document.createElement("input");
80
- return n.value = t.value || v(t.inputType), n.type = t.inputType, n.oninput = (i) => {
81
- const a = i.target;
82
- let c = a.value;
83
- t.inputType === "number" ? c = Number(a.value) : (t.inputType === "color" || t.inputType === "date") && (c = a.value), this.value = c, this.onChange && this.onChange(this.value);
84
- }, t.inputCustomizer && t.inputCustomizer(n), s.appendChild(n), e.appendChild(s), e;
80
+ const i = document.createElement("div");
81
+ i.className = t.wrapperClassName || "";
82
+ const s = document.createElement("input");
83
+ return this.inputEl = s, s.value = t.value || N(t.inputType), s.type = t.inputType, s.className = t.inputClassName || "", s.oninput = (n) => {
84
+ const a = n.target;
85
+ let l = a.value;
86
+ t.inputType === "number" ? l = Number(a.value) : (t.inputType === "color" || t.inputType === "date") && (l = a.value), this.value = l, this.onChange && this.onChange(this.value);
87
+ }, t.inputCustomizer && t.inputCustomizer(s), i.appendChild(s), e.appendChild(i), e;
85
88
  }
86
89
  createLabel(t, e) {
87
- const s = document.createElement("span");
88
- return s.textContent = t, s.className = "input-label " + (e || ""), s;
90
+ const i = document.createElement("span");
91
+ return i.textContent = t, i.className = "input-label " + (e || ""), i;
89
92
  }
90
93
  createIcon(t, e) {
91
- const s = document.createElement("span");
92
- return s.className = "input-icon " + (e || ""), s.innerHTML = t, s;
94
+ const i = document.createElement("span");
95
+ return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
93
96
  }
94
97
  }
95
- class h extends m {
98
+ class d extends C {
96
99
  constructor(t = {}) {
97
100
  super(t), this.inputType = "number";
98
101
  }
99
102
  draw() {
100
103
  const t = (e) => {
101
104
  this.props.minValue !== void 0 && (e.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (e.max = String(this.props.maxValue)), this.props.className && e.classList.add(this.props.className), e.addEventListener("input", () => {
102
- const s = this.props.minValue ?? Number.MIN_SAFE_INTEGER, n = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
103
- let i = Number(e.value);
104
- i < s && (i = s), i > n && (i = n), e.value = String(i);
105
+ const i = this.props.minValue ?? Number.MIN_SAFE_INTEGER, s = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
106
+ let n = Number(e.value);
107
+ n < i && (n = i), n > s && (n = s), e.value = String(n);
105
108
  });
106
109
  };
107
110
  return this.createInput({
@@ -115,16 +118,16 @@ class h extends m {
115
118
  });
116
119
  }
117
120
  }
118
- class N extends C {
121
+ class E extends f {
119
122
  constructor() {
120
123
  super({
121
124
  title: "Margin",
122
125
  settings: {
123
- margin: new h({ title: "Margin All" }),
124
- marginTop: new h({ title: "Margin Top" }),
125
- marginRight: new h({ title: "Margin Right" }),
126
- marginBottom: new h({ title: "Margin Bottom" }),
127
- marginLeft: new h({ title: "Margin Left" })
126
+ margin: new d({ title: "Margin All" }),
127
+ marginTop: new d({ title: "Margin Top" }),
128
+ marginRight: new d({ title: "Margin Right" }),
129
+ marginBottom: new d({ title: "Margin Bottom" }),
130
+ marginLeft: new d({ title: "Margin Left" })
128
131
  }
129
132
  });
130
133
  }
@@ -137,7 +140,7 @@ class N extends C {
137
140
  `;
138
141
  }
139
142
  }
140
- class f extends m {
143
+ class y extends C {
141
144
  constructor(t) {
142
145
  super(t), this.inputType = "color", this.icon = "<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";
143
146
  }
@@ -147,48 +150,49 @@ class f extends m {
147
150
  t.className = "color-setting-wrapper";
148
151
  const e = document.createElement("div");
149
152
  e.className = "icon-container";
150
- const s = this.createIcon(this.icon), n = this.createLabel("Color");
151
- n.className = "color-text", e.appendChild(s), e.appendChild(n);
152
- const i = document.createElement("div");
153
- i.className = "color-input-wrapper";
154
- let a, c;
153
+ const i = this.createIcon(this.icon), s = this.createLabel("Color");
154
+ e.appendChild(i), e.appendChild(s);
155
+ const n = document.createElement("div");
156
+ n.className = "color-input-wrapper";
157
+ let a, l;
158
+ const u = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, h = (p) => u.test(p.value) ? (p.style.border = "", !0) : (p.style.border = "1px solid red", !1);
155
159
  a = this.createInput({
156
160
  value: this.value,
157
161
  inputType: "text",
158
162
  inputClassName: "color-text-input",
159
- // icon: this.icon,
160
163
  inputCustomizer: (p) => {
161
- p.oninput = (r) => {
162
- var d;
163
- let o = r.target.value;
164
- this.value = o, (d = this.onChange) == null || d.call(this, o), u.style.backgroundColor = o;
164
+ p.oninput = (v) => {
165
+ var m;
166
+ let c = v.target.value.trim();
167
+ if (!h(p)) return;
168
+ this.value = c, (m = this.onChange) == null || m.call(this, c);
169
+ const g = document.getElementsByClassName(
170
+ "color-picker"
171
+ )[0];
172
+ g.value = c, r.style.backgroundColor = c;
165
173
  };
166
174
  }
167
- }), c = this.createInput({
175
+ }), l = this.createInput({
168
176
  value: this.value,
169
177
  inputType: this.inputType,
170
178
  inputClassName: "color-picker",
171
179
  inputCustomizer: (p) => {
172
- p.oninput = (r) => {
173
- var d;
174
- let o = r.target.value;
175
- this.value = o, (d = this.onChange) == null || d.call(this, o), u.style.backgroundColor = o;
180
+ p.oninput = (v) => {
181
+ var m;
182
+ let c = v.target.value;
183
+ this.value = c, (m = this.onChange) == null || m.call(this, c);
184
+ const g = document.getElementsByClassName(
185
+ "color-text-input"
186
+ )[0];
187
+ g.value = c, r.style.backgroundColor = c, h(g);
176
188
  };
177
189
  }
178
190
  });
179
- const u = document.createElement("div");
180
- return u.className = "color-preview", u.style.backgroundColor = this.value || "", c.oninput = (p) => {
181
- var o;
182
- let r = p.target.value;
183
- this.value = r, (o = this.onChange) == null || o.call(this, r), u.style.backgroundColor = r;
184
- }, a.oninput = (p) => {
185
- var o;
186
- let r = p.target.value;
187
- this.value = r, (o = this.onChange) == null || o.call(this, r), u.style.backgroundColor = r;
188
- }, i.appendChild(u), i.appendChild(a), i.appendChild(c), t.appendChild(e), t.appendChild(i), t;
191
+ const r = document.createElement("div");
192
+ return r.className = "color-preview", r.style.backgroundColor = this.value || "", n.appendChild(r), n.appendChild(l), n.appendChild(a), t.appendChild(e), t.appendChild(n), t;
189
193
  }
190
194
  }
191
- class x extends m {
195
+ class b extends C {
192
196
  constructor(t = {}) {
193
197
  super(t), this.inputType = "text";
194
198
  }
@@ -199,59 +203,65 @@ class x extends m {
199
203
  });
200
204
  }
201
205
  }
202
- class E extends h {
206
+ class T extends d {
203
207
  constructor(t) {
204
208
  super({
205
209
  ...t,
206
210
  minValue: 0,
207
211
  maxValue: 100,
208
- icon: w,
209
- title: t.title || "Opacity",
210
- inputClassName: "number-setting-input",
211
- wrapperClassName: "opacity-setting-wrapper"
212
+ icon: x,
213
+ title: t.title || "Opacity"
212
214
  }), this.inputType = "number";
213
215
  }
214
216
  }
215
- const w = `
217
+ const x = `
216
218
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
217
219
  <path d="M3.69749 15.365C3.54749 15.365 3.40502 15.305 3.30002 15.2C1.77752 13.6775 0.9375 11.6525 0.9375 9.5C0.9375 5.0525 4.5525 1.4375 9 1.4375C11.1525 1.4375 13.1775 2.2775 14.7 3.8C14.805 3.905 14.865 4.0475 14.865 4.1975C14.865 4.3475 14.805 4.49 14.7 4.595L4.09502 15.2C3.99002 15.305 3.84749 15.365 3.69749 15.365ZM9 2.5625C5.175 2.5625 2.0625 5.675 2.0625 9.5C2.0625 11.165 2.64751 12.74 3.71251 13.9925L13.4925 4.2125C12.24 3.1475 10.665 2.5625 9 2.5625Z" fill="#667085"/>
218
220
  <path d="M9.00026 17.5623C6.84776 17.5623 4.82278 16.7223 3.30028 15.1998C3.19528 15.0948 3.13525 14.9523 3.13525 14.8023C3.13525 14.6523 3.19528 14.5098 3.30028 14.4048L13.9052 3.79984C14.1227 3.58234 14.4827 3.58234 14.7002 3.79984C16.2227 5.32234 17.0628 7.34734 17.0628 9.49984C17.0628 13.9473 13.4478 17.5623 9.00026 17.5623ZM4.50777 14.7873C5.76027 15.8523 7.33526 16.4373 9.00026 16.4373C12.8253 16.4373 15.9378 13.3248 15.9378 9.49984C15.9378 7.83484 15.3527 6.25984 14.2878 5.00734L4.50777 14.7873Z" fill="#667085"/>
219
221
  </svg>
220
222
  `;
221
- class y extends m {
223
+ class L extends C {
222
224
  constructor(t = {}) {
223
- super(t), this.inputType = "select";
225
+ super(t), this.inputType = "select", this.props.options || (this.props.options = []), this.props.getOptionsAsync && this.props.getOptionsAsync().then((e) => {
226
+ this.props.options = [...this.props.options, ...e], e.forEach((i) => {
227
+ var s;
228
+ (s = this.selectNode) == null || s.appendChild(this.createOption(i));
229
+ });
230
+ }).catch((e) => {
231
+ console.error("Failed to fetch async options:", e);
232
+ });
233
+ }
234
+ createOption(t) {
235
+ const e = document.createElement("option");
236
+ return e.value = t.value, e.textContent = t.name, e;
224
237
  }
225
238
  draw() {
239
+ var l, u;
226
240
  const t = document.createElement("div");
227
- if (t.classList.add("custom-select-container"), this.props.title) {
228
- const n = document.createElement("label");
229
- n.textContent = this.props.title, n.classList.add("custom-select-title"), t.appendChild(n);
230
- }
231
- if (this.props.icon) {
232
- const n = document.createElement("span");
233
- n.innerHTML = this.props.icon, n.classList.add("custom-select-icon"), t.appendChild(n);
234
- }
235
- const e = document.createElement("select");
236
- e.classList.add("custom-select"), e.onchange = (n) => {
237
- var i;
238
- (i = this.onChange) == null || i.call(this, n.target.value);
239
- };
240
- let s = [];
241
- return this.props.getOptions && (s = this.props.getOptions()), this.props.options && s.push(...this.props.options), s.forEach(({ value: n, name: i }) => {
242
- const a = document.createElement("option");
243
- a.value = n, a.textContent = i, e.appendChild(a);
244
- }), this.props.value && (e.value = this.props.value), t.appendChild(e), t;
241
+ t.classList.add("select-container");
242
+ const e = document.createElement("div");
243
+ e.className = "icon-container";
244
+ const i = this.createIcon(this.props.icon || ""), s = this.createLabel(this.props.title || ""), n = document.createElement("select");
245
+ return this.selectNode = n, n.classList.add("select"), n.onchange = (h) => {
246
+ var r;
247
+ (r = this.onChange) == null || r.call(this, h.target.value);
248
+ }, [
249
+ ...this.props.options || [],
250
+ ...((u = (l = this.props).getOptions) == null ? void 0 : u.call(l)) || []
251
+ ].forEach((h) => {
252
+ const r = this.createOption(h);
253
+ n.appendChild(r);
254
+ }), this.value && (n.value = this.value), e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(n), t;
245
255
  }
246
256
  }
247
257
  export {
248
- f as ColorSetting,
249
- N as MarginSettingGroup,
250
- h as NumberSetting,
251
- E as OpacitySetting,
252
- y as SelectSetting,
253
- m as Setting,
254
- C as SettingGroup,
255
- x as StringSetting,
256
- g as iterateSettings
258
+ y as ColorSetting,
259
+ E as MarginSettingGroup,
260
+ d as NumberSetting,
261
+ T as OpacitySetting,
262
+ L as SelectSetting,
263
+ C as Setting,
264
+ f as SettingGroup,
265
+ b as StringSetting,
266
+ w as iterateSettings
257
267
  };
package/dist/colors.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
- </svg>
1
+ <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
package/dist/index.d.ts CHANGED
@@ -70,11 +70,15 @@ declare type Primitive = string | number | boolean | symbol | bigint | null | un
70
70
  export declare class SelectSetting extends Setting<string, SelectSettingProps> {
71
71
  inputType: InputTypes;
72
72
  constructor(props?: SelectSettingProps);
73
+ createOption(o: {
74
+ value: string;
75
+ name: string;
76
+ }): HTMLOptionElement;
77
+ selectNode: HTMLSelectElement | undefined;
73
78
  draw(): HTMLElement;
74
79
  }
75
80
 
76
81
  export declare interface SelectSettingProps extends SettingProps<string> {
77
- value?: string;
78
82
  options?: {
79
83
  value: string;
80
84
  name: string;
@@ -83,16 +87,22 @@ export declare interface SelectSettingProps extends SettingProps<string> {
83
87
  value: string;
84
88
  name: string;
85
89
  }[];
90
+ getOptionsAsync?: () => Promise<{
91
+ value: string;
92
+ name: string;
93
+ }[]>;
86
94
  }
87
95
 
88
96
  export declare abstract class Setting<T, P extends SettingProps<T>> implements IDrawable, IChangable<T> {
89
97
  protected props: P;
98
+ protected inputEl?: HTMLInputElement;
90
99
  value: T | undefined;
91
100
  title: string | undefined;
92
101
  abstract inputType: T extends Primitive ? InputTypes : Record<keyof T, InputTypes>;
93
102
  onChange: ((value: T) => void) | undefined;
94
103
  constructor(props?: P);
95
104
  setOnChange(onChange: (value: T) => void): void;
105
+ setValue(newValue: T): void;
96
106
  abstract draw(): HTMLElement;
97
107
  createInput(props: InputProps): HTMLElement;
98
108
  createLabel(title: string, className?: string): HTMLSpanElement;
package/dist/margins-bottom.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 2.75H5.6325M5.625 9.5H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
- </svg>
1
+ <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 2.75H5.6325M5.625 9.5H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
package/dist/margins-left.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
- </svg>
1
+ <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
package/dist/margins-right.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
- </svg>
1
+ <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
package/dist/margins-top.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M2.25 16.25H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 16.25H5.6325M5.625 9.5H5.6325M12.375 16.25H12.3825M12.375 9.5H12.3825M9 16.25H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 16.25H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 2.75H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
- </svg>
1
+ <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M2.25 16.25H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 16.25H5.6325M5.625 9.5H5.6325M12.375 16.25H12.3825M12.375 9.5H12.3825M9 16.25H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 16.25H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 2.75H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
package/dist/radius.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M5.625 9.5H5.6325M12.375 9.5H12.3825M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 6.35L2.25 12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75L5.85 2.75C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
- </svg>
1
+ <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M5.625 9.5H5.6325M12.375 9.5H12.3825M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 6.35L2.25 12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75L5.85 2.75C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
package/dist/spacing-height.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
- </svg>
1
+ <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
package/dist/spacing-width.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
- </svg>
1
+ <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "builder-settings-types",
3
3
  "description": "builder settings",
4
- "version": "0.0.35",
4
+ "version": "0.0.40",
5
5
  "type": "module",
6
6
  "main": "dist/builder-settings-types.cjs.js",
7
7
  "module": "dist/builder-settings-types.es.js",