react-conditional-ui 1.2.0 → 1.2.1

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 (11) hide show
  1. package/README.md +2 -0
  2. package/dist/index.cjs +458 -299
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +3 -0
  5. package/dist/index.css.map +1 -1
  6. package/dist/index.d.cts +40 -12
  7. package/dist/index.d.ts +40 -12
  8. package/dist/index.js +453 -299
  9. package/dist/index.js.map +1 -1
  10. package/dist/styles.css +4 -0
  11. package/package.json +26 -1
package/dist/index.css CHANGED
@@ -179,6 +179,9 @@
179
179
  .rcui-adornment-enter {
180
180
  color: rgba(255, 255, 255, 0.3) !important;
181
181
  }
182
+ .rcui-adornment-suggestions {
183
+ color: rgba(255, 255, 255, 0.3) !important;
184
+ }
182
185
  .rcui-adornment-error {
183
186
  color: #f5c542 !important;
184
187
  }
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../assets/styles.css"],"sourcesContent":["/* react-conditional-ui default styles */\n\n/* ── Root ── */\n.rcui-root {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n/* ── Input ── */\n.rcui-input .MuiOutlinedInput-root {\n border-radius: 8px;\n background-color: rgba(255, 255, 255, 0.04);\n}\n\n.rcui-input .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {\n border-color: var(--rcui-primary, #7c8aff);\n}\n\n/* ── Output Row ── */\n.rcui-row {\n display: flex;\n gap: 8px;\n align-items: center;\n flex-wrap: wrap;\n border-radius: 4px;\n padding: 4px;\n transition:\n background-color 0.15s,\n box-shadow 0.15s;\n}\n\n.rcui-row--over {\n background-color: rgba(255, 255, 255, 0.06);\n box-shadow: inset 0 0 0 2px var(--rcui-primary, #7c8aff);\n}\n\n/* ── Drag handle ── */\n.rcui-drag-handle {\n display: flex;\n cursor: grab;\n color: rgba(255, 255, 255, 0.5);\n}\n\n/* ── Chips ── */\n.rcui-chip-field {\n font-weight: 500;\n background-color: rgba(124, 138, 255, 0.15) !important;\n border: 1px solid rgba(124, 138, 255, 0.4) !important;\n}\n\n.rcui-chip-field:hover {\n background-color: rgba(124, 138, 255, 0.25) !important;\n}\n\n.rcui-chip-field--error {\n font-weight: 500;\n border: 1px solid !important;\n}\n\n.rcui-chip-operator {\n font-weight: 500;\n background-color: rgba(192, 132, 252, 0.15) !important;\n border: 1px solid rgba(192, 132, 252, 0.4) !important;\n}\n\n.rcui-chip-operator:hover {\n background-color: rgba(192, 132, 252, 0.25) !important;\n}\n\n.rcui-chip-operator--error {\n font-weight: 500;\n border: 1px solid !important;\n}\n\n.rcui-chip-value {\n font-weight: 500;\n background-color: rgba(255, 255, 255, 0.08) !important;\n border: 1px solid rgba(255, 255, 255, 0.16) !important;\n}\n\n.rcui-chip-value:hover {\n background-color: rgba(255, 255, 255, 0.14) !important;\n}\n\n/* ── Connector chip ── */\n.rcui-connector {\n display: flex;\n justify-content: center;\n padding: 2px 0;\n}\n\n.rcui-connector-chip {\n font-weight: 600 !important;\n font-size: 0.7rem !important;\n letter-spacing: 0.05em;\n background-color: rgba(103, 232, 249, 0.12) !important;\n color: var(--rcui-info, #67e8f9) !important;\n border: 1px solid rgba(103, 232, 249, 0.3) !important;\n}\n\n.rcui-connector-chip--clickable {\n cursor: pointer;\n}\n\n.rcui-connector-chip--clickable:hover {\n background-color: rgba(103, 232, 249, 0.22) !important;\n}\n\n/* ── Drag overlay ── */\n.rcui-overlay {\n display: flex;\n gap: 8px;\n align-items: center;\n opacity: 0.9;\n}\n\n/* ── Group paper ── */\n.rcui-group-paper {\n padding: 12px;\n border-color: rgba(255, 255, 255, 0.08) !important;\n background-color: rgba(255, 255, 255, 0.02) !important;\n backdrop-filter: blur(8px);\n transition:\n border-color 0.15s,\n background-color 0.15s;\n}\n\n.rcui-group-paper--over {\n border-color: var(--rcui-primary, #7c8aff) !important;\n background-color: rgba(124, 138, 255, 0.06) !important;\n}\n\n/* ── Single-row droppable wrapper ── */\n.rcui-droppable-single {\n border-radius: 4px;\n transition:\n background-color 0.15s,\n outline-color 0.15s;\n}\n\n.rcui-droppable-single--over {\n background-color: rgba(255, 255, 255, 0.06);\n outline: 2px solid var(--rcui-primary, #7c8aff);\n}\n\n/* ── Ungroup drop zone ── */\n.rcui-drop-zone {\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-height: 48px;\n padding: 8px;\n border-radius: 4px;\n border: 2px dashed rgba(255, 255, 255, 0.06);\n background-color: transparent;\n transition:\n border-color 0.2s,\n background-color 0.2s;\n}\n\n.rcui-drop-zone--over {\n border-color: var(--rcui-primary, #7c8aff);\n background-color: rgba(124, 138, 255, 0.06);\n}\n\n/* ── Input wrapper ── */\n.rcui-input-wrapper {\n position: relative;\n}\n\n/* ── Ghost input inner container ── */\n.rcui-input-inner {\n position: relative;\n display: inline-flex;\n align-items: center;\n width: 100%;\n}\n\n.rcui-input-inner > input {\n width: 100%;\n background: transparent;\n}\n\n/* Hidden mirror span: same font as input, used to measure text width */\n.rcui-mirror {\n position: absolute;\n top: 0;\n left: 0;\n height: 0;\n overflow: hidden;\n white-space: pre;\n pointer-events: none;\n font: inherit;\n letter-spacing: inherit;\n visibility: hidden;\n}\n\n/* Ghost completion text, positioned right after the typed text */\n.rcui-ghost {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n white-space: pre;\n pointer-events: none;\n font: inherit;\n letter-spacing: inherit;\n color: rgba(255, 255, 255, 0.25);\n}\n\n/* Squiggly underline layer, overlaid on top of the input text */\n.rcui-squiggly-layer {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n pointer-events: none;\n font: inherit;\n letter-spacing: inherit;\n white-space: pre;\n color: transparent;\n overflow: visible;\n}\n\n.rcui-squiggly {\n text-decoration: underline wavy #f5c542;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n text-decoration-skip-ink: none;\n}\n\n/* ── Input adornment icons ── */\n.rcui-adornment-enter {\n color: rgba(255, 255, 255, 0.3) !important;\n}\n\n.rcui-adornment-error {\n color: #f5c542 !important;\n}\n\n/* ── Autocomplete dropdown ── */\n.rcui-completions {\n position: absolute;\n top: 100%;\n z-index: 1300;\n margin: 4px 0 0;\n padding: 4px 0;\n list-style: none;\n border-radius: 6px;\n border: 1px solid rgba(255, 255, 255, 0.12);\n background-color: #212738;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\n max-height: 240px;\n overflow-y: auto;\n width: max-content;\n min-width: 120px;\n max-width: 280px;\n}\n\n.rcui-completion-item {\n padding: 6px 14px;\n font-size: 0.875rem;\n cursor: pointer;\n color: rgba(255, 255, 255, 0.8);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.rcui-completion-item--active {\n background-color: rgba(124, 138, 255, 0.18);\n color: #e6edf3;\n}\n\n/* ── Popover value edit ── */\n.rcui-popover-value-edit {\n padding: 12px;\n}\n"],"mappings":";AAGA,CAAC;AACG,WAAS;AACT,kBAAgB;AAChB,OAAK;AACT;AAGA,CAAC,WAAW,CAAC;AACT,iBAAe;AACf,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC1C;AAEA,CALC,WAKW,CALC,qBAKqB,OAAO,CAAC;AACtC,gBAAc,IAAI,cAAc,EAAE;AACtC;AAGA,CAAC;AACG,WAAS;AACT,OAAK;AACL,eAAa;AACb,aAAW;AACX,iBAAe;AACf,WAAS;AACT,cACI,iBAAiB,KAAK,EACtB,WAAW;AACnB;AAEA,CAAC;AACG,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,cAAY,MAAM,EAAE,EAAE,EAAE,IAAI,IAAI,cAAc,EAAE;AACpD;AAGA,CAAC;AACG,WAAS;AACT,UAAQ;AACR,SAAO,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC/B;AAGA,CAAC;AACG,eAAa;AACb,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,UAAQ,IAAI,MAAM,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC1C;AAEA,CANC,eAMe;AACZ,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC1C;AAEA,CAAC;AACG,eAAa;AACb,UAAQ,IAAI;AAChB;AAEA,CAAC;AACG,eAAa;AACb,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,UAAQ,IAAI,MAAM,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC1C;AAEA,CANC,kBAMkB;AACf,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC1C;AAEA,CAAC;AACG,eAAa;AACb,UAAQ,IAAI;AAChB;AAEA,CAAC;AACG,eAAa;AACb,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,UAAQ,IAAI,MAAM,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC1C;AAEA,CANC,eAMe;AACZ,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC1C;AAGA,CAAC;AACG,WAAS;AACT,mBAAiB;AACjB,WAAS,IAAI;AACjB;AAEA,CAAC;AACG,eAAa;AACb,aAAW;AACX,kBAAgB;AAChB,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,SAAO,IAAI,WAAW,EAAE;AACxB,UAAQ,IAAI,MAAM,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC1C;AAEA,CAAC;AACG,UAAQ;AACZ;AAEA,CAJC,8BAI8B;AAC3B,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC1C;AAGA,CAAC;AACG,WAAS;AACT,OAAK;AACL,eAAa;AACb,WAAS;AACb;AAGA,CAAC;AACG,WAAS;AACT,gBAAc,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAClC,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,mBAAiB,KAAK;AACtB,cACI,aAAa,KAAK,EAClB,iBAAiB;AACzB;AAEA,CAAC;AACG,gBAAc,IAAI,cAAc,EAAE;AAClC,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC1C;AAGA,CAAC;AACG,iBAAe;AACf,cACI,iBAAiB,KAAK,EACtB,cAAc;AACtB;AAEA,CAAC;AACG,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,WAAS,IAAI,MAAM,IAAI,cAAc,EAAE;AAC3C;AAGA,CAAC;AACG,WAAS;AACT,kBAAgB;AAChB,OAAK;AACL,cAAY;AACZ,WAAS;AACT,iBAAe;AACf,UAAQ,IAAI,OAAO,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACvC,oBAAkB;AAClB,cACI,aAAa,IAAI,EACjB,iBAAiB;AACzB;AAEA,CAAC;AACG,gBAAc,IAAI,cAAc,EAAE;AAClC,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC1C;AAGA,CAAC;AACG,YAAU;AACd;AAGA,CAAC;AACG,YAAU;AACV,WAAS;AACT,eAAa;AACb,SAAO;AACX;AAEA,CAPC,iBAOiB,EAAE;AAChB,SAAO;AACP,cAAY;AAChB;AAGA,CAAC;AACG,YAAU;AACV,OAAK;AACL,QAAM;AACN,UAAQ;AACR,YAAU;AACV,eAAa;AACb,kBAAgB;AAChB,QAAM;AACN,kBAAgB;AAChB,cAAY;AAChB;AAGA,CAAC;AACG,YAAU;AACV,OAAK;AACL,aAAW,WAAW;AACtB,eAAa;AACb,kBAAgB;AAChB,QAAM;AACN,kBAAgB;AAChB,SAAO,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC/B;AAGA,CAAC;AACG,YAAU;AACV,OAAK;AACL,QAAM;AACN,SAAO;AACP,UAAQ;AACR,WAAS;AACT,eAAa;AACb,kBAAgB;AAChB,QAAM;AACN,kBAAgB;AAChB,eAAa;AACb,SAAO;AACP,YAAU;AACd;AAEA,CAAC;AACG,mBAAiB,UAAU,KAAK;AAChC,yBAAuB;AACvB,6BAA2B;AAC3B,4BAA0B;AAC9B;AAGA,CAAC;AACG,SAAO,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC/B;AAEA,CAAC;AACG,SAAO;AACX;AAGA,CAAC;AACG,YAAU;AACV,OAAK;AACL,WAAS;AACT,UAAQ,IAAI,EAAE;AACd,WAAS,IAAI;AACb,cAAY;AACZ,iBAAe;AACf,UAAQ,IAAI,MAAM,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,oBAAkB;AAClB,cAAY,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACrC,cAAY;AACZ,cAAY;AACZ,SAAO;AACP,aAAW;AACX,aAAW;AACf;AAEA,CAAC;AACG,WAAS,IAAI;AACb,aAAW;AACX,UAAQ;AACR,SAAO,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC3B,eAAa;AACb,YAAU;AACV,iBAAe;AACnB;AAEA,CAAC;AACG,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,SAAO;AACX;AAGA,CAAC;AACG,WAAS;AACb;","names":[]}
1
+ {"version":3,"sources":["../assets/styles.css"],"sourcesContent":["/* react-conditional-ui default styles */\n\n/* ── Root ── */\n.rcui-root {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n/* ── Input ── */\n.rcui-input .MuiOutlinedInput-root {\n border-radius: 8px;\n background-color: rgba(255, 255, 255, 0.04);\n}\n\n.rcui-input .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {\n border-color: var(--rcui-primary, #7c8aff);\n}\n\n/* ── Output Row ── */\n.rcui-row {\n display: flex;\n gap: 8px;\n align-items: center;\n flex-wrap: wrap;\n border-radius: 4px;\n padding: 4px;\n transition:\n background-color 0.15s,\n box-shadow 0.15s;\n}\n\n.rcui-row--over {\n background-color: rgba(255, 255, 255, 0.06);\n box-shadow: inset 0 0 0 2px var(--rcui-primary, #7c8aff);\n}\n\n/* ── Drag handle ── */\n.rcui-drag-handle {\n display: flex;\n cursor: grab;\n color: rgba(255, 255, 255, 0.5);\n}\n\n/* ── Chips ── */\n.rcui-chip-field {\n font-weight: 500;\n background-color: rgba(124, 138, 255, 0.15) !important;\n border: 1px solid rgba(124, 138, 255, 0.4) !important;\n}\n\n.rcui-chip-field:hover {\n background-color: rgba(124, 138, 255, 0.25) !important;\n}\n\n.rcui-chip-field--error {\n font-weight: 500;\n border: 1px solid !important;\n}\n\n.rcui-chip-operator {\n font-weight: 500;\n background-color: rgba(192, 132, 252, 0.15) !important;\n border: 1px solid rgba(192, 132, 252, 0.4) !important;\n}\n\n.rcui-chip-operator:hover {\n background-color: rgba(192, 132, 252, 0.25) !important;\n}\n\n.rcui-chip-operator--error {\n font-weight: 500;\n border: 1px solid !important;\n}\n\n.rcui-chip-value {\n font-weight: 500;\n background-color: rgba(255, 255, 255, 0.08) !important;\n border: 1px solid rgba(255, 255, 255, 0.16) !important;\n}\n\n.rcui-chip-value:hover {\n background-color: rgba(255, 255, 255, 0.14) !important;\n}\n\n/* ── Connector chip ── */\n.rcui-connector {\n display: flex;\n justify-content: center;\n padding: 2px 0;\n}\n\n.rcui-connector-chip {\n font-weight: 600 !important;\n font-size: 0.7rem !important;\n letter-spacing: 0.05em;\n background-color: rgba(103, 232, 249, 0.12) !important;\n color: var(--rcui-info, #67e8f9) !important;\n border: 1px solid rgba(103, 232, 249, 0.3) !important;\n}\n\n.rcui-connector-chip--clickable {\n cursor: pointer;\n}\n\n.rcui-connector-chip--clickable:hover {\n background-color: rgba(103, 232, 249, 0.22) !important;\n}\n\n/* ── Drag overlay ── */\n.rcui-overlay {\n display: flex;\n gap: 8px;\n align-items: center;\n opacity: 0.9;\n}\n\n/* ── Group paper ── */\n.rcui-group-paper {\n padding: 12px;\n border-color: rgba(255, 255, 255, 0.08) !important;\n background-color: rgba(255, 255, 255, 0.02) !important;\n backdrop-filter: blur(8px);\n transition:\n border-color 0.15s,\n background-color 0.15s;\n}\n\n.rcui-group-paper--over {\n border-color: var(--rcui-primary, #7c8aff) !important;\n background-color: rgba(124, 138, 255, 0.06) !important;\n}\n\n/* ── Single-row droppable wrapper ── */\n.rcui-droppable-single {\n border-radius: 4px;\n transition:\n background-color 0.15s,\n outline-color 0.15s;\n}\n\n.rcui-droppable-single--over {\n background-color: rgba(255, 255, 255, 0.06);\n outline: 2px solid var(--rcui-primary, #7c8aff);\n}\n\n/* ── Ungroup drop zone ── */\n.rcui-drop-zone {\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-height: 48px;\n padding: 8px;\n border-radius: 4px;\n border: 2px dashed rgba(255, 255, 255, 0.06);\n background-color: transparent;\n transition:\n border-color 0.2s,\n background-color 0.2s;\n}\n\n.rcui-drop-zone--over {\n border-color: var(--rcui-primary, #7c8aff);\n background-color: rgba(124, 138, 255, 0.06);\n}\n\n/* ── Input wrapper ── */\n.rcui-input-wrapper {\n position: relative;\n}\n\n/* ── Ghost input inner container ── */\n.rcui-input-inner {\n position: relative;\n display: inline-flex;\n align-items: center;\n width: 100%;\n}\n\n.rcui-input-inner > input {\n width: 100%;\n background: transparent;\n}\n\n/* Hidden mirror span: same font as input, used to measure text width */\n.rcui-mirror {\n position: absolute;\n top: 0;\n left: 0;\n height: 0;\n overflow: hidden;\n white-space: pre;\n pointer-events: none;\n font: inherit;\n letter-spacing: inherit;\n visibility: hidden;\n}\n\n/* Ghost completion text, positioned right after the typed text */\n.rcui-ghost {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n white-space: pre;\n pointer-events: none;\n font: inherit;\n letter-spacing: inherit;\n color: rgba(255, 255, 255, 0.25);\n}\n\n/* Squiggly underline layer, overlaid on top of the input text */\n.rcui-squiggly-layer {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n pointer-events: none;\n font: inherit;\n letter-spacing: inherit;\n white-space: pre;\n color: transparent;\n overflow: visible;\n}\n\n.rcui-squiggly {\n text-decoration: underline wavy #f5c542;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n text-decoration-skip-ink: none;\n}\n\n/* ── Input adornment icons ── */\n.rcui-adornment-enter {\n color: rgba(255, 255, 255, 0.3) !important;\n}\n\n.rcui-adornment-suggestions {\n color: rgba(255, 255, 255, 0.3) !important;\n}\n\n.rcui-adornment-error {\n color: #f5c542 !important;\n}\n\n/* ── Autocomplete dropdown ── */\n.rcui-completions {\n position: absolute;\n top: 100%;\n z-index: 1300;\n margin: 4px 0 0;\n padding: 4px 0;\n list-style: none;\n border-radius: 6px;\n border: 1px solid rgba(255, 255, 255, 0.12);\n background-color: #212738;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\n max-height: 240px;\n overflow-y: auto;\n width: max-content;\n min-width: 120px;\n max-width: 280px;\n}\n\n.rcui-completion-item {\n padding: 6px 14px;\n font-size: 0.875rem;\n cursor: pointer;\n color: rgba(255, 255, 255, 0.8);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.rcui-completion-item--active {\n background-color: rgba(124, 138, 255, 0.18);\n color: #e6edf3;\n}\n\n/* ── Popover value edit ── */\n.rcui-popover-value-edit {\n padding: 12px;\n}\n"],"mappings":"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","names":[]}
package/dist/index.d.cts CHANGED
@@ -87,31 +87,46 @@ type Diagnostic = {
87
87
  end: number;
88
88
  message: string;
89
89
  };
90
+ type ConditionalUIInputSlotProps = {
91
+ fields: FieldOption[];
92
+ operators: OperatorOption[];
93
+ value?: string;
94
+ onChange?: (raw: string) => void;
95
+ onSubmit: (group: ConditionGroup) => void;
96
+ };
97
+ type ConditionalUIOutputSlotProps = {
98
+ groups: ConditionGroup[];
99
+ fields: FieldOption[];
100
+ operators: OperatorOption[];
101
+ onGroupsChange: (groups: ConditionGroup[]) => void;
102
+ };
90
103
  type ConditionalUIProps = {
91
104
  fields: FieldOption[];
92
105
  operators?: OperatorOption[];
93
106
  value?: string;
94
107
  onChange?: (raw: string) => void;
95
108
  onConditionsChange?: (groups: ConditionGroup[]) => void;
109
+ InputComponent?: React$1.ComponentType<ConditionalUIInputSlotProps>;
110
+ OutputComponent?: React$1.ComponentType<ConditionalUIOutputSlotProps>;
96
111
  className?: string;
97
112
  style?: React$1.CSSProperties;
98
113
  };
99
114
 
100
- declare function ConditionalUI({ fields, operators, value, onChange, onConditionsChange, className, style, }: ConditionalUIProps): react_jsx_runtime.JSX.Element;
115
+ declare function ConditionalUI({ fields, operators, value, onChange, onConditionsChange, InputComponent, OutputComponent, className, style, }: ConditionalUIProps): react_jsx_runtime.JSX.Element;
101
116
 
102
117
  type BaseProps = {
103
118
  placeholder?: string;
104
119
  className?: string;
105
120
  style?: React.CSSProperties;
106
121
  };
107
- type StandaloneProps = BaseProps & {
122
+ type ManagedInputProps = BaseProps & {
108
123
  fields: FieldOption[];
109
124
  operators?: OperatorOption[];
110
125
  value?: string;
111
126
  onChange?: (value: string) => void;
112
127
  onSubmit?: (group: ConditionGroup) => void;
113
128
  };
114
- type ControlledProps = BaseProps & {
129
+ type ControlledInputProps = BaseProps & {
115
130
  fields?: undefined;
116
131
  value: string;
117
132
  onChange: (value: string) => void;
@@ -126,8 +141,10 @@ type ControlledProps = BaseProps & {
126
141
  }[];
127
142
  diagnostics?: Diagnostic[];
128
143
  };
129
- type InputProps = StandaloneProps | ControlledProps;
144
+ type InputProps = ManagedInputProps | ControlledInputProps;
130
145
  declare function Input(props: InputProps): react_jsx_runtime.JSX.Element;
146
+ declare function ControlledInput(props: ControlledInputProps): react_jsx_runtime.JSX.Element;
147
+ declare function ManagedInput({ fields, operators, value: controlledValue, onChange: controlledOnChange, onSubmit: onGroupParsed, placeholder, className, style, }: ManagedInputProps): react_jsx_runtime.JSX.Element;
131
148
 
132
149
  type GroupMutations = {
133
150
  addGroup: (group: ConditionGroup) => void;
@@ -149,20 +166,31 @@ declare function useConditionalOutput({ groups: controlledGroups, onGroupsChange
149
166
  mutations: GroupMutations;
150
167
  };
151
168
 
152
- type OutputProps = {
169
+ type SharedOutputProps = {
153
170
  fields: FieldOption[];
154
171
  operators: OperatorOption[];
155
- /** Controlled groups. Omit for uncontrolled (internal state). */
156
- groups?: ConditionGroup[];
157
- /** Fires whenever groups change (works in both controlled and uncontrolled mode). */
158
- onGroupsChange?: (groups: ConditionGroup[]) => void;
159
- /** Default config applied to every group unless overridden by group.config. */
160
172
  defaultGroupConfig?: GroupConfig;
161
173
  className?: string;
162
174
  style?: React.CSSProperties;
163
175
  };
176
+ type ManagedOutputProps = SharedOutputProps & {
177
+ onGroupsChange?: (groups: ConditionGroup[]) => void;
178
+ groups?: undefined;
179
+ };
180
+ type ControlledOutputProps = SharedOutputProps & {
181
+ groups: ConditionGroup[];
182
+ onGroupsChange: (groups: ConditionGroup[]) => void;
183
+ };
184
+ type ReadOnlyOutputProps = SharedOutputProps & {
185
+ groups: ConditionGroup[];
186
+ onGroupsChange?: undefined;
187
+ };
188
+ type OutputProps = ManagedOutputProps | ControlledOutputProps | ReadOnlyOutputProps;
164
189
 
165
- declare function Output({ fields, operators, groups: controlledGroups, onGroupsChange, defaultGroupConfig, className, style, }: OutputProps): react_jsx_runtime.JSX.Element;
190
+ declare function Output(props: OutputProps): react_jsx_runtime.JSX.Element;
191
+ declare function ManagedOutput({ fields, operators, onGroupsChange, defaultGroupConfig, className, style, }: ManagedOutputProps): react_jsx_runtime.JSX.Element;
192
+ declare function ControlledOutput({ fields, operators, groups, onGroupsChange, defaultGroupConfig, className, style, }: ControlledOutputProps): react_jsx_runtime.JSX.Element;
193
+ declare function ReadOnlyOutput({ fields, operators, groups, defaultGroupConfig, className, style, }: ReadOnlyOutputProps): react_jsx_runtime.JSX.Element;
166
194
 
167
195
  type UseConditionalInputOptions = {
168
196
  fields: FieldOption[];
@@ -222,4 +250,4 @@ type UseConditionDataProviderResult = {
222
250
  };
223
251
  declare function useConditionDataProvider({ fields, operators, }: UseConditionDataProviderOptions): UseConditionDataProviderResult;
224
252
 
225
- export { ConditionDataProvider, type ConditionEntry, type ConditionGroup, ConditionDataProvider as ConditionParser, ConditionalUI, type ConditionalUIProps, DEFAULT_OPERATORS, type Diagnostic, type FieldOption, type FieldType, type GroupConfig, type GroupMutations, Input, type InputProps, type LogicalOperator, type OperatorOption, Output, type OutputProps, type ParsedCondition, type UseConditionDataProviderOptions, type UseConditionDataProviderResult, type UseConditionalInputOptions, type UseConditionalOutputOptions, useConditionDataProvider, useConditionalInput, useConditionalOutput };
253
+ export { ConditionDataProvider, type ConditionEntry, type ConditionGroup, ConditionDataProvider as ConditionParser, ConditionalUI, type ConditionalUIInputSlotProps, type ConditionalUIOutputSlotProps, type ConditionalUIProps, ControlledInput, type ControlledInputProps, ControlledOutput, type ControlledOutputProps, DEFAULT_OPERATORS, type Diagnostic, type FieldOption, type FieldType, type GroupConfig, type GroupMutations, Input, type InputProps, type LogicalOperator, ManagedInput, type ManagedInputProps, ManagedOutput, type ManagedOutputProps, type OperatorOption, Output, type OutputProps, type ParsedCondition, ReadOnlyOutput, type ReadOnlyOutputProps, type UseConditionDataProviderOptions, type UseConditionDataProviderResult, type UseConditionalInputOptions, type UseConditionalOutputOptions, useConditionDataProvider, useConditionalInput, useConditionalOutput };
package/dist/index.d.ts CHANGED
@@ -87,31 +87,46 @@ type Diagnostic = {
87
87
  end: number;
88
88
  message: string;
89
89
  };
90
+ type ConditionalUIInputSlotProps = {
91
+ fields: FieldOption[];
92
+ operators: OperatorOption[];
93
+ value?: string;
94
+ onChange?: (raw: string) => void;
95
+ onSubmit: (group: ConditionGroup) => void;
96
+ };
97
+ type ConditionalUIOutputSlotProps = {
98
+ groups: ConditionGroup[];
99
+ fields: FieldOption[];
100
+ operators: OperatorOption[];
101
+ onGroupsChange: (groups: ConditionGroup[]) => void;
102
+ };
90
103
  type ConditionalUIProps = {
91
104
  fields: FieldOption[];
92
105
  operators?: OperatorOption[];
93
106
  value?: string;
94
107
  onChange?: (raw: string) => void;
95
108
  onConditionsChange?: (groups: ConditionGroup[]) => void;
109
+ InputComponent?: React$1.ComponentType<ConditionalUIInputSlotProps>;
110
+ OutputComponent?: React$1.ComponentType<ConditionalUIOutputSlotProps>;
96
111
  className?: string;
97
112
  style?: React$1.CSSProperties;
98
113
  };
99
114
 
100
- declare function ConditionalUI({ fields, operators, value, onChange, onConditionsChange, className, style, }: ConditionalUIProps): react_jsx_runtime.JSX.Element;
115
+ declare function ConditionalUI({ fields, operators, value, onChange, onConditionsChange, InputComponent, OutputComponent, className, style, }: ConditionalUIProps): react_jsx_runtime.JSX.Element;
101
116
 
102
117
  type BaseProps = {
103
118
  placeholder?: string;
104
119
  className?: string;
105
120
  style?: React.CSSProperties;
106
121
  };
107
- type StandaloneProps = BaseProps & {
122
+ type ManagedInputProps = BaseProps & {
108
123
  fields: FieldOption[];
109
124
  operators?: OperatorOption[];
110
125
  value?: string;
111
126
  onChange?: (value: string) => void;
112
127
  onSubmit?: (group: ConditionGroup) => void;
113
128
  };
114
- type ControlledProps = BaseProps & {
129
+ type ControlledInputProps = BaseProps & {
115
130
  fields?: undefined;
116
131
  value: string;
117
132
  onChange: (value: string) => void;
@@ -126,8 +141,10 @@ type ControlledProps = BaseProps & {
126
141
  }[];
127
142
  diagnostics?: Diagnostic[];
128
143
  };
129
- type InputProps = StandaloneProps | ControlledProps;
144
+ type InputProps = ManagedInputProps | ControlledInputProps;
130
145
  declare function Input(props: InputProps): react_jsx_runtime.JSX.Element;
146
+ declare function ControlledInput(props: ControlledInputProps): react_jsx_runtime.JSX.Element;
147
+ declare function ManagedInput({ fields, operators, value: controlledValue, onChange: controlledOnChange, onSubmit: onGroupParsed, placeholder, className, style, }: ManagedInputProps): react_jsx_runtime.JSX.Element;
131
148
 
132
149
  type GroupMutations = {
133
150
  addGroup: (group: ConditionGroup) => void;
@@ -149,20 +166,31 @@ declare function useConditionalOutput({ groups: controlledGroups, onGroupsChange
149
166
  mutations: GroupMutations;
150
167
  };
151
168
 
152
- type OutputProps = {
169
+ type SharedOutputProps = {
153
170
  fields: FieldOption[];
154
171
  operators: OperatorOption[];
155
- /** Controlled groups. Omit for uncontrolled (internal state). */
156
- groups?: ConditionGroup[];
157
- /** Fires whenever groups change (works in both controlled and uncontrolled mode). */
158
- onGroupsChange?: (groups: ConditionGroup[]) => void;
159
- /** Default config applied to every group unless overridden by group.config. */
160
172
  defaultGroupConfig?: GroupConfig;
161
173
  className?: string;
162
174
  style?: React.CSSProperties;
163
175
  };
176
+ type ManagedOutputProps = SharedOutputProps & {
177
+ onGroupsChange?: (groups: ConditionGroup[]) => void;
178
+ groups?: undefined;
179
+ };
180
+ type ControlledOutputProps = SharedOutputProps & {
181
+ groups: ConditionGroup[];
182
+ onGroupsChange: (groups: ConditionGroup[]) => void;
183
+ };
184
+ type ReadOnlyOutputProps = SharedOutputProps & {
185
+ groups: ConditionGroup[];
186
+ onGroupsChange?: undefined;
187
+ };
188
+ type OutputProps = ManagedOutputProps | ControlledOutputProps | ReadOnlyOutputProps;
164
189
 
165
- declare function Output({ fields, operators, groups: controlledGroups, onGroupsChange, defaultGroupConfig, className, style, }: OutputProps): react_jsx_runtime.JSX.Element;
190
+ declare function Output(props: OutputProps): react_jsx_runtime.JSX.Element;
191
+ declare function ManagedOutput({ fields, operators, onGroupsChange, defaultGroupConfig, className, style, }: ManagedOutputProps): react_jsx_runtime.JSX.Element;
192
+ declare function ControlledOutput({ fields, operators, groups, onGroupsChange, defaultGroupConfig, className, style, }: ControlledOutputProps): react_jsx_runtime.JSX.Element;
193
+ declare function ReadOnlyOutput({ fields, operators, groups, defaultGroupConfig, className, style, }: ReadOnlyOutputProps): react_jsx_runtime.JSX.Element;
166
194
 
167
195
  type UseConditionalInputOptions = {
168
196
  fields: FieldOption[];
@@ -222,4 +250,4 @@ type UseConditionDataProviderResult = {
222
250
  };
223
251
  declare function useConditionDataProvider({ fields, operators, }: UseConditionDataProviderOptions): UseConditionDataProviderResult;
224
252
 
225
- export { ConditionDataProvider, type ConditionEntry, type ConditionGroup, ConditionDataProvider as ConditionParser, ConditionalUI, type ConditionalUIProps, DEFAULT_OPERATORS, type Diagnostic, type FieldOption, type FieldType, type GroupConfig, type GroupMutations, Input, type InputProps, type LogicalOperator, type OperatorOption, Output, type OutputProps, type ParsedCondition, type UseConditionDataProviderOptions, type UseConditionDataProviderResult, type UseConditionalInputOptions, type UseConditionalOutputOptions, useConditionDataProvider, useConditionalInput, useConditionalOutput };
253
+ export { ConditionDataProvider, type ConditionEntry, type ConditionGroup, ConditionDataProvider as ConditionParser, ConditionalUI, type ConditionalUIInputSlotProps, type ConditionalUIOutputSlotProps, type ConditionalUIProps, ControlledInput, type ControlledInputProps, ControlledOutput, type ControlledOutputProps, DEFAULT_OPERATORS, type Diagnostic, type FieldOption, type FieldType, type GroupConfig, type GroupMutations, Input, type InputProps, type LogicalOperator, ManagedInput, type ManagedInputProps, ManagedOutput, type ManagedOutputProps, type OperatorOption, Output, type OutputProps, type ParsedCondition, ReadOnlyOutput, type ReadOnlyOutputProps, type UseConditionDataProviderOptions, type UseConditionDataProviderResult, type UseConditionalInputOptions, type UseConditionalOutputOptions, useConditionDataProvider, useConditionalInput, useConditionalOutput };