builder-settings-types 0.0.77 → 0.0.79

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 +56 -48
  12. package/dist/builder-settings-types.es.js +509 -317
  13. package/dist/colors.svg +3 -3
  14. package/dist/index.css +1 -1
  15. package/dist/index.d.ts +35 -34
  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 +36 -36
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.css CHANGED
@@ -1 +1 @@
1
- @import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";@import"https://fonts.cdnfonts.com/css/satoshi";.setting-group{padding:16px 8px;display:flex;flex-direction:column;max-width:268px;gap:8px;border:1px solid #D0D5DD;border-radius:8px;background:#f8f8f8;width:100%;margin:auto;-webkit-user-select:none;user-select:none;box-shadow:0 1px 2px #1018280d}.setting-group .setting-group{width:100%;padding:8px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;border:0;border-radius:8px;background-color:var(--color-white);box-shadow:0 1px 2px #1018280d}.setting-group .setting-group .setting-group-content .setting-group{border:1px solid #D0D5DD}.setting-group .setting-group:nth-child(1){border-bottom:solid 1px var(--color-border)}.setting-group-title{display:flex;justify-content:space-between;align-items:center;align-self:stretch}.setting-group-title h3{color:#344054;font-family:Satoshi,sans-serif;font-size:14px;font-weight:700;line-height:20px}.setting-group-arrow{transform:rotate(180deg);display:flex;cursor:pointer;transition:transform .3s ease-in-out}.setting-group-arrow.rotated{transform:rotate(0)}.setting-group-content.collapsed{max-height:0;display:none}.setting-group-content{display:flex;padding:4px;flex-direction:column;align-items:flex-start;gap:8px;align-self:stretch;border-radius:8px;position:relative;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.main-content{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:8px;align-self:stretch;border-radius:8px;background:#f8f8f8;border:0;box-shadow:none;padding:0}.main-group{border:0;border-bottom:1px solid #D0D5DD}.icon-container{display:flex;align-items:center;gap:4px}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.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}.string-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.string-setting-input{max-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:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;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}.number-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center;position:relative}.number-setting-input{width:120px;padding:8px;font-size:14px;border-radius:8px;color:#292b2e;border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-label{position:absolute;right:8px;padding-left:8px;border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.select-container{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center;position:relative}.select-button{width:120px;height:33px;display:flex;padding:8px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer;font-size:13px;font-weight:400;color:#292b2e;position:relative;text-align:center}.select-options{display:none;position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;margin:4px 0 0;list-style-type:none;background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;z-index:10;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid rgba(208,213,221,1);background:#fff;padding:4px 0;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.select-options.open{display:flex;padding:4px}.select-option{padding:12px;width:100%;display:flex;align-items:center;cursor:pointer;color:#292b2e;border-radius:8px}.select-option:hover{background:#eaecf0}.svg-container{position:absolute;right:8px;top:50%;transform:translateY(-7px) rotate(0);transition:transform .3s ease-out;cursor:pointer}.svg-container .svg-select{stroke:#000;transition:transform .3s ease-out;width:16px;height:16px}.svg-container.open .svg-select{transform:rotate(180deg)}.select-options::-webkit-scrollbar{width:10px}.select-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-options::-webkit-scrollbar-thumb{background:#eaecf0;border-radius:8px;border:2px solid transparent;background-clip:content-box}.select-options::-webkit-scrollbar-thumb:hover{background:#555}.align-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.button-setting{padding:8px 16px;background-color:var(--button-bg, #007bff);color:var(--button-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:14px}.button-setting:hover{background-color:var(--button-bg-hover, #0056b3)}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{width:24px;height:24px;background:none;cursor:pointer;display:inline-flex;align-items:center;color:#667085;z-index:1}.dimension-lock-icon:hover{color:#000}.upload-setting-wrapper{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:10px;align-items:center;width:100%}.icon-title-container{grid-column:1 / 2;grid-row:1 / 2}.preview-wrapper,.upload-button{grid-row:2 / 3;display:inline-flex;align-items:center;gap:10px}.preview-wrapper{position:relative;width:91px;height:71px;border-radius:4px;overflow:hidden;background-color:#f2f4f7;display:none}.preview-wrapper.has-image{display:block}.upload-preview{width:100%;height:100%;object-fit:cover;border-radius:4px;display:none;object-fit:contain;padding:3px}.empty-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.empty-state svg{width:100%;height:100%}.preview-wrapper.has-image .upload-preview{display:block}.preview-wrapper.has-image .empty-state{display:none}.upload-button{display:inline-flex;align-items:center;padding:5px 4px;background-color:var(--color-white);border:1px solid var(--color-border-secondary);border-radius:12px;cursor:pointer;max-height:40px;transition:transform .15s ease,box-shadow .15s ease}.preview-wrapper:not(.has-image)~.upload-button{width:100%;justify-content:center}.upload-icon{padding:7px 8px 8px 7px;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-icon);border-radius:28px}.upload-label{display:inline-block;font-size:12px;font-weight:600;color:var(--color-btn-text);transition:transform .15s ease}.upload-button:hover{transform:scale(1.02);box-shadow:0 2px 6px #0000001a}.delete-button{display:flex;width:28px;height:28px;padding:6px;justify-content:center;align-items:center;gap:8px;position:absolute;left:60px;top:3px;background:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:background-color .2s ease}.delete-button svg{width:16px;height:16px;flex-shrink:0}.delete-button:hover{background-color:#f3f4f6}.preview-wrapper:not(.has-image) .delete-button{display:none}.height-setting{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.height-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.height-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.height-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.width-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.width-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.width-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting .number-setting{width:100%}.select-api-container{display:grid;grid-template-columns:1fr;place-content:center;align-items:center;position:relative;width:100%}.select-api-button{width:100%;height:48px;display:flex;align-items:end;padding:8px;border-radius:8px;border:1px solid var(--color-border);background:#fff;cursor:pointer;font-size:13px;font-weight:400;color:#292b2e;position:relative;text-align:center;font-weight:700}.select-api-options{display:none;position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;margin:4px 0 0;list-style-type:none;background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;z-index:10;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid rgba(208,213,221,1);background:#fff;padding:4px 0;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.select-api-options.open{display:flex;padding:4px}.select-api-option{padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#292b2e;border-radius:8px}.select-api-option:hover{background:#eaecf0}.svg-container{position:absolute;right:8px;top:45%;transform:translateY(-7px) rotate(0);transition:transform .3s ease-out;cursor:pointer}.svg-container .svg-select-api{stroke:#000;transition:transform .3s ease-out;width:20px;height:20px}.svg-container.open .svg-select-api{transform:rotate(180deg)}.select-api-options::-webkit-scrollbar{width:10px}.select-api-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-api-options::-webkit-scrollbar-thumb{background:#eaecf0;border-radius:8px;border:2px solid transparent;background-clip:content-box}.select-api-options::-webkit-scrollbar-thumb:hover{background:#555}.select-api-radio{width:16px;height:16px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-bg)}.select-api-container .icon-container .input-label{position:absolute;top:18%;font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:normal;transform:translate(13%);color:#667085;z-index:10}.tab-delete-button{background:transparent;border:none;cursor:pointer;padding:2px 4px}.tab-delete-button svg{width:16px;height:16px}.tabs-add-btn-container{display:flex;justify-content:flex-end}.tabs-add-button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;color:#667085;transition:transform .15s ease,box-shadow .3s ease}.tabs-add-button:hover{transform:scale(1);box-shadow:0 2px 6px #0000001a}.add-icon{display:flex;align-items:center;width:18px}.add-label{display:inline-block}.bgset-or-label{margin:8px 0;text-align:center;font-weight:500;color:#667085;align-self:center}:root{--color-border: #D5DCE5;--color-bg: #F8F8F8;--color-border-secondary: #eaecf0;--color-text: #667085;--color-title: #344054;--color-input-text: #292b2e;--color-white: #fff;--color-black: #000;--color-divider: #dcdcdc;--color-btn-text: #4b4b4b;--color-bg-icon: #f2f4f7}*{padding:0;margin:0;border:none}*,*:before,*:after{box-sizing:border-box}a,a:link,a:visited,a:hover{text-decoration:none}body{font-family:Satoshi,sans-serif;font-weight:400;font-size:12px;line-height:18px}aside,nav,footer,header,section,main{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background-color:transparent;background:none;cursor:pointer}input:focus,input:active,button:focus,button:active{outline:none}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}legend{display:block}
1
+ @import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";@import"https://fonts.cdnfonts.com/css/satoshi";.setting-group{padding:16px;display:flex;flex-direction:column;width:100%;gap:12px;border:1px solid var(--Gray-200, #eaecf0);border-radius:8px;background:#fff;margin:0 auto;-webkit-user-select:none;user-select:none;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f;transition:all .2s ease-in-out}.setting-group.collapsed{padding:0;border:none;background:transparent;box-shadow:none}.setting-group .setting-group{width:100%;padding:8px;border:1px solid #d0d5dd;border-radius:8px;background-color:#fff;box-shadow:none;margin:0}.setting-group .setting-group.collapsed{padding:0;border:none;background:transparent;margin:0}.setting-group .setting-group .setting-group-content.collapsed{padding:0}.setting-group .setting-group .setting-group{border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;border:1px solid #eaecf0}.setting-group .setting-group .setting-group.collapsed{padding:0;border:none;background:transparent;margin:0;box-shadow:none}.setting-group .setting-group.collapsed{padding-bottom:0}.setting-group .setting-group .setting-group-content{padding:0}.setting-group-title{display:flex;justify-content:space-between;align-items:center;padding:4px 0;cursor:pointer;border-radius:6px;transition:none}.setting-group-title:hover,.setting-group-title:hover .setting-group-arrow{background-color:transparent}.setting-group-title h3{color:var(--Gray-800, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);color:var(--Gray-500, #667085)}.setting-group-arrow.rotated{transform:rotate(180deg)}.setting-group-content{display:flex;flex-direction:column;width:100%;gap:12px;transition:max-height .3s ease,opacity .3s ease;max-height:2000px;opacity:1;padding:0 16px 16px}.setting-group-content.collapsed{max-height:0;opacity:0;margin:0;padding:0;pointer-events:none}.setting-group.main-group{padding:16px;border:none;border-bottom:1px solid var(--Border-default, #d5dce5);box-shadow:none;margin-bottom:4px;margin-top:4px;background:#f8f8f8;border-radius:8px}.setting-group.main-group.collapsed{padding:0;background:transparent!important;border:none;box-shadow:none;margin:0}.setting-group.main-group.collapsed .setting-group-title.collapsed-view{height:55px;background:#f8f8f8;border:none;border-bottom:1px solid var(--Border-default, #d5dce5)}.setting-group.main-group .setting-group-title h3{font-weight:600;font-size:16px;color:#101828}.setting-group-content.main-content{width:100%;background:#f8f8f8;border:0;box-shadow:none;padding:0}.setting-divider{height:1px;width:100%;background-color:#f2f4f7;margin:4px 0}.setting-group-content>*{margin-bottom:8px}.setting-group-content>*:last-child{margin-bottom:0}.setting-group.active{border-color:#d6bbfb;box-shadow:0 0 0 4px #7f56d91a}.setting-group-empty{color:#667085;font-size:13px;font-style:italic;padding:12px 0;text-align:center}.setting-group-title.collapsed-view{display:flex;justify-content:space-between;align-items:center;padding:0 16px;height:36px;border-radius:8px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Base-White, #fff);margin-bottom:0;position:relative;overflow:hidden;cursor:pointer}.setting-group-title.collapsed-view:hover{border-color:var(--Gray-200, #eaecf0);box-shadow:none;background:#fff;transform:none}.setting-group.main-group .setting-group-title.collapsed-view{height:55px;background:#f8f8f8;border:none;border-bottom:1px solid var(--Border-default, #d5dce5)}.setting-group:not(.main-group) .setting-group-title.collapsed-view{height:36px;background:#fff;border:1px solid var(--Gray-200, #eaecf0)}.setting-group-title .title-section{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.setting-group-title .group-icon{display:flex;justify-content:center;align-items:center;color:var(--Gray-500, #667085);flex-shrink:0;width:20px;height:20px}.setting-group-title.collapsed-view h3{color:var(--Gray-800, #1d2939);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting-group-title.collapsed-view .group-badge{display:flex;padding:2px 8px;justify-content:center;align-items:center;border-radius:16px;background:var(--Gray-100, #f2f4f7);color:var(--Gray-700, #344054);font-size:12px;font-weight:500;line-height:18px;margin-left:8px}.setting-group-title .actions-section{display:flex;align-items:center;gap:8px;margin-left:12px}.setting-group-title.collapsed-view .setting-group-arrow{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background-color .2s ease;color:var(--Gray-500, #667085)}.setting-group-title.collapsed-view:hover .setting-group-arrow{background-color:transparent;color:var(--Gray-500, #667085)}.setting-group-title .setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);color:var(--Gray-500, #667085)}.setting-group-title:hover .setting-group-arrow{background-color:var(--Gray-100, #f2f4f7)}.setting-group-title .setting-group-arrow.rotated{transform:rotate(180deg)}.setting-group-title.collapsed-view .info-marker{width:16px;height:16px;color:var(--Gray-400, #98a2b3);cursor:help;transition:color .2s ease}.setting-group-title.collapsed-view .info-marker:hover{color:var(--Gray-500, #667085)}.setting-group-description{color:#667085;font-size:13px;margin-bottom:8px}@media (max-width: 768px){.setting-group-title.collapsed-view{padding:10px 12px}.setting-group-title .title-section{gap:8px}.setting-group-title.collapsed-view .group-badge{display:none}}@media (max-width: 480px){.setting-group-title.collapsed-view h3{font-size:13px}.setting-group-title.collapsed-view .setting-group-arrow{width:24px;height:24px}.setting-group-title.collapsed-view{padding:0 10px}}.setting-group-title.collapsed-view.striped:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--Primary-100, #f4ebff)}.icon-container{display:flex;align-items:center;gap:4px}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.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}.string-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.string-setting-input{max-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:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;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}.number-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center;position:relative}.number-setting-input{width:120px;padding:8px;font-size:14px;border-radius:8px;color:#292b2e;border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-label{position:absolute;right:8px;padding-left:8px;border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.select-container{display:flex;justify-content:space-between;align-items:center;column-gap:12px;position:relative;width:100%}.select-container .icon-container{display:flex;align-items:center;margin-bottom:0}.select-container .icon-container .input-label{color:#667085;font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.select-button{place-self:end;max-width:120px;width:100%;height:33px;min-height:33px;display:flex;align-items:center;justify-content:flex-start;padding:0 40px 0 16px;border-radius:8px;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);cursor:pointer;font-size:14px;font-weight:400;color:#101828;position:relative;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.select-button:focus{outline:none;border-color:#7f56d9;box-shadow:0 0 0 4px #7f56d91a}.select-button.has-label{padding-top:0;height:33px}.select-button .select-label{position:absolute;top:8px;left:16px;color:#667085;font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:18px;pointer-events:none}.select-button .select-value{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-button.loading{position:relative;color:#6e7891;background-color:#f9fafb;pointer-events:none;padding-left:36px!important}.select-button.loading:before{content:"";position:absolute;left:10px;top:25%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid #7f56d9;border-radius:50%;animation:select-spin 1s linear infinite;z-index:2}@keyframes select-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.select-button.error{border-color:#f04438;color:#f04438;background-color:#fff4f4}.select-options{display:none;position:absolute;top:calc(100% + 2px);left:0;right:0;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style-type:none;z-index:100;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid #e4e7ec;background:#fff;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;transition:opacity .2s ease,transform .2s ease;opacity:0;transform:translateY(-8px)}.select-options.open{display:flex;opacity:1;transform:translateY(0);animation:select-fade-in .2s ease forwards}@keyframes select-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.select-option{padding:10px 12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#344054;border-radius:6px;transition:background-color .15s ease;font-size:14px}.select-option:hover{background:#f9fafb}.select-option.selected{background:#f4ebff;color:#6941c6;font-weight:400}.svg-container{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;pointer-events:none;z-index:1}.svg-container .svg-select{stroke:#667085;transition:transform .3s ease;width:16px;height:16px}.svg-container.open .svg-select{transform:rotate(180deg)}.select-options::-webkit-scrollbar{width:6px}.select-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-options::-webkit-scrollbar-thumb{background:#e4e7ec;border-radius:8px}.select-options::-webkit-scrollbar-thumb:hover{background:#d0d5dd}.select-option.empty-message{text-align:center;color:#6e7891;font-style:italic;cursor:default;justify-content:center}.align-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.button-setting{padding:8px 16px;background-color:var(--button-bg, #007bff);color:var(--button-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:14px}.button-setting:hover{background-color:var(--button-bg-hover, #0056b3)}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative;width:100%}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center;z-index:1}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{transform:translate(-.25rem);width:24px;height:24px;background:none;border:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#667085;z-index:1;border-radius:4px;transition:background-color .15s ease,color .15s ease}.dimension-setting-container.aspect-locked .dimension-bracket:before,.dimension-setting-container.aspect-locked .dimension-bracket:after{filter:hue-rotate(210deg) saturate(2)}@media (max-width: 480px){.dimension-bracket{right:100px}}.upload-setting-wrapper{display:grid;grid-template-columns:1fr;gap:8px;width:100%}.icon-title-container{display:flex;align-items:center;gap:8px;margin-bottom:4px}.icon-title-container .input-label{color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500}.preview-button-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch;width:100%;gap:12px;border-radius:12px}.preview-button-container.no-image{justify-content:center}.preview-button-container.no-image .preview-placeholder{display:none}.preview-button-container.no-image .upload-button{width:100%;min-width:140px;flex-grow:1;margin:0 auto}.preview-wrapper{position:relative;width:91px;height:71px;border-radius:4px;overflow:hidden;background-color:#d3d3d3;flex-shrink:0;display:none}.preview-wrapper.has-image{display:block}.upload-preview{width:100%;height:100%;object-fit:cover;border-radius:4px;display:none;background-position:center;background-size:146.165% 100%;background-repeat:no-repeat}.preview-wrapper.has-image .upload-preview{display:block}.empty-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3}.empty-state svg{width:100%;height:100%}.preview-wrapper.has-image .empty-state{display:none}.upload-button{width:100%;height:40px;display:flex;padding:5px 4px;flex-direction:row;align-items:center;gap:4px;border-radius:12px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Base-White, #fff);cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;flex-grow:0;justify-content:center;min-width:90px}.preview-wrapper:not(.has-image)+.upload-button{flex-grow:0}.upload-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.upload-icon{display:flex;align-items:center;justify-content:center}.upload-label{font-size:12px;font-weight:500;color:#344054}.delete-button{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;position:absolute;right:4px;top:4px;background:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:background-color .2s ease;z-index:2}.delete-button svg{width:14px;height:14px;flex-shrink:0}.delete-button:hover{background-color:#f3f4f6}.upload-setting-wrapper.no-label .preview-button-container{grid-row:1}.preview-placeholder{display:flex;justify-content:center;align-items:center;width:91px;height:71px;border-radius:4px;background-color:#f2f4f7;flex-shrink:0}.preview-button-container:not(:has(.preview-wrapper.has-image)) .preview-placeholder{display:flex}.height-setting{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.height-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.height-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.height-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.width-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.width-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.width-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting .number-setting{width:100%}.select-api-container{display:grid;grid-template-columns:1fr;place-content:center;align-items:center;position:relative;width:100%}.select-api-button{width:100%;height:33px;min-height:33px;display:flex;align-items:center;justify-content:flex-start;padding:0 40px 0 16px;border-radius:8px;border:1px solid var(--color-border, #e4e7ec);background:#fff;cursor:pointer;font-size:14px;font-weight:500;color:#101828;position:relative;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:40px!important}.select-api-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.select-api-button:focus{outline:none;border-color:#7f56d9;box-shadow:0 0 0 4px #7f56d91a}.select-api-button .select-label{position:absolute;top:2px;font-size:10px;color:#667085;font-weight:500;pointer-events:none}.select-api-button .select-value{margin-top:6px}.select-api-button.loading{position:relative;color:#6e7891;background-color:#f9fafb;pointer-events:none;padding-left:36px!important}.select-api-button.loading:before{content:"";position:absolute;left:10px;top:25%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid #7f56d9;border-radius:50%;animation:select-api-spin 1s linear infinite;z-index:2}.select-api-button.has-label.loading{padding-left:36px!important}.select-api-button.has-label.loading .select-value{padding-left:0}.select-api-button.has-label.loading:before{top:18px;left:10px}@keyframes select-api-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.select-api-button.error{border-color:#f04438;color:#f04438;background-color:#fff4f4}.select-api-options{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style-type:none;z-index:100;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid #e4e7ec;background:#fff;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;transition:opacity .2s ease,transform .2s ease;opacity:0;transform:translateY(-8px)}.select-api-options.open{display:flex;opacity:1;transform:translateY(0)}.select-api-option{padding:10px 12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#344054;border-radius:6px;transition:background-color .15s ease;font-size:14px}.select-api-option:hover{background:#f9fafb}.select-api-option.selected{background:#f4ebff;color:#6941c6;font-weight:500}.select-api-option.disabled{opacity:.6;cursor:not-allowed;color:#6e7891}.select-api-radio{width:18px;height:18px;border-radius:50%;border:1.5px solid #e4e7ec;background:#fff;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;margin:0;cursor:pointer}.select-api-radio:checked{border-color:#7f56d9;border-width:4px;background:#fff}.svg-container{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;pointer-events:none}.svg-container .svg-select-api{stroke:#667085;transition:transform .3s ease;width:16px;height:16px}.svg-container.open .svg-select-api{transform:rotate(180deg)}.select-api-container .icon-container{display:none}.select-api-options::-webkit-scrollbar{width:6px}.select-api-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-api-options::-webkit-scrollbar-thumb{background:#e4e7ec;border-radius:8px}.select-api-options::-webkit-scrollbar-thumb:hover{background:#d0d5dd}.select-api-option.empty-message{text-align:center;color:#6e7891;font-style:italic;cursor:default;justify-content:center}.select-api-option.empty-message:hover{background:transparent}.select-api-option:focus{outline:none;box-shadow:0 0 0 2px #7f56d9}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.select-api-options.open{display:flex;animation:fadeIn .2s ease forwards}.select-api-button.has-label{height:48px}.tab-delete-button{background:transparent;border:none;cursor:pointer;padding:2px 4px}.tab-delete-button svg{width:16px;height:16px}.tabs-add-btn-container{display:flex;justify-content:flex-end}.tabs-add-button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;color:#667085;transition:transform .15s ease,box-shadow .3s ease}.tabs-add-button:hover{transform:scale(1);box-shadow:0 2px 6px #0000001a}.add-icon{display:flex;align-items:center;width:18px}.add-label{display:inline-block}.bgset-or-label{margin:8px 0;text-align:center;font-weight:500;color:#667085;align-self:center}:root{--color-border: #D5DCE5;--color-bg: #F8F8F8;--color-border-secondary: #eaecf0;--color-text: #667085;--color-title: #344054;--color-input-text: #292b2e;--color-white: #fff;--color-black: #000;--color-divider: #dcdcdc;--color-btn-text: #4b4b4b;--color-bg-icon: #f2f4f7}*{padding:0;margin:0;border:none}*,*:before,*:after{box-sizing:border-box}a,a:link,a:visited,a:hover{text-decoration:none}body{font-family:Satoshi,sans-serif;font-weight:400;font-size:12px;line-height:18px}aside,nav,footer,header,section,main{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background-color:transparent;background:none;cursor:pointer}input:focus,input:active,button:focus,button:active{outline:none}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}legend{display:block}
package/dist/index.d.ts CHANGED
@@ -106,11 +106,6 @@ export declare class ColorSetting extends StringSetting {
106
106
  export declare interface ColorSettingProps extends StringSettingsProps {
107
107
  }
108
108
 
109
- /**
110
- * DimensionSetting is a composite control that manages two NumberSettings,
111
- * one for width and one for height. It ensures that when locked, the aspect ratio
112
- * is preserved. It also prevents infinite update loops via an isUpdating guard.
113
- */
114
109
  export declare class DimensionSetting extends Setting<DimensionValue, DimensionSettingProps> {
115
110
  inputType: {
116
111
  readonly width: "number";
@@ -118,47 +113,34 @@ export declare class DimensionSetting extends Setting<DimensionValue, DimensionS
118
113
  };
119
114
  private widthSetting;
120
115
  private heightSetting;
116
+ private minWidth;
117
+ private maxWidth?;
118
+ private minHeight;
119
+ private maxHeight?;
121
120
  private locked;
122
121
  private aspectRatio;
123
122
  private isUpdating;
124
123
  constructor(props?: DimensionSettingProps);
125
- /**
126
- * Toggles the locked state. When locking, it recalculates the aspect ratio
127
- * based on the current width and height. Updates the lock icon accordingly.
128
- * @param lockIcon The HTMLElement containing the lock icon SVG.
129
- */
124
+ private handleWidthChange;
125
+ private handleHeightChange;
130
126
  private toggleLock;
131
- /**
132
- * Returns the appropriate SVG string for the lock icon based on lock state.
133
- * @param isLocked Whether the dimension is currently locked.
134
- */
135
127
  private getLockSVG;
136
- /**
137
- * Renders the DimensionSetting component.
138
- * It arranges the width and height NumberSettings with a bracket containing a lock icon.
139
- * @returns {HTMLElement} The container element with the complete dimension control.
140
- */
128
+ setValue(newValue: DimensionValue): void;
141
129
  draw(): HTMLElement;
130
+ isLocked(): boolean;
131
+ setLocked(locked: boolean): void;
142
132
  }
143
133
 
144
- /**
145
- * DimensionSettingProps extends the base SettingProps.
146
- * It allows specifying a locked state (for aspect ratio) and optional min/max constraints.
147
- */
148
134
  export declare interface DimensionSettingProps extends SettingProps<DimensionValue> {
149
- /** When true, maintain the aspect ratio between width and height. */
150
135
  locked?: boolean;
151
- /** Optional minimum and maximum values for width and height. */
152
136
  minWidth?: number;
153
137
  maxWidth?: number;
154
138
  minHeight?: number;
155
139
  maxHeight?: number;
140
+ width?: number;
141
+ height?: number;
156
142
  }
157
143
 
158
- /**
159
- * DimensionValue interface represents the two-dimensional size.
160
- * Both width and height must be valid positive numbers.
161
- */
162
144
  export declare interface DimensionValue {
163
145
  width: number;
164
146
  height: number;
@@ -226,7 +208,7 @@ declare type InputProps = {
226
208
  placeholder?: string;
227
209
  };
228
210
 
229
- export declare type InputTypes = 'number' | 'text' | 'select' | 'color' | 'date' | 'button';
211
+ export declare type InputTypes = "number" | "text" | "select" | "color" | "date" | "button";
230
212
 
231
213
  export declare function iterateSettings<T extends Record<string, Setting<any, any> | SettingGroup<any>>>(settings: T, callback: (key: string, setting: Setting<any, any> | SettingGroup<any>) => void): void;
232
214
 
@@ -297,6 +279,7 @@ export declare interface SelectApiSettingProps<T = any> extends SettingProps<T>
297
279
  options?: SelectApiOption[];
298
280
  getOptions?: () => SelectApiOption[];
299
281
  getOptionsAsync?: () => Promise<SelectApiOption[]>;
282
+ loadingText?: string;
300
283
  }
301
284
 
302
285
  export declare class SelectApiSettings<T = any> extends Setting<T, SelectApiSettingProps<T>> {
@@ -306,11 +289,15 @@ export declare class SelectApiSettings<T = any> extends Setting<T, SelectApiSett
306
289
  private selectedOptionIndex;
307
290
  private optionsListEl;
308
291
  private svgContainer;
292
+ private buttonEl;
293
+ private isLoading;
294
+ private container;
309
295
  constructor(props?: SelectApiSettingProps<T>);
310
296
  private createOption;
311
297
  draw(): HTMLElement;
312
298
  private selectApiOption;
313
299
  private updateOptionsList;
300
+ private updateButtonText;
314
301
  }
315
302
 
316
303
  export declare interface SelectOption {
@@ -325,20 +312,30 @@ export declare class SelectSetting<T = any> extends Setting<T, SelectSettingProp
325
312
  private selectedOptionIndex;
326
313
  private optionsListEl;
327
314
  private svgContainer;
315
+ private buttonEl;
316
+ private isLoading;
317
+ private container;
318
+ private clickOutsideListener;
328
319
  constructor(props?: SelectSettingProps<T>);
329
320
  private createOption;
330
321
  draw(): HTMLElement;
331
322
  private selectOption;
323
+ private updateOptionsList;
324
+ private updateButtonText;
325
+ destroy(): void;
332
326
  }
333
327
 
334
328
  export declare interface SelectSettingProps<T = any> extends SettingProps<T> {
335
329
  options?: SelectOption[];
336
330
  getOptions?: () => SelectOption[];
337
331
  getOptionsAsync?: () => Promise<SelectOption[]>;
332
+ loadingText?: string;
333
+ placeholder?: string;
338
334
  }
339
335
 
340
336
  export declare abstract class Setting<T, P extends SettingProps<T>> implements IDrawable, IChangable<T> {
341
337
  protected props: P;
338
+ destroy(): void;
342
339
  protected inputEl?: HTMLInputElement;
343
340
  id: string;
344
341
  value: T | undefined;
@@ -357,18 +354,20 @@ export declare abstract class Setting<T, P extends SettingProps<T>> implements I
357
354
  export declare class SettingGroup<T extends Record<string, Setting<any, any> | SettingGroup<any>>> implements IDrawable, IChangable<T> {
358
355
  title: string;
359
356
  settings: T;
357
+ description?: string;
358
+ icon?: string;
360
359
  id: string;
361
360
  onChange?: ((value: T) => void) | undefined;
362
361
  private isCollapsed;
363
362
  private isMain;
363
+ private elementRef;
364
364
  constructor(groupProps: SettingGroupProps<T>);
365
365
  setOnChange(onChange: (value: T) => void): SettingGroup<T>;
366
- /**
367
- * Returns all values if called with no arguments,
368
- * or returns only the values for a single child if a key is provided.
369
- */
370
366
  getValues<K extends keyof T>(childKey?: K): any;
371
367
  draw(): HTMLElement;
368
+ collapse(): void;
369
+ expand(): void;
370
+ toggle(): void;
372
371
  }
373
372
 
374
373
  export declare type SettingGroupProps<T> = {
@@ -377,6 +376,8 @@ export declare type SettingGroupProps<T> = {
377
376
  id?: string;
378
377
  collapsed?: boolean;
379
378
  main?: boolean;
379
+ description?: string;
380
+ icon?: string;
380
381
  };
381
382
 
382
383
  export declare interface SettingProps<T> {
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,36 +1,36 @@
1
- {
2
- "name": "builder-settings-types",
3
- "description": "builder settings",
4
- "version": "0.0.77",
5
- "type": "module",
6
- "main": "dist/builder-settings-types.cjs.js",
7
- "module": "dist/builder-settings-types.es.js",
8
- "types": "dist/index.d.ts",
9
- "scripts": {
10
- "dev": "vite",
11
- "build": "tsc && vite build",
12
- "test": "tsc && vite test",
13
- "preview": "vite preview",
14
- "pub": "npm version patch && npm run build && npm publish --access public"
15
- },
16
- "devDependencies": {
17
- "typescript": "~5.6.2",
18
- "vite": "^6.0.1"
19
- },
20
- "files": [
21
- "dist"
22
- ],
23
- "exports": {
24
- ".": {
25
- "types": "./dist/index.d.ts",
26
- "import": "./dist/builder-settings-types.es.js",
27
- "require": "./dist/builder-settings-types.cjs.js"
28
- }
29
- },
30
- "license": "MIT",
31
- "author": "onAim",
32
- "dependencies": {
33
- "nanoid": "^5.1.0",
34
- "vite-plugin-dts": "^4.5.0"
35
- }
36
- }
1
+ {
2
+ "name": "builder-settings-types",
3
+ "description": "builder settings",
4
+ "version": "0.0.79",
5
+ "type": "module",
6
+ "main": "dist/builder-settings-types.cjs.js",
7
+ "module": "dist/builder-settings-types.es.js",
8
+ "types": "dist/index.d.ts",
9
+ "scripts": {
10
+ "dev": "vite",
11
+ "build": "tsc && vite build",
12
+ "test": "tsc && vite test",
13
+ "preview": "vite preview",
14
+ "pub": "npm version patch && npm run build && npm publish --access public"
15
+ },
16
+ "devDependencies": {
17
+ "typescript": "~5.6.2",
18
+ "vite": "^6.0.1"
19
+ },
20
+ "files": [
21
+ "dist"
22
+ ],
23
+ "exports": {
24
+ ".": {
25
+ "types": "./dist/index.d.ts",
26
+ "import": "./dist/builder-settings-types.es.js",
27
+ "require": "./dist/builder-settings-types.cjs.js"
28
+ }
29
+ },
30
+ "license": "MIT",
31
+ "author": "onAim",
32
+ "dependencies": {
33
+ "nanoid": "^5.1.0",
34
+ "vite-plugin-dts": "^4.5.0"
35
+ }
36
+ }