builder-settings-types 0.0.74 → 0.0.76

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 (4) hide show
  1. package/dist/builder-settings-types.cjs.js +2 -2
  2. package/dist/builder-settings-types.es.js +2 -2
  3. package/dist/index.css +1 -1
  4. package/package.json +1 -1
package/dist/builder-settings-types.cjs.js CHANGED
@@ -11,7 +11,7 @@
11
11
  <path d="M15.84 12.6648C15.6975 12.6648 15.555 12.6123 15.4425 12.4998L10.725 7.78234C10.5075 7.56484 10.5075 7.20484 10.725 6.98734C10.9425 6.76984 11.3025 6.76984 11.52 6.98734L16.2375 11.7048C16.455 11.9223 16.455 12.2823 16.2375 12.4998C16.1325 12.6048 15.99 12.6648 15.84 12.6648Z" fill="#667085"/>
12
12
  </svg>
13
13
  `,R=`
14
- <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
14
+ <svg xmlns="http://www.w3.org/2000/svg" class="svg-select" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
15
15
  <polyline points="6 9 12 15 18 9"></polyline>
16
16
  </svg>
17
17
  `;class S extends d{constructor(t={}){if(super(t),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&t.getOptionsAsync().then(e=>{this._options.push(...e)}).catch(e=>{console.error("Failed to fetch async options:",e)}),this.value!==void 0){const e=this._options.findIndex(i=>i.value===this.value);e>=0&&(this.selectedOptionIndex=e)}this.optionsListEl=this.optionsListEl,this.svgContainer=this.svgContainer}createOption(t,e){const i=document.createElement("li");return i.classList.add("select-option"),i.textContent=t.name,i.dataset.index=String(e),i}draw(){const t=document.createElement("div");if(t.classList.add("select-container"),this.props.icon||this.props.title){const s=document.createElement("div");if(s.className="icon-container",this.props.icon){const o=this.createIcon(this.props.icon);s.appendChild(o)}if(this.props.title){const o=this.createLabel(this.props.title);s.appendChild(o)}t.appendChild(s)}const e=document.createElement("div");e.classList.add("select-button"),e.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:"Select an option",e.onclick=()=>{var s,o;this.isOpen=!this.isOpen,(s=this.optionsListEl)==null||s.classList.toggle("open",this.isOpen),(o=this.svgContainer)==null||o.classList.toggle("open",this.isOpen)},t.appendChild(e);const i=document.createElement("ul");i.classList.add("select-options"),this._options.forEach((s,o)=>{const a=this.createOption(s,o);a.onclick=l=>this.selectOption(l,o,e),i.appendChild(a)}),t.appendChild(i);const n=document.createElement("div");return n.classList.add("svg-container"),n.innerHTML=R,t.appendChild(n),n.onclick=()=>{var s,o;this.isOpen=!this.isOpen,(s=this.optionsListEl)==null||s.classList.toggle("open",this.isOpen),(o=this.svgContainer)==null||o.classList.toggle("open",this.isOpen)},this.optionsListEl=i,this.svgContainer=n,t}selectOption(t,e,i){var s,o,a;const n=this._options[e];n&&(this.value=n.value,(s=this.onChange)==null||s.call(this,this.value),this.selectedOptionIndex=e,this.isOpen=!1,i.textContent=n.name,(o=this.optionsListEl)==null||o.classList.remove("open"),(a=this.svgContainer)==null||a.classList.remove("open"))}}class T extends d{constructor(t={}){super(t),this.inputType="button",this.value||(this.value="center")}draw(){const t=document.createElement("div");t.className="align-setting-wrapper";const e=document.createElement("label");e.className="align-setting-label",e.textContent=this.title||"Align",t.appendChild(e);const i=document.createElement("div");return i.className="align-options-container",[{name:"left",icon:`
@@ -74,7 +74,7 @@
74
74
  </svg>`;class U extends d{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new C({title:"Width",default:this.value,suffix:"px",minValue:t.minWidth??0,maxValue:t.maxWidth,icon:q}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||e<1||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}}const q=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
75
75
  <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"/>
76
76
  </svg>`,D=`
77
- <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
77
+ <svg xmlns="http://www.w3.org/2000/svg" class="svg-select-api" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
78
78
  <polyline points="6 9 12 15 18 9"></polyline>
79
79
  </svg>
80
80
  `;class P extends d{constructor(t={}){if(super(t),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&t.getOptionsAsync().then(e=>{this._options.push(...e)}).catch(e=>{console.error("Failed to fetch async options:",e)}),this.value!==void 0){const e=this._options.findIndex(i=>i.value===this.value);e>=0&&(this.selectedOptionIndex=e)}this.optionsListEl=this.optionsListEl,this.svgContainer=this.svgContainer}createOption(t,e){const i=document.createElement("li");i.classList.add("select-api-option"),i.textContent=t.name,i.dataset.index=String(e);const n=document.createElement("input");return n.type="radio",n.classList.add("select-api-radio"),n.name="select-api-radio-group",i.appendChild(n),this.selectedOptionIndex===e&&(n.checked=!0),i}draw(){const t=document.createElement("div");if(t.classList.add("select-api-container"),this.props.icon||this.props.title){const s=document.createElement("div");if(s.className="icon-container",this.props.icon){const o=this.createIcon(this.props.icon);s.appendChild(o)}if(this.props.title){const o=this.createLabel(this.props.title);s.appendChild(o)}t.appendChild(s)}const e=document.createElement("div");e.classList.add("select-api-button"),e.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:"Select an option",e.onclick=()=>{var s,o;this.isOpen=!this.isOpen,(s=this.optionsListEl)==null||s.classList.toggle("open",this.isOpen),(o=this.svgContainer)==null||o.classList.toggle("open",this.isOpen)},t.appendChild(e);const i=document.createElement("ul");i.classList.add("select-api-options"),this._options.forEach((s,o)=>{const a=this.createOption(s,o);a.onclick=l=>this.selectApiOption(l,o,e),i.appendChild(a)}),t.appendChild(i);const n=document.createElement("div");return n.classList.add("svg-container"),n.innerHTML=D,t.appendChild(n),n.onclick=()=>{var s,o;this.isOpen=!this.isOpen,(s=this.optionsListEl)==null||s.classList.toggle("open",this.isOpen),(o=this.svgContainer)==null||o.classList.toggle("open",this.isOpen)},this.optionsListEl=i,this.svgContainer=n,t}selectApiOption(t,e,i){var s,o,a;const n=this._options[e];if(n){console.log("selectedOption",n),this.value=n.value,(s=this.onChange)==null||s.call(this,this.value),this.selectedOptionIndex=e,this.isOpen=!1,i.textContent=n.name,(o=this.optionsListEl)==null||o.classList.remove("open"),(a=this.svgContainer)==null||a.classList.remove("open");const l=t.currentTarget.querySelector(".select-api-radio");l&&(l.checked=!0)}}}const X=`
package/dist/builder-settings-types.es.js CHANGED
@@ -256,7 +256,7 @@ const I = `
256
256
  <path d="M15.84 12.6648C15.6975 12.6648 15.555 12.6123 15.4425 12.4998L10.725 7.78234C10.5075 7.56484 10.5075 7.20484 10.725 6.98734C10.9425 6.76984 11.3025 6.76984 11.52 6.98734L16.2375 11.7048C16.455 11.9223 16.455 12.2823 16.2375 12.4998C16.1325 12.6048 15.99 12.6648 15.84 12.6648Z" fill="#667085"/>
257
257
  </svg>
258
258
  `, B = `
259
- <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
259
+ <svg xmlns="http://www.w3.org/2000/svg" class="svg-select" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
260
260
  <polyline points="6 9 12 15 18 9"></polyline>
261
261
  </svg>
262
262
  `;
@@ -585,7 +585,7 @@ class nt extends u {
585
585
  const G = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
586
586
  <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"/>
587
587
  </svg>`, Z = `
588
- <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
588
+ <svg xmlns="http://www.w3.org/2000/svg" class="svg-select-api" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
589
589
  <polyline points="6 9 12 15 18 9"></polyline>
590
590
  </svg>
591
591
  `;
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-radius:8px;border-bottom:solid 1px var(--color-border);background-color:var(--color-white);box-shadow:0 1px 2px #1018280d}.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;border:1px solid #EAECF0;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{transition:transform .3s ease-out}.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{width:20px;height:20px;transition:transform .3s ease-out}.svg-container.open svg{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,textarea,button,select{display:flex;align-items:center;justify-content:center;max-height:33px;font-family:Satoshi,sans-serif;font-size:inherit;color:inherit;background-color:transparent}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 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}
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.74",
4
+ "version": "0.0.76",
5
5
  "type": "module",
6
6
  "main": "dist/builder-settings-types.cjs.js",
7
7
  "module": "dist/builder-settings-types.es.js",