@fpkit/acss 6.3.0 → 6.4.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 (48) hide show
  1. package/libs/components/alert/alert.css +1 -1
  2. package/libs/components/alert/alert.css.map +1 -1
  3. package/libs/components/alert/alert.min.css +2 -2
  4. package/libs/components/buttons/icon-button.css +1 -1
  5. package/libs/components/buttons/icon-button.css.map +1 -1
  6. package/libs/components/buttons/icon-button.min.css +2 -2
  7. package/libs/components/dialog/dialog.css +1 -1
  8. package/libs/components/dialog/dialog.css.map +1 -1
  9. package/libs/components/dialog/dialog.d.cts +2 -105
  10. package/libs/components/dialog/dialog.d.ts +2 -105
  11. package/libs/components/dialog/dialog.min.css +2 -2
  12. package/libs/components/icons/icon.d.cts +1 -1
  13. package/libs/components/icons/icon.d.ts +1 -1
  14. package/libs/dialog-6c6b3588.d.ts +150 -0
  15. package/libs/{icons-2c09535c.d.ts → icons-48788561.d.ts} +32 -32
  16. package/libs/icons.d.cts +1 -1
  17. package/libs/icons.d.ts +1 -1
  18. package/libs/index.cjs +34 -33
  19. package/libs/index.cjs.map +1 -1
  20. package/libs/index.css +1 -1
  21. package/libs/index.css.map +1 -1
  22. package/libs/index.d.cts +77 -10
  23. package/libs/index.d.ts +77 -10
  24. package/libs/index.js +11 -10
  25. package/libs/index.js.map +1 -1
  26. package/package.json +2 -2
  27. package/src/components/alert/alert.scss +0 -13
  28. package/src/components/buttons/icon-button.mdx +204 -0
  29. package/src/components/buttons/icon-button.scss +64 -26
  30. package/src/components/buttons/icon-button.tsx +9 -6
  31. package/src/components/dialog/dialog-modal.stories.tsx +71 -0
  32. package/src/components/dialog/dialog-modal.tsx +29 -3
  33. package/src/components/dialog/dialog.scss +1 -0
  34. package/src/components/dialog/dialog.test.tsx +119 -0
  35. package/src/components/dialog/dialog.types.ts +8 -1
  36. package/src/index.ts +5 -1
  37. package/src/sass/utilities/_display.scss +156 -0
  38. package/src/sass/utilities/_index.scss +3 -0
  39. package/src/sass/utilities/display.mdx +203 -0
  40. package/src/sass/utilities/display.stories.tsx +141 -0
  41. package/src/styles/alert/alert.css +0 -13
  42. package/src/styles/alert/alert.css.map +1 -1
  43. package/src/styles/buttons/icon-button.css +55 -16
  44. package/src/styles/buttons/icon-button.css.map +1 -1
  45. package/src/styles/dialog/dialog.css +1 -0
  46. package/src/styles/dialog/dialog.css.map +1 -1
  47. package/src/styles/index.css +136 -13
  48. package/src/styles/index.css.map +1 -1
@@ -1 +1 @@
1
- .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}[role=alert]{--alert-success-bg: var(--color-success-bg);--alert-success-border: var(--color-success-border);--alert-success-text: var(--color-success-text);--alert-error-bg: var(--color-error-bg);--alert-error-border: var(--color-error-border);--alert-error-text: var(--color-error-text);--alert-warning-bg: var(--color-warning-bg);--alert-warning-border: var(--color-warning-border);--alert-warning-text: var(--color-warning-text);--alert-info-bg: var(--color-info-bg);--alert-info-border: var(--color-info-border);--alert-info-text: var(--color-info-text);--alert-transition-duration: 0.3s;--alert-border: thin solid currentColor;background-color:var(--alert-bg, var(--color-surface));border:var(--alert-border, var(--color-border));color:var(--alert-color, var(--color-text));padding:var(--alert-padding, var(--spc-4));margin-block-end:var(--alert-margin-block-end);font-size:var(--fs-0);line-height:1.6;display:flex;flex-direction:row;border-radius:var(--alert-radius, var(--border-radius));gap:var(--alert-gap, var(--spc-4));transition:opacity var(--alert-transition-duration) ease,transform var(--alert-transition-duration) ease;opacity:1;transform:translateY(0)}[role=alert]:not([data-visible=true]){opacity:0;transform:translateY(-0.5rem)}@media(prefers-reduced-motion: reduce){[role=alert]{transition-duration:.01ms}}[role=alert]:focus{outline:2px solid currentColor;outline-offset:2px}[role=alert]:focus:not(:focus-visible){outline:none}[role=alert] .alert-icon{margin-block-start:0;align-items:center}[role=alert] .alert-message{flex:2;margin-block-start:0}[role=alert] .alert-message .alert-title{margin-block-end:var(--spc-1, 0.25rem);margin-block-start:0;font-weight:var(--alert-title-fw, 600);font-size:var(--alert-title-fs, inherit);line-height:1.4}[role=alert] .alert-message h2.alert-title,[role=alert] .alert-message h3.alert-title,[role=alert] .alert-message h4.alert-title,[role=alert] .alert-message h5.alert-title,[role=alert] .alert-message h6.alert-title{margin:0;margin-block-end:var(--spc-1, 0.25rem);font-size:inherit;font-weight:var(--alert-title-fw, 600)}[role=alert][data-alert~=info]{--alert-bg: var(--alert-info-bg);--alert-color: var(--alert-info-text);border-color:var(--alert-info-border)}[role=alert][data-alert~=warning]{--alert-bg: var(--alert-warning-bg);--alert-color: var(--alert-warning-text);border-color:var(--alert-warning-border)}[role=alert][data-alert~=error]{--alert-bg: var(--alert-error-bg);--alert-color: var(--alert-error-text);border-color:var(--alert-error-border)}[role=alert][data-alert~=success]{--alert-bg: var(--alert-success-bg);--alert-color: var(--alert-success-text);border-color:var(--alert-success-border)}[role=alert] button[data-btn~=icon]{--btn-bg: transparent;align-items:flex-start}[role=alert][data-variant=filled]{border:none}[role=alert][data-variant=filled][data-alert~=info]{--alert-bg: var(--alert-info-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=warning]{--alert-bg: var(--alert-warning-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=error]{--alert-bg: var(--alert-error-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=success]{--alert-bg: var(--alert-success-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=default]{--alert-bg: #757575;--alert-color: white}[role=alert][data-variant=soft]{border:none}[role=alert] p{font-size:.875rem}/*# sourceMappingURL=alert.css.map */
1
+ [role=alert]{--alert-success-bg: var(--color-success-bg);--alert-success-border: var(--color-success-border);--alert-success-text: var(--color-success-text);--alert-error-bg: var(--color-error-bg);--alert-error-border: var(--color-error-border);--alert-error-text: var(--color-error-text);--alert-warning-bg: var(--color-warning-bg);--alert-warning-border: var(--color-warning-border);--alert-warning-text: var(--color-warning-text);--alert-info-bg: var(--color-info-bg);--alert-info-border: var(--color-info-border);--alert-info-text: var(--color-info-text);--alert-transition-duration: 0.3s;--alert-border: thin solid currentColor;background-color:var(--alert-bg, var(--color-surface));border:var(--alert-border, var(--color-border));color:var(--alert-color, var(--color-text));padding:var(--alert-padding, var(--spc-4));margin-block-end:var(--alert-margin-block-end);font-size:var(--fs-0);line-height:1.6;display:flex;flex-direction:row;border-radius:var(--alert-radius, var(--border-radius));gap:var(--alert-gap, var(--spc-4));transition:opacity var(--alert-transition-duration) ease,transform var(--alert-transition-duration) ease;opacity:1;transform:translateY(0)}[role=alert]:not([data-visible=true]){opacity:0;transform:translateY(-0.5rem)}@media(prefers-reduced-motion: reduce){[role=alert]{transition-duration:.01ms}}[role=alert]:focus{outline:2px solid currentColor;outline-offset:2px}[role=alert]:focus:not(:focus-visible){outline:none}[role=alert] .alert-icon{margin-block-start:0;align-items:center}[role=alert] .alert-message{flex:2;margin-block-start:0}[role=alert] .alert-message .alert-title{margin-block-end:var(--spc-1, 0.25rem);margin-block-start:0;font-weight:var(--alert-title-fw, 600);font-size:var(--alert-title-fs, inherit);line-height:1.4}[role=alert] .alert-message h2.alert-title,[role=alert] .alert-message h3.alert-title,[role=alert] .alert-message h4.alert-title,[role=alert] .alert-message h5.alert-title,[role=alert] .alert-message h6.alert-title{margin:0;margin-block-end:var(--spc-1, 0.25rem);font-size:inherit;font-weight:var(--alert-title-fw, 600)}[role=alert][data-alert~=info]{--alert-bg: var(--alert-info-bg);--alert-color: var(--alert-info-text);border-color:var(--alert-info-border)}[role=alert][data-alert~=warning]{--alert-bg: var(--alert-warning-bg);--alert-color: var(--alert-warning-text);border-color:var(--alert-warning-border)}[role=alert][data-alert~=error]{--alert-bg: var(--alert-error-bg);--alert-color: var(--alert-error-text);border-color:var(--alert-error-border)}[role=alert][data-alert~=success]{--alert-bg: var(--alert-success-bg);--alert-color: var(--alert-success-text);border-color:var(--alert-success-border)}[role=alert] button[data-btn~=icon]{--btn-bg: transparent;align-items:flex-start}[role=alert][data-variant=filled]{border:none}[role=alert][data-variant=filled][data-alert~=info]{--alert-bg: var(--alert-info-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=warning]{--alert-bg: var(--alert-warning-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=error]{--alert-bg: var(--alert-error-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=success]{--alert-bg: var(--alert-success-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=default]{--alert-bg: #757575;--alert-color: white}[role=alert][data-variant=soft]{border:none}[role=alert] p{font-size:.875rem}/*# sourceMappingURL=alert.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/components/alert/alert.scss"],"names":[],"mappings":"AACA,SACE,kBACA,UACA,WACA,UACA,YACA,gBACA,sBACA,mBACA,eAGF,aAEE,4CACA,oDACA,gDAGA,wCACA,gDACA,4CAGA,4CACA,oDACA,gDAGA,sCACA,8CACA,0CAGA,kCAEA,wCAEA,uDACA,gDACA,4CACA,2CACA,+CACA,sBACA,gBACA,aACA,mBACA,wDACA,mCAGA,WACE,8FAEF,UACA,wBAEA,sCACE,UACA,8BAGF,uCAlDF,aAmDI,2BAIF,mBACE,+BACA,mBAIF,uCACE,aAGF,yBACE,qBACA,mBAGF,4BACE,OACA,qBAGA,yCACE,uCACA,qBACA,uCACA,yCACA,gBAIF,uNAKE,SACA,uCACA,kBACA,uCAIJ,+BACE,iCACA,sCACA,sCAGF,kCACE,oCACA,yCACA,yCAGF,gCACE,kCACA,uCACA,uCAGF,kCACE,oCACA,yCACA,yCAIA,oCACE,sBACA,uBAKJ,kCACE,YAEA,oDACE,qCACA,qBAGF,uDACE,wCACA,qBAGF,qDACE,sCACA,qBAGF,uDACE,wCACA,qBAGF,uDACE,oBACA,qBAKJ,gCACE,YAQF,eACE","file":"alert.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/components/alert/alert.scss"],"names":[],"mappings":"AAAA,aAEE,4CACA,oDACA,gDAGA,wCACA,gDACA,4CAGA,4CACA,oDACA,gDAGA,sCACA,8CACA,0CAGA,kCAEA,wCAEA,uDACA,gDACA,4CACA,2CACA,+CACA,sBACA,gBACA,aACA,mBACA,wDACA,mCAGA,WACE,8FAEF,UACA,wBAEA,sCACE,UACA,8BAGF,uCAlDF,aAmDI,2BAIF,mBACE,+BACA,mBAIF,uCACE,aAGF,yBACE,qBACA,mBAGF,4BACE,OACA,qBAGA,yCACE,uCACA,qBACA,uCACA,yCACA,gBAIF,uNAKE,SACA,uCACA,kBACA,uCAIJ,+BACE,iCACA,sCACA,sCAGF,kCACE,oCACA,yCACA,yCAGF,gCACE,kCACA,uCACA,uCAGF,kCACE,oCACA,yCACA,yCAIA,oCACE,sBACA,uBAKJ,kCACE,YAEA,oDACE,qCACA,qBAGF,uDACE,wCACA,qBAGF,qDACE,sCACA,qBAGF,uDACE,wCACA,qBAGF,uDACE,oBACA,qBAKJ,gCACE,YAQF,eACE","file":"alert.css"}
@@ -1,3 +1,3 @@
1
- .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}[role=alert]{--alert-success-bg: var(--color-success-bg);--alert-success-border: var(--color-success-border);--alert-success-text: var(--color-success-text);--alert-error-bg: var(--color-error-bg);--alert-error-border: var(--color-error-border);--alert-error-text: var(--color-error-text);--alert-warning-bg: var(--color-warning-bg);--alert-warning-border: var(--color-warning-border);--alert-warning-text: var(--color-warning-text);--alert-info-bg: var(--color-info-bg);--alert-info-border: var(--color-info-border);--alert-info-text: var(--color-info-text);--alert-transition-duration: 0.3s;--alert-border: thin solid currentColor;background-color:var(--alert-bg, var(--color-surface));border:var(--alert-border, var(--color-border));color:var(--alert-color, var(--color-text));padding:var(--alert-padding, var(--spc-4));margin-block-end:var(--alert-margin-block-end);font-size:var(--fs-0);line-height:1.6;display:flex;flex-direction:row;border-radius:var(--alert-radius, var(--border-radius));gap:var(--alert-gap, var(--spc-4));transition:opacity var(--alert-transition-duration) ease,transform var(--alert-transition-duration) ease;opacity:1;transform:translateY(0)}[role=alert]:not([data-visible=true]){opacity:0;transform:translateY(-0.5rem)}@media(prefers-reduced-motion: reduce){[role=alert]{transition-duration:.01ms}}[role=alert]:focus{outline:2px solid currentColor;outline-offset:2px}[role=alert]:focus:not(:focus-visible){outline:none}[role=alert] .alert-icon{margin-block-start:0;align-items:center}[role=alert] .alert-message{flex:2;margin-block-start:0}[role=alert] .alert-message .alert-title{margin-block-end:var(--spc-1, 0.25rem);margin-block-start:0;font-weight:var(--alert-title-fw, 600);font-size:var(--alert-title-fs, inherit);line-height:1.4}[role=alert] .alert-message h2.alert-title,[role=alert] .alert-message h3.alert-title,[role=alert] .alert-message h4.alert-title,[role=alert] .alert-message h5.alert-title,[role=alert] .alert-message h6.alert-title{margin:0;margin-block-end:var(--spc-1, 0.25rem);font-size:inherit;font-weight:var(--alert-title-fw, 600)}[role=alert][data-alert~=info]{--alert-bg: var(--alert-info-bg);--alert-color: var(--alert-info-text);border-color:var(--alert-info-border)}[role=alert][data-alert~=warning]{--alert-bg: var(--alert-warning-bg);--alert-color: var(--alert-warning-text);border-color:var(--alert-warning-border)}[role=alert][data-alert~=error]{--alert-bg: var(--alert-error-bg);--alert-color: var(--alert-error-text);border-color:var(--alert-error-border)}[role=alert][data-alert~=success]{--alert-bg: var(--alert-success-bg);--alert-color: var(--alert-success-text);border-color:var(--alert-success-border)}[role=alert] button[data-btn~=icon]{--btn-bg: transparent;align-items:flex-start}[role=alert][data-variant=filled]{border:none}[role=alert][data-variant=filled][data-alert~=info]{--alert-bg: var(--alert-info-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=warning]{--alert-bg: var(--alert-warning-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=error]{--alert-bg: var(--alert-error-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=success]{--alert-bg: var(--alert-success-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=default]{--alert-bg: #757575;--alert-color: white}[role=alert][data-variant=soft]{border:none}[role=alert] p{font-size:.875rem}
1
+ [role=alert]{--alert-success-bg: var(--color-success-bg);--alert-success-border: var(--color-success-border);--alert-success-text: var(--color-success-text);--alert-error-bg: var(--color-error-bg);--alert-error-border: var(--color-error-border);--alert-error-text: var(--color-error-text);--alert-warning-bg: var(--color-warning-bg);--alert-warning-border: var(--color-warning-border);--alert-warning-text: var(--color-warning-text);--alert-info-bg: var(--color-info-bg);--alert-info-border: var(--color-info-border);--alert-info-text: var(--color-info-text);--alert-transition-duration: 0.3s;--alert-border: thin solid currentColor;background-color:var(--alert-bg, var(--color-surface));border:var(--alert-border, var(--color-border));color:var(--alert-color, var(--color-text));padding:var(--alert-padding, var(--spc-4));margin-block-end:var(--alert-margin-block-end);font-size:var(--fs-0);line-height:1.6;display:flex;flex-direction:row;border-radius:var(--alert-radius, var(--border-radius));gap:var(--alert-gap, var(--spc-4));transition:opacity var(--alert-transition-duration) ease,transform var(--alert-transition-duration) ease;opacity:1;transform:translateY(0)}[role=alert]:not([data-visible=true]){opacity:0;transform:translateY(-0.5rem)}@media(prefers-reduced-motion: reduce){[role=alert]{transition-duration:.01ms}}[role=alert]:focus{outline:2px solid currentColor;outline-offset:2px}[role=alert]:focus:not(:focus-visible){outline:none}[role=alert] .alert-icon{margin-block-start:0;align-items:center}[role=alert] .alert-message{flex:2;margin-block-start:0}[role=alert] .alert-message .alert-title{margin-block-end:var(--spc-1, 0.25rem);margin-block-start:0;font-weight:var(--alert-title-fw, 600);font-size:var(--alert-title-fs, inherit);line-height:1.4}[role=alert] .alert-message h2.alert-title,[role=alert] .alert-message h3.alert-title,[role=alert] .alert-message h4.alert-title,[role=alert] .alert-message h5.alert-title,[role=alert] .alert-message h6.alert-title{margin:0;margin-block-end:var(--spc-1, 0.25rem);font-size:inherit;font-weight:var(--alert-title-fw, 600)}[role=alert][data-alert~=info]{--alert-bg: var(--alert-info-bg);--alert-color: var(--alert-info-text);border-color:var(--alert-info-border)}[role=alert][data-alert~=warning]{--alert-bg: var(--alert-warning-bg);--alert-color: var(--alert-warning-text);border-color:var(--alert-warning-border)}[role=alert][data-alert~=error]{--alert-bg: var(--alert-error-bg);--alert-color: var(--alert-error-text);border-color:var(--alert-error-border)}[role=alert][data-alert~=success]{--alert-bg: var(--alert-success-bg);--alert-color: var(--alert-success-text);border-color:var(--alert-success-border)}[role=alert] button[data-btn~=icon]{--btn-bg: transparent;align-items:flex-start}[role=alert][data-variant=filled]{border:none}[role=alert][data-variant=filled][data-alert~=info]{--alert-bg: var(--alert-info-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=warning]{--alert-bg: var(--alert-warning-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=error]{--alert-bg: var(--alert-error-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=success]{--alert-bg: var(--alert-success-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=default]{--alert-bg: #757575;--alert-color: white}[role=alert][data-variant=soft]{border:none}[role=alert] p{font-size:.875rem}
2
2
 
3
- /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2FsZXJ0L2FsZXJ0LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsU0FDRSxpQkFBQSxDQUNBLFNBQUEsQ0FDQSxVQUFBLENBQ0EsU0FBQSxDQUNBLFdBQUEsQ0FDQSxlQUFBLENBQ0EscUJBQUEsQ0FDQSxrQkFBQSxDQUNBLGNBQUEsQ0FHRixhQUVFLDJDQUFBLENBQ0EsbURBQUEsQ0FDQSwrQ0FBQSxDQUdBLHVDQUFBLENBQ0EsK0NBQUEsQ0FDQSwyQ0FBQSxDQUdBLDJDQUFBLENBQ0EsbURBQUEsQ0FDQSwrQ0FBQSxDQUdBLHFDQUFBLENBQ0EsNkNBQUEsQ0FDQSx5Q0FBQSxDQUdBLGlDQUFBLENBRUEsdUNBQUEsQ0FFQSxzREFBQSxDQUNBLCtDQUFBLENBQ0EsMkNBQUEsQ0FDQSwwQ0FBQSxDQUNBLDhDQUFBLENBQ0EscUJBQUEsQ0FDQSxlQUFBLENBQ0EsWUFBQSxDQUNBLGtCQUFBLENBQ0EsdURBQUEsQ0FDQSxrQ0FBQSxDQUdBLHdHQUNFLENBRUYsU0FBQSxDQUNBLHVCQUFBLENBRUEsc0NBQ0UsU0FBQSxDQUNBLDZCQUFBLENBR0YsdUNBbERGLGFBbURJLHlCQUFBLENBQUEsQ0FJRixtQkFDRSw4QkFBQSxDQUNBLGtCQUFBLENBSUYsdUNBQ0UsWUFBQSxDQUdGLHlCQUNFLG9CQUFBLENBQ0Esa0JBQUEsQ0FHRiw0QkFDRSxNQUFBLENBQ0Esb0JBQUEsQ0FHQSx5Q0FDRSxzQ0FBQSxDQUNBLG9CQUFBLENBQ0Esc0NBQUEsQ0FDQSx3Q0FBQSxDQUNBLGVBQUEsQ0FJRix1TkFLRSxRQUFBLENBQ0Esc0NBQUEsQ0FDQSxpQkFBQSxDQUNBLHNDQUFBLENBSUosK0JBQ0UsZ0NBQUEsQ0FDQSxxQ0FBQSxDQUNBLHFDQUFBLENBR0Ysa0NBQ0UsbUNBQUEsQ0FDQSx3Q0FBQSxDQUNBLHdDQUFBLENBR0YsZ0NBQ0UsaUNBQUEsQ0FDQSxzQ0FBQSxDQUNBLHNDQUFBLENBR0Ysa0NBQ0UsbUNBQUEsQ0FDQSx3Q0FBQSxDQUNBLHdDQUFBLENBSUEsb0NBQ0UscUJBQUEsQ0FDQSxzQkFBQSxDQUtKLGtDQUNFLFdBQUEsQ0FFQSxvREFDRSxvQ0FBQSxDQUNBLG9CQUFBLENBR0YsdURBQ0UsdUNBQUEsQ0FDQSxvQkFBQSxDQUdGLHFEQUNFLHFDQUFBLENBQ0Esb0JBQUEsQ0FHRix1REFDRSx1Q0FBQSxDQUNBLG9CQUFBLENBR0YsdURBQ0UsbUJBQUEsQ0FDQSxvQkFBQSxDQUtKLGdDQUNFLFdBQUEsQ0FRRixlQUNFLGlCQUFBIiwiZmlsZSI6ImFsZXJ0Lm1pbi5jc3MifQ== */
3
+ /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2FsZXJ0L2FsZXJ0LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsYUFFRSwyQ0FBQSxDQUNBLG1EQUFBLENBQ0EsK0NBQUEsQ0FHQSx1Q0FBQSxDQUNBLCtDQUFBLENBQ0EsMkNBQUEsQ0FHQSwyQ0FBQSxDQUNBLG1EQUFBLENBQ0EsK0NBQUEsQ0FHQSxxQ0FBQSxDQUNBLDZDQUFBLENBQ0EseUNBQUEsQ0FHQSxpQ0FBQSxDQUVBLHVDQUFBLENBRUEsc0RBQUEsQ0FDQSwrQ0FBQSxDQUNBLDJDQUFBLENBQ0EsMENBQUEsQ0FDQSw4Q0FBQSxDQUNBLHFCQUFBLENBQ0EsZUFBQSxDQUNBLFlBQUEsQ0FDQSxrQkFBQSxDQUNBLHVEQUFBLENBQ0Esa0NBQUEsQ0FHQSx3R0FDRSxDQUVGLFNBQUEsQ0FDQSx1QkFBQSxDQUVBLHNDQUNFLFNBQUEsQ0FDQSw2QkFBQSxDQUdGLHVDQWxERixhQW1ESSx5QkFBQSxDQUFBLENBSUYsbUJBQ0UsOEJBQUEsQ0FDQSxrQkFBQSxDQUlGLHVDQUNFLFlBQUEsQ0FHRix5QkFDRSxvQkFBQSxDQUNBLGtCQUFBLENBR0YsNEJBQ0UsTUFBQSxDQUNBLG9CQUFBLENBR0EseUNBQ0Usc0NBQUEsQ0FDQSxvQkFBQSxDQUNBLHNDQUFBLENBQ0Esd0NBQUEsQ0FDQSxlQUFBLENBSUYsdU5BS0UsUUFBQSxDQUNBLHNDQUFBLENBQ0EsaUJBQUEsQ0FDQSxzQ0FBQSxDQUlKLCtCQUNFLGdDQUFBLENBQ0EscUNBQUEsQ0FDQSxxQ0FBQSxDQUdGLGtDQUNFLG1DQUFBLENBQ0Esd0NBQUEsQ0FDQSx3Q0FBQSxDQUdGLGdDQUNFLGlDQUFBLENBQ0Esc0NBQUEsQ0FDQSxzQ0FBQSxDQUdGLGtDQUNFLG1DQUFBLENBQ0Esd0NBQUEsQ0FDQSx3Q0FBQSxDQUlBLG9DQUNFLHFCQUFBLENBQ0Esc0JBQUEsQ0FLSixrQ0FDRSxXQUFBLENBRUEsb0RBQ0Usb0NBQUEsQ0FDQSxvQkFBQSxDQUdGLHVEQUNFLHVDQUFBLENBQ0Esb0JBQUEsQ0FHRixxREFDRSxxQ0FBQSxDQUNBLG9CQUFBLENBR0YsdURBQ0UsdUNBQUEsQ0FDQSxvQkFBQSxDQUdGLHVEQUNFLG1CQUFBLENBQ0Esb0JBQUEsQ0FLSixnQ0FDRSxXQUFBLENBUUYsZUFDRSxpQkFBQSIsImZpbGUiOiJhbGVydC5taW4uY3NzIn0= */
@@ -1 +1 @@
1
- button[data-icon-btn],.icon-btn{--btn-color: currentColor}button[data-icon-btn~=has-label],.icon-btn[data-icon-btn~=has-label]{gap:.375rem;padding-inline:.75rem}button[data-icon-btn~=has-label] [data-icon-label],.icon-btn[data-icon-btn~=has-label] [data-icon-label]{font-size:var(--btn-fs, 0.875rem);line-height:1;white-space:nowrap}@media(max-width: 48rem){[data-icon-label]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}}/*# sourceMappingURL=icon-button.css.map */
1
+ :root{--icon-btn-size: 3rem;--icon-btn-gap: 0.375rem;--icon-btn-padding-inline: 0.75rem}[data-icon-btn] [data-icon-label],[data-icon-btn] .icon-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;border:0}button[data-icon-btn],button.icon-btn,[data-icon-btn],.icon-btn{--btn-color: currentColor;padding:0;width:var(--icon-btn-size);height:var(--icon-btn-size);display:inline-grid;place-items:center}button[data-icon-btn][data-icon-btn~=has-label],button.icon-btn[data-icon-btn~=has-label],[data-icon-btn][data-icon-btn~=has-label],.icon-btn[data-icon-btn~=has-label]{width:max-content;min-width:var(--icon-btn-size);gap:var(--icon-btn-gap);padding-inline:var(--icon-btn-padding-inline);grid-auto-flow:column}button[data-icon-btn][data-icon-btn~=has-label] [data-icon-label],button[data-icon-btn][data-icon-btn~=has-label] .icon-label,button.icon-btn[data-icon-btn~=has-label] [data-icon-label],button.icon-btn[data-icon-btn~=has-label] .icon-label,[data-icon-btn][data-icon-btn~=has-label] [data-icon-label],[data-icon-btn][data-icon-btn~=has-label] .icon-label,.icon-btn[data-icon-btn~=has-label] [data-icon-label],.icon-btn[data-icon-btn~=has-label] .icon-label{font-size:var(--btn-fs, 0.875rem);line-height:1;white-space:nowrap}@media(min-width: 48rem){[data-icon-btn] [data-icon-label],[data-icon-btn] .icon-label{position:static;width:auto;height:auto;padding:unset;margin:unset;overflow:visible;clip:unset;clip-path:unset;white-space:nowrap;border:unset}}/*# sourceMappingURL=icon-button.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/components/buttons/icon-button.scss"],"names":[],"mappings":"AASA,gCAEE,0BAMF,qEAEE,YACA,sBAEA,yGACE,kCACA,cACA,mBAOJ,yBACE,kBACE,kBACA,UACA,WACA,UACA,YACA,gBACA,sBACA,mBACA","file":"icon-button.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/components/buttons/icon-button.scss"],"names":[],"mappings":"AAQA,MACE,sBACA,yBACA,mCAKF,8DAEE,kBACA,UACA,WACA,UACA,YACA,gBACA,sBACA,qBACA,mBACA,SAOF,gEAIE,0BAEA,UACA,2BACA,4BACA,oBACA,mBAKA,wKACE,kBACA,+BACA,wBACA,8CACA,sBAEA,wcAEE,kCACA,cACA,mBAQN,yBACE,8DAEE,gBACA,WACA,YACA,cACA,aACA,iBACA,WACA,gBACA,mBACA","file":"icon-button.css"}
@@ -1,3 +1,3 @@
1
- button[data-icon-btn],.icon-btn{--btn-color: currentColor}button[data-icon-btn~=has-label],.icon-btn[data-icon-btn~=has-label]{gap:.375rem;padding-inline:.75rem}button[data-icon-btn~=has-label] [data-icon-label],.icon-btn[data-icon-btn~=has-label] [data-icon-label]{font-size:var(--btn-fs, 0.875rem);line-height:1;white-space:nowrap}@media(max-width: 48rem){[data-icon-label]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}}
1
+ :root{--icon-btn-size: 3rem;--icon-btn-gap: 0.375rem;--icon-btn-padding-inline: 0.75rem}[data-icon-btn] [data-icon-label],[data-icon-btn] .icon-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap;border:0}button[data-icon-btn],button.icon-btn,[data-icon-btn],.icon-btn{--btn-color: currentColor;padding:0;width:var(--icon-btn-size);height:var(--icon-btn-size);display:inline-grid;place-items:center}button[data-icon-btn][data-icon-btn~=has-label],button.icon-btn[data-icon-btn~=has-label],[data-icon-btn][data-icon-btn~=has-label],.icon-btn[data-icon-btn~=has-label]{width:-moz-max-content;width:max-content;min-width:var(--icon-btn-size);gap:var(--icon-btn-gap);padding-inline:var(--icon-btn-padding-inline);grid-auto-flow:column}button[data-icon-btn][data-icon-btn~=has-label] [data-icon-label],button[data-icon-btn][data-icon-btn~=has-label] .icon-label,button.icon-btn[data-icon-btn~=has-label] [data-icon-label],button.icon-btn[data-icon-btn~=has-label] .icon-label,[data-icon-btn][data-icon-btn~=has-label] [data-icon-label],[data-icon-btn][data-icon-btn~=has-label] .icon-label,.icon-btn[data-icon-btn~=has-label] [data-icon-label],.icon-btn[data-icon-btn~=has-label] .icon-label{font-size:var(--btn-fs, 0.875rem);line-height:1;white-space:nowrap}@media(min-width: 48rem){[data-icon-btn] [data-icon-label],[data-icon-btn] .icon-label{position:static;width:auto;height:auto;padding:unset;margin:unset;overflow:visible;clip:unset;-webkit-clip-path:unset;clip-path:unset;white-space:nowrap;border:unset}}
2
2
 
3
- /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2J1dHRvbnMvaWNvbi1idXR0b24uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTQSxnQ0FFRSx5QkFBQSxDQU1GLHFFQUVFLFdBQUEsQ0FDQSxxQkFBQSxDQUVBLHlHQUNFLGlDQUFBLENBQ0EsYUFBQSxDQUNBLGtCQUFBLENBT0oseUJBQ0Usa0JBQ0UsaUJBQUEsQ0FDQSxTQUFBLENBQ0EsVUFBQSxDQUNBLFNBQUEsQ0FDQSxXQUFBLENBQ0EsZUFBQSxDQUNBLHFCQUFBLENBQ0Esa0JBQUEsQ0FDQSxRQUFBLENBQUEiLCJmaWxlIjoiaWNvbi1idXR0b24ubWluLmNzcyJ9 */
3
+ /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2J1dHRvbnMvaWNvbi1idXR0b24uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRQSxNQUNFLHFCQUFBLENBQ0Esd0JBQUEsQ0FDQSxrQ0FBQSxDQUtGLDhEQUVFLGlCQUFBLENBQ0EsU0FBQSxDQUNBLFVBQUEsQ0FDQSxTQUFBLENBQ0EsV0FBQSxDQUNBLGVBQUEsQ0FDQSxxQkFBQSxDQUNBLDRCQUFBLENBQUEsb0JBQUEsQ0FDQSxrQkFBQSxDQUNBLFFBQUEsQ0FPRixnRUFJRSx5QkFBQSxDQUVBLFNBQUEsQ0FDQSwwQkFBQSxDQUNBLDJCQUFBLENBQ0EsbUJBQUEsQ0FDQSxrQkFBQSxDQUtBLHdLQUNFLHNCQUFBLENBQUEsaUJBQUEsQ0FDQSw4QkFBQSxDQUNBLHVCQUFBLENBQ0EsNkNBQUEsQ0FDQSxxQkFBQSxDQUVBLHdjQUVFLGlDQUFBLENBQ0EsYUFBQSxDQUNBLGtCQUFBLENBUU4seUJBQ0UsOERBRUUsZUFBQSxDQUNBLFVBQUEsQ0FDQSxXQUFBLENBQ0EsYUFBQSxDQUNBLFlBQUEsQ0FDQSxnQkFBQSxDQUNBLFVBQUEsQ0FDQSx1QkFBQSxDQUFBLGVBQUEsQ0FDQSxrQkFBQSxDQUNBLFlBQUEsQ0FBQSIsImZpbGUiOiJpY29uLWJ1dHRvbi5taW4uY3NzIn0= */
@@ -1 +1 @@
1
- :root{--dialog-min-width: max(20rem, 80%);--dialog-gap: 0.625rem;--dialog-border-color: var(--color-border);--dialog-border-width: thin;--dialog-border-style: solid;--dialog-border-radius: var(--border-radius);--dialog-padding: 1.5rem;--dialog-padding-inline: 1rem;--dialog-close-color: var(--color-text-secondary);--dialog-button-bg: transparent;--dialog-button-border: transparent thin solid;--dialog-button-hover-bg: var(--color-surface-secondary);--dialog-display: flex;--dialog-flex-direction: column;--dialog-focus-color: var(--color-focus);--dialog-focus-width: 0.125rem;--dialog-focus-offset: 0.125rem;--dialog-focus-outline: var(--dialog-focus-width) solid var(--dialog-focus-color)}@media(prefers-contrast: high){:root{--dialog-border-color: currentColor;--dialog-border-width: 0.125rem;--dialog-close-color: currentColor;--dialog-button-border: currentColor 0.125rem solid;--dialog-focus-width: 0.1875rem}}dialog{width:var(--dialog-min-width);min-width:var(--dialog-min-width);gap:var(--dialog-gap);border:var(--dialog-border-color) var(--dialog-border-width) solid;border-radius:var(--dialog-border-radius);padding:var(--dialog-padding);padding-block-start:var(--dialog-padding)}dialog:focus-visible{outline:var(--dialog-focus-outline);outline-offset:var(--dialog-focus-offset)}dialog[open]{display:var(--dialog-display);flex-direction:var(--dialog-flex-direction);gap:var(--dialog-gap)}dialog section{width:100%;display:flex;justify-content:start;gap:var(--dialog-gap);flex-direction:var(--dialog-flex-direction);margin-block-start:0;--sect-y: 0}.dialog-header{display:flex;justify-content:space-between;align-items:center;width:100%;min-width:100%}.dialog-header h3{margin-block-start:0;margin-block-end:0}.dialog-header .dialog-close{margin-block-end:0}.dialog-header button[type=button]{background-color:var(--dialog-button-bg);border:var(--dialog-button-border);cursor:pointer}.dialog-header button[type=button]:hover{border-color:var(--dialog-close-color);background-color:var(--dialog-button-hover-bg)}.dialog-header button[type=button]:focus-visible{outline:var(--dialog-focus-outline);outline-offset:var(--dialog-focus-offset);border-color:var(--dialog-focus-color);background-color:var(--dialog-button-hover-bg)}.dialog-header button[type=button]:focus:not(:focus-visible){outline:none}.alert-dialog-actions,.dialog-footer{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:var(--dialog-footer-justify, flex-end);gap:var(--dialog-gap);width:100%}.alert-dialog-actions button:focus-visible,.dialog-footer button:focus-visible{outline:var(--dialog-focus-outline);outline-offset:var(--dialog-focus-offset)}.alert-dialog-actions button:focus:not(:focus-visible),.dialog-footer button:focus:not(:focus-visible){outline:none}/*# sourceMappingURL=dialog.css.map */
1
+ :root{--dialog-min-width: max(20rem, 80%);--dialog-gap: 0.625rem;--dialog-border-color: var(--color-border);--dialog-border-width: thin;--dialog-border-style: solid;--dialog-border-radius: var(--border-radius);--dialog-padding: 1.5rem;--dialog-padding-inline: 1rem;--dialog-close-color: var(--color-text-secondary);--dialog-button-bg: transparent;--dialog-button-border: transparent thin solid;--dialog-button-hover-bg: var(--color-surface-secondary);--dialog-display: flex;--dialog-flex-direction: column;--dialog-focus-color: var(--color-focus);--dialog-focus-width: 0.125rem;--dialog-focus-offset: 0.125rem;--dialog-focus-outline: var(--dialog-focus-width) solid var(--dialog-focus-color)}@media(prefers-contrast: high){:root{--dialog-border-color: currentColor;--dialog-border-width: 0.125rem;--dialog-close-color: currentColor;--dialog-button-border: currentColor 0.125rem solid;--dialog-focus-width: 0.1875rem}}dialog{width:var(--dialog-min-width);min-width:var(--dialog-min-width);gap:var(--dialog-gap);border:var(--dialog-border-color) var(--dialog-border-width) solid;border-radius:var(--dialog-border-radius);padding:var(--dialog-padding);padding-block-start:var(--dialog-padding)}dialog:focus-visible{outline:var(--dialog-focus-outline);outline-offset:var(--dialog-focus-offset)}dialog[open]{display:var(--dialog-display);flex-direction:var(--dialog-flex-direction);gap:var(--dialog-gap)}dialog section{width:100%;display:flex;justify-content:start;gap:var(--dialog-gap);flex-direction:var(--dialog-flex-direction);margin-block-start:0;--sect-y: 0}.dialog-header{display:flex;justify-content:space-between;align-items:center;width:100%;min-width:100%}.dialog-header h3{margin-block-start:0;margin-block-end:0}.dialog-header .dialog-close{margin-block-end:0}.dialog-header button[type=button]{background-color:var(--dialog-button-bg);border:var(--dialog-button-border);color:var(--dialog-close-color);cursor:pointer}.dialog-header button[type=button]:hover{border-color:var(--dialog-close-color);background-color:var(--dialog-button-hover-bg)}.dialog-header button[type=button]:focus-visible{outline:var(--dialog-focus-outline);outline-offset:var(--dialog-focus-offset);border-color:var(--dialog-focus-color);background-color:var(--dialog-button-hover-bg)}.dialog-header button[type=button]:focus:not(:focus-visible){outline:none}.alert-dialog-actions,.dialog-footer{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:var(--dialog-footer-justify, flex-end);gap:var(--dialog-gap);width:100%}.alert-dialog-actions button:focus-visible,.dialog-footer button:focus-visible{outline:var(--dialog-focus-outline);outline-offset:var(--dialog-focus-offset)}.alert-dialog-actions button:focus:not(:focus-visible),.dialog-footer button:focus:not(:focus-visible){outline:none}/*# sourceMappingURL=dialog.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/components/dialog/dialog.scss"],"names":[],"mappings":"AAAA,MACE,oCACA,uBACA,2CACA,4BACA,6BACA,6CACA,yBACA,8BACA,kDACA,gCACA,+CACA,yDACA,uBACA,gCAGA,yCACA,+BACA,gCACA,kFAIF,+BACE,MACE,oCACA,gCACA,mCACA,oDACA,iCAIJ,OACE,8BACA,kCACA,sBACA,mEACA,0CACA,8BACA,0CAGA,qBACE,oCACA,0CAGF,aACE,8BACA,4CACA,sBAGF,eACE,WACA,aACA,sBACA,sBACA,4CACA,qBACA,YAIJ,eACE,aACA,8BACA,mBACA,WACA,eAEA,kBACE,qBACA,mBAGF,6BACE,mBAGF,mCACE,yCACA,mCACA,eAEA,yCACE,uCACA,+CAIF,iDACE,oCACA,0CACA,uCACA,+CAIF,6DACE,aAKN,qCAEE,aACA,mBACA,eACA,uDACA,sBACA,WAGA,+EACE,oCACA,0CAGF,uGACE","file":"dialog.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/components/dialog/dialog.scss"],"names":[],"mappings":"AAAA,MACE,oCACA,uBACA,2CACA,4BACA,6BACA,6CACA,yBACA,8BACA,kDACA,gCACA,+CACA,yDACA,uBACA,gCAGA,yCACA,+BACA,gCACA,kFAIF,+BACE,MACE,oCACA,gCACA,mCACA,oDACA,iCAIJ,OACE,8BACA,kCACA,sBACA,mEACA,0CACA,8BACA,0CAGA,qBACE,oCACA,0CAGF,aACE,8BACA,4CACA,sBAGF,eACE,WACA,aACA,sBACA,sBACA,4CACA,qBACA,YAIJ,eACE,aACA,8BACA,mBACA,WACA,eAEA,kBACE,qBACA,mBAGF,6BACE,mBAGF,mCACE,yCACA,mCACA,gCACA,eAEA,yCACE,uCACA,+CAIF,iDACE,oCACA,0CACA,uCACA,+CAIF,6DACE,aAKN,qCAEE,aACA,mBACA,eACA,uDACA,sBACA,WAGA,+EACE,oCACA,0CAGF,uGACE","file":"dialog.css"}
@@ -1,105 +1,2 @@
1
- import React, { ReactNode, CSSProperties } from 'react';
2
-
3
- /**
4
- * Base properties shared by all dialog variants.
5
- *
6
- * @property {string} dialogTitle - The title displayed in the dialog header
7
- * @property {string} [dialogLabel] - Optional accessible label for the dialog (aria-label)
8
- * @property {ReactNode} children - Content to be displayed inside the dialog body
9
- * @property {string} [className] - Additional CSS classes to apply to the dialog
10
- * @property {CSSProperties} [styles] - Inline styles to apply to the dialog element
11
- */
12
- interface BaseDialogProps {
13
- /** The title displayed in the dialog header */
14
- dialogTitle: string;
15
- /** Optional accessible label for the dialog (aria-label) */
16
- dialogLabel?: string;
17
- /** Content to be displayed inside the dialog body */
18
- children: ReactNode;
19
- /** Additional CSS classes to apply to the dialog */
20
- className?: string;
21
- /** Inline styles to apply to the dialog element */
22
- styles?: CSSProperties;
23
- }
24
- /**
25
- * Props for the controlled Dialog component.
26
- * Use this when you want to manage dialog state externally.
27
- *
28
- * @extends BaseDialogProps
29
- * @property {boolean} isOpen - Controls whether the dialog is currently open
30
- * @property {(open: boolean) => void} onOpenChange - Callback fired when dialog open state should change
31
- * @property {boolean} [isAlertDialog=false] - If true, renders as non-modal inline alert using dialog.show()
32
- * @property {() => void} [onClose] - Deprecated: Use onOpenChange instead. Called when dialog closes.
33
- * @property {() => void | Promise<void>} [onConfirm] - Callback fired when confirm button is clicked
34
- * @property {string} [confirmLabel="Confirm"] - Text label for the confirm button
35
- * @property {string} [cancelLabel="Cancel"] - Text label for the cancel button
36
- * @property {boolean} [hideFooter=false] - If true, hides the dialog footer with action buttons
37
- */
38
- interface DialogProps extends BaseDialogProps {
39
- /** Controls whether the dialog is currently open (controlled component) */
40
- isOpen: boolean;
41
- /** Callback fired when dialog open state should change */
42
- onOpenChange: (open: boolean) => void;
43
- /** If true, renders as non-modal inline alert using dialog.show() instead of dialog.showModal() */
44
- isAlertDialog?: boolean;
45
- /** @deprecated Use onOpenChange instead. Called when dialog closes. */
46
- onClose?: () => void;
47
- /** Callback fired when confirm button is clicked */
48
- onConfirm?: () => void | Promise<void>;
49
- /** Text label for the confirm button */
50
- confirmLabel?: string;
51
- /** Text label for the cancel button */
52
- cancelLabel?: string;
53
- /** If true, hides the dialog footer with action buttons */
54
- hideFooter?: boolean;
55
- }
56
-
57
- /**
58
- * A controlled dialog component that supports both modal and non-modal (inline alert) modes.
59
- *
60
- * **Modal Dialog** (default): Uses native `<dialog>` element with `.showModal()` which provides:
61
- * - Automatic focus trap (Tab cycles within dialog)
62
- * - Escape key closes dialog (native behavior)
63
- * - Backdrop overlay with click-to-close
64
- * - Inert background (page content becomes non-interactive)
65
- *
66
- * **Inline Alert Dialog** (`isAlertDialog={true}`): Uses `.show()` for non-modal inline alerts:
67
- * - No focus trap (page remains interactive)
68
- * - No escape key behavior
69
- * - Positioned inline in page flow
70
- * - User must explicitly close with button
71
- *
72
- * @component
73
- * @example
74
- * ```tsx
75
- * // Controlled usage
76
- * const [open, setOpen] = useState(false);
77
- * <Dialog
78
- * isOpen={open}
79
- * onOpenChange={setOpen}
80
- * dialogTitle="Confirm Delete"
81
- * >
82
- * Are you sure you want to delete this item?
83
- * </Dialog>
84
- * ```
85
- *
86
- * @param {DialogProps} props - Component props
87
- * @param {boolean} props.isOpen - Controls whether the dialog is currently open
88
- * @param {(open: boolean) => void} props.onOpenChange - Callback fired when dialog open state changes
89
- * @param {string} props.dialogTitle - The title displayed in the dialog header
90
- * @param {boolean} [props.isAlertDialog=false] - If true, renders as non-modal inline alert
91
- * @param {() => void} [props.onClose] - Deprecated: Use onOpenChange. Called when dialog closes.
92
- * @param {ReactNode} props.children - Content to display inside the dialog body
93
- * @param {() => void | Promise<void>} [props.onConfirm] - Callback fired when confirm button is clicked
94
- * @param {string} [props.confirmLabel="Confirm"] - Text label for confirm button
95
- * @param {string} [props.cancelLabel="Cancel"] - Text label for cancel button
96
- * @param {boolean} [props.hideFooter=false] - If true, hides the footer with action buttons
97
- * @param {string} [props.className] - Additional CSS classes to apply
98
- * @param {string} [props.dialogLabel] - Optional aria-label for the dialog
99
- * @param {CSSProperties} [props.styles] - Inline styles to apply to dialog element
100
- * @returns {JSX.Element} A controlled dialog component
101
- */
102
- declare const Dialog: React.FC<DialogProps>;
103
- declare const _default: React.NamedExoticComponent<DialogProps>;
104
-
105
- export { Dialog, _default as default };
1
+ import 'react';
2
+ export { a as Dialog, _ as default } from '../../dialog-6c6b3588.js';
@@ -1,105 +1,2 @@
1
- import React, { ReactNode, CSSProperties } from 'react';
2
-
3
- /**
4
- * Base properties shared by all dialog variants.
5
- *
6
- * @property {string} dialogTitle - The title displayed in the dialog header
7
- * @property {string} [dialogLabel] - Optional accessible label for the dialog (aria-label)
8
- * @property {ReactNode} children - Content to be displayed inside the dialog body
9
- * @property {string} [className] - Additional CSS classes to apply to the dialog
10
- * @property {CSSProperties} [styles] - Inline styles to apply to the dialog element
11
- */
12
- interface BaseDialogProps {
13
- /** The title displayed in the dialog header */
14
- dialogTitle: string;
15
- /** Optional accessible label for the dialog (aria-label) */
16
- dialogLabel?: string;
17
- /** Content to be displayed inside the dialog body */
18
- children: ReactNode;
19
- /** Additional CSS classes to apply to the dialog */
20
- className?: string;
21
- /** Inline styles to apply to the dialog element */
22
- styles?: CSSProperties;
23
- }
24
- /**
25
- * Props for the controlled Dialog component.
26
- * Use this when you want to manage dialog state externally.
27
- *
28
- * @extends BaseDialogProps
29
- * @property {boolean} isOpen - Controls whether the dialog is currently open
30
- * @property {(open: boolean) => void} onOpenChange - Callback fired when dialog open state should change
31
- * @property {boolean} [isAlertDialog=false] - If true, renders as non-modal inline alert using dialog.show()
32
- * @property {() => void} [onClose] - Deprecated: Use onOpenChange instead. Called when dialog closes.
33
- * @property {() => void | Promise<void>} [onConfirm] - Callback fired when confirm button is clicked
34
- * @property {string} [confirmLabel="Confirm"] - Text label for the confirm button
35
- * @property {string} [cancelLabel="Cancel"] - Text label for the cancel button
36
- * @property {boolean} [hideFooter=false] - If true, hides the dialog footer with action buttons
37
- */
38
- interface DialogProps extends BaseDialogProps {
39
- /** Controls whether the dialog is currently open (controlled component) */
40
- isOpen: boolean;
41
- /** Callback fired when dialog open state should change */
42
- onOpenChange: (open: boolean) => void;
43
- /** If true, renders as non-modal inline alert using dialog.show() instead of dialog.showModal() */
44
- isAlertDialog?: boolean;
45
- /** @deprecated Use onOpenChange instead. Called when dialog closes. */
46
- onClose?: () => void;
47
- /** Callback fired when confirm button is clicked */
48
- onConfirm?: () => void | Promise<void>;
49
- /** Text label for the confirm button */
50
- confirmLabel?: string;
51
- /** Text label for the cancel button */
52
- cancelLabel?: string;
53
- /** If true, hides the dialog footer with action buttons */
54
- hideFooter?: boolean;
55
- }
56
-
57
- /**
58
- * A controlled dialog component that supports both modal and non-modal (inline alert) modes.
59
- *
60
- * **Modal Dialog** (default): Uses native `<dialog>` element with `.showModal()` which provides:
61
- * - Automatic focus trap (Tab cycles within dialog)
62
- * - Escape key closes dialog (native behavior)
63
- * - Backdrop overlay with click-to-close
64
- * - Inert background (page content becomes non-interactive)
65
- *
66
- * **Inline Alert Dialog** (`isAlertDialog={true}`): Uses `.show()` for non-modal inline alerts:
67
- * - No focus trap (page remains interactive)
68
- * - No escape key behavior
69
- * - Positioned inline in page flow
70
- * - User must explicitly close with button
71
- *
72
- * @component
73
- * @example
74
- * ```tsx
75
- * // Controlled usage
76
- * const [open, setOpen] = useState(false);
77
- * <Dialog
78
- * isOpen={open}
79
- * onOpenChange={setOpen}
80
- * dialogTitle="Confirm Delete"
81
- * >
82
- * Are you sure you want to delete this item?
83
- * </Dialog>
84
- * ```
85
- *
86
- * @param {DialogProps} props - Component props
87
- * @param {boolean} props.isOpen - Controls whether the dialog is currently open
88
- * @param {(open: boolean) => void} props.onOpenChange - Callback fired when dialog open state changes
89
- * @param {string} props.dialogTitle - The title displayed in the dialog header
90
- * @param {boolean} [props.isAlertDialog=false] - If true, renders as non-modal inline alert
91
- * @param {() => void} [props.onClose] - Deprecated: Use onOpenChange. Called when dialog closes.
92
- * @param {ReactNode} props.children - Content to display inside the dialog body
93
- * @param {() => void | Promise<void>} [props.onConfirm] - Callback fired when confirm button is clicked
94
- * @param {string} [props.confirmLabel="Confirm"] - Text label for confirm button
95
- * @param {string} [props.cancelLabel="Cancel"] - Text label for cancel button
96
- * @param {boolean} [props.hideFooter=false] - If true, hides the footer with action buttons
97
- * @param {string} [props.className] - Additional CSS classes to apply
98
- * @param {string} [props.dialogLabel] - Optional aria-label for the dialog
99
- * @param {CSSProperties} [props.styles] - Inline styles to apply to dialog element
100
- * @returns {JSX.Element} A controlled dialog component
101
- */
102
- declare const Dialog: React.FC<DialogProps>;
103
- declare const _default: React.NamedExoticComponent<DialogProps>;
104
-
105
- export { Dialog, _default as default };
1
+ import 'react';
2
+ export { a as Dialog, _ as default } from '../../dialog-6c6b3588.js';
@@ -1,3 +1,3 @@
1
- :root{--dialog-min-width: max(20rem, 80%);--dialog-gap: 0.625rem;--dialog-border-color: var(--color-border);--dialog-border-width: thin;--dialog-border-style: solid;--dialog-border-radius: var(--border-radius);--dialog-padding: 1.5rem;--dialog-padding-inline: 1rem;--dialog-close-color: var(--color-text-secondary);--dialog-button-bg: transparent;--dialog-button-border: transparent thin solid;--dialog-button-hover-bg: var(--color-surface-secondary);--dialog-display: flex;--dialog-flex-direction: column;--dialog-focus-color: var(--color-focus);--dialog-focus-width: 0.125rem;--dialog-focus-offset: 0.125rem;--dialog-focus-outline: var(--dialog-focus-width) solid var(--dialog-focus-color)}@media(prefers-contrast: high){:root{--dialog-border-color: currentColor;--dialog-border-width: 0.125rem;--dialog-close-color: currentColor;--dialog-button-border: currentColor 0.125rem solid;--dialog-focus-width: 0.1875rem}}dialog{width:var(--dialog-min-width);min-width:var(--dialog-min-width);gap:var(--dialog-gap);border:var(--dialog-border-color) var(--dialog-border-width) solid;border-radius:var(--dialog-border-radius);padding:var(--dialog-padding);padding-block-start:var(--dialog-padding)}dialog:focus-visible{outline:var(--dialog-focus-outline);outline-offset:var(--dialog-focus-offset)}dialog[open]{display:var(--dialog-display);flex-direction:var(--dialog-flex-direction);gap:var(--dialog-gap)}dialog section{width:100%;display:flex;justify-content:start;gap:var(--dialog-gap);flex-direction:var(--dialog-flex-direction);margin-block-start:0;--sect-y: 0}.dialog-header{display:flex;justify-content:space-between;align-items:center;width:100%;min-width:100%}.dialog-header h3{margin-block-start:0;margin-block-end:0}.dialog-header .dialog-close{margin-block-end:0}.dialog-header button[type=button]{background-color:var(--dialog-button-bg);border:var(--dialog-button-border);cursor:pointer}.dialog-header button[type=button]:hover{border-color:var(--dialog-close-color);background-color:var(--dialog-button-hover-bg)}.dialog-header button[type=button]:focus-visible{outline:var(--dialog-focus-outline);outline-offset:var(--dialog-focus-offset);border-color:var(--dialog-focus-color);background-color:var(--dialog-button-hover-bg)}.dialog-header button[type=button]:focus:not(:focus-visible){outline:none}.alert-dialog-actions,.dialog-footer{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:var(--dialog-footer-justify, flex-end);gap:var(--dialog-gap);width:100%}.alert-dialog-actions button:focus-visible,.dialog-footer button:focus-visible{outline:var(--dialog-focus-outline);outline-offset:var(--dialog-focus-offset)}.alert-dialog-actions button:focus:not(:focus-visible),.dialog-footer button:focus:not(:focus-visible){outline:none}
1
+ :root{--dialog-min-width: max(20rem, 80%);--dialog-gap: 0.625rem;--dialog-border-color: var(--color-border);--dialog-border-width: thin;--dialog-border-style: solid;--dialog-border-radius: var(--border-radius);--dialog-padding: 1.5rem;--dialog-padding-inline: 1rem;--dialog-close-color: var(--color-text-secondary);--dialog-button-bg: transparent;--dialog-button-border: transparent thin solid;--dialog-button-hover-bg: var(--color-surface-secondary);--dialog-display: flex;--dialog-flex-direction: column;--dialog-focus-color: var(--color-focus);--dialog-focus-width: 0.125rem;--dialog-focus-offset: 0.125rem;--dialog-focus-outline: var(--dialog-focus-width) solid var(--dialog-focus-color)}@media(prefers-contrast: high){:root{--dialog-border-color: currentColor;--dialog-border-width: 0.125rem;--dialog-close-color: currentColor;--dialog-button-border: currentColor 0.125rem solid;--dialog-focus-width: 0.1875rem}}dialog{width:var(--dialog-min-width);min-width:var(--dialog-min-width);gap:var(--dialog-gap);border:var(--dialog-border-color) var(--dialog-border-width) solid;border-radius:var(--dialog-border-radius);padding:var(--dialog-padding);padding-block-start:var(--dialog-padding)}dialog:focus-visible{outline:var(--dialog-focus-outline);outline-offset:var(--dialog-focus-offset)}dialog[open]{display:var(--dialog-display);flex-direction:var(--dialog-flex-direction);gap:var(--dialog-gap)}dialog section{width:100%;display:flex;justify-content:start;gap:var(--dialog-gap);flex-direction:var(--dialog-flex-direction);margin-block-start:0;--sect-y: 0}.dialog-header{display:flex;justify-content:space-between;align-items:center;width:100%;min-width:100%}.dialog-header h3{margin-block-start:0;margin-block-end:0}.dialog-header .dialog-close{margin-block-end:0}.dialog-header button[type=button]{background-color:var(--dialog-button-bg);border:var(--dialog-button-border);color:var(--dialog-close-color);cursor:pointer}.dialog-header button[type=button]:hover{border-color:var(--dialog-close-color);background-color:var(--dialog-button-hover-bg)}.dialog-header button[type=button]:focus-visible{outline:var(--dialog-focus-outline);outline-offset:var(--dialog-focus-offset);border-color:var(--dialog-focus-color);background-color:var(--dialog-button-hover-bg)}.dialog-header button[type=button]:focus:not(:focus-visible){outline:none}.alert-dialog-actions,.dialog-footer{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:var(--dialog-footer-justify, flex-end);gap:var(--dialog-gap);width:100%}.alert-dialog-actions button:focus-visible,.dialog-footer button:focus-visible{outline:var(--dialog-focus-outline);outline-offset:var(--dialog-focus-offset)}.alert-dialog-actions button:focus:not(:focus-visible),.dialog-footer button:focus:not(:focus-visible){outline:none}
2
2
 
3
- /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2RpYWxvZy9kaWFsb2cuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUNFLG1DQUFBLENBQ0Esc0JBQUEsQ0FDQSwwQ0FBQSxDQUNBLDJCQUFBLENBQ0EsNEJBQUEsQ0FDQSw0Q0FBQSxDQUNBLHdCQUFBLENBQ0EsNkJBQUEsQ0FDQSxpREFBQSxDQUNBLCtCQUFBLENBQ0EsOENBQUEsQ0FDQSx3REFBQSxDQUNBLHNCQUFBLENBQ0EsK0JBQUEsQ0FHQSx3Q0FBQSxDQUNBLDhCQUFBLENBQ0EsK0JBQUEsQ0FDQSxpRkFBQSxDQUlGLCtCQUNFLE1BQ0UsbUNBQUEsQ0FDQSwrQkFBQSxDQUNBLGtDQUFBLENBQ0EsbURBQUEsQ0FDQSwrQkFBQSxDQUFBLENBSUosT0FDRSw2QkFBQSxDQUNBLGlDQUFBLENBQ0EscUJBQUEsQ0FDQSxrRUFBQSxDQUNBLHlDQUFBLENBQ0EsNkJBQUEsQ0FDQSx5Q0FBQSxDQUdBLHFCQUNFLG1DQUFBLENBQ0EseUNBQUEsQ0FHRixhQUNFLDZCQUFBLENBQ0EsMkNBQUEsQ0FDQSxxQkFBQSxDQUdGLGVBQ0UsVUFBQSxDQUNBLFlBQUEsQ0FDQSxxQkFBQSxDQUNBLHFCQUFBLENBQ0EsMkNBQUEsQ0FDQSxvQkFBQSxDQUNBLFdBQUEsQ0FJSixlQUNFLFlBQUEsQ0FDQSw2QkFBQSxDQUNBLGtCQUFBLENBQ0EsVUFBQSxDQUNBLGNBQUEsQ0FFQSxrQkFDRSxvQkFBQSxDQUNBLGtCQUFBLENBR0YsNkJBQ0Usa0JBQUEsQ0FHRixtQ0FDRSx3Q0FBQSxDQUNBLGtDQUFBLENBQ0EsY0FBQSxDQUVBLHlDQUNFLHNDQUFBLENBQ0EsOENBQUEsQ0FJRixpREFDRSxtQ0FBQSxDQUNBLHlDQUFBLENBQ0Esc0NBQUEsQ0FDQSw4Q0FBQSxDQUlGLDZEQUNFLFlBQUEsQ0FLTixxQ0FFRSxZQUFBLENBQ0Esa0JBQUEsQ0FDQSxjQUFBLENBQ0Esc0RBQUEsQ0FDQSxxQkFBQSxDQUNBLFVBQUEsQ0FHQSwrRUFDRSxtQ0FBQSxDQUNBLHlDQUFBLENBR0YsdUdBQ0UsWUFBQSIsImZpbGUiOiJkaWFsb2cubWluLmNzcyJ9 */
3
+ /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2RpYWxvZy9kaWFsb2cuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUNFLG1DQUFBLENBQ0Esc0JBQUEsQ0FDQSwwQ0FBQSxDQUNBLDJCQUFBLENBQ0EsNEJBQUEsQ0FDQSw0Q0FBQSxDQUNBLHdCQUFBLENBQ0EsNkJBQUEsQ0FDQSxpREFBQSxDQUNBLCtCQUFBLENBQ0EsOENBQUEsQ0FDQSx3REFBQSxDQUNBLHNCQUFBLENBQ0EsK0JBQUEsQ0FHQSx3Q0FBQSxDQUNBLDhCQUFBLENBQ0EsK0JBQUEsQ0FDQSxpRkFBQSxDQUlGLCtCQUNFLE1BQ0UsbUNBQUEsQ0FDQSwrQkFBQSxDQUNBLGtDQUFBLENBQ0EsbURBQUEsQ0FDQSwrQkFBQSxDQUFBLENBSUosT0FDRSw2QkFBQSxDQUNBLGlDQUFBLENBQ0EscUJBQUEsQ0FDQSxrRUFBQSxDQUNBLHlDQUFBLENBQ0EsNkJBQUEsQ0FDQSx5Q0FBQSxDQUdBLHFCQUNFLG1DQUFBLENBQ0EseUNBQUEsQ0FHRixhQUNFLDZCQUFBLENBQ0EsMkNBQUEsQ0FDQSxxQkFBQSxDQUdGLGVBQ0UsVUFBQSxDQUNBLFlBQUEsQ0FDQSxxQkFBQSxDQUNBLHFCQUFBLENBQ0EsMkNBQUEsQ0FDQSxvQkFBQSxDQUNBLFdBQUEsQ0FJSixlQUNFLFlBQUEsQ0FDQSw2QkFBQSxDQUNBLGtCQUFBLENBQ0EsVUFBQSxDQUNBLGNBQUEsQ0FFQSxrQkFDRSxvQkFBQSxDQUNBLGtCQUFBLENBR0YsNkJBQ0Usa0JBQUEsQ0FHRixtQ0FDRSx3Q0FBQSxDQUNBLGtDQUFBLENBQ0EsK0JBQUEsQ0FDQSxjQUFBLENBRUEseUNBQ0Usc0NBQUEsQ0FDQSw4Q0FBQSxDQUlGLGlEQUNFLG1DQUFBLENBQ0EseUNBQUEsQ0FDQSxzQ0FBQSxDQUNBLDhDQUFBLENBSUYsNkRBQ0UsWUFBQSxDQUtOLHFDQUVFLFlBQUEsQ0FDQSxrQkFBQSxDQUNBLGNBQUEsQ0FDQSxzREFBQSxDQUNBLHFCQUFBLENBQ0EsVUFBQSxDQUdBLCtFQUNFLG1DQUFBLENBQ0EseUNBQUEsQ0FHRix1R0FDRSxZQUFBIiwiZmlsZSI6ImRpYWxvZy5taW4uY3NzIn0= */
@@ -1,4 +1,4 @@
1
- export { a as Icon, b as IconProps, a as default } from '../../icons-2c09535c.js';
1
+ export { a as Icon, b as IconProps, a as default } from '../../icons-48788561.js';
2
2
  import 'react';
3
3
  import '../../ui-993fc2e2.js';
4
4
  import '../../component-props-50e69975.js';
@@ -1,4 +1,4 @@
1
- export { a as Icon, b as IconProps, a as default } from '../../icons-2c09535c.js';
1
+ export { a as Icon, b as IconProps, a as default } from '../../icons-48788561.js';
2
2
  import 'react';
3
3
  import '../../ui-993fc2e2.js';
4
4
  import '../../component-props-50e69975.js';
@@ -0,0 +1,150 @@
1
+ import React, { ReactElement, ReactNode, CSSProperties } from 'react';
2
+
3
+ /**
4
+ * Base properties shared by all dialog variants.
5
+ *
6
+ * @property {string} dialogTitle - The title displayed in the dialog header
7
+ * @property {string} [dialogLabel] - Optional accessible label for the dialog (aria-label)
8
+ * @property {ReactNode} children - Content to be displayed inside the dialog body
9
+ * @property {string} [className] - Additional CSS classes to apply to the dialog
10
+ * @property {CSSProperties} [styles] - Inline styles to apply to the dialog element
11
+ */
12
+ interface BaseDialogProps {
13
+ /** The title displayed in the dialog header */
14
+ dialogTitle: string;
15
+ /** Optional accessible label for the dialog (aria-label) */
16
+ dialogLabel?: string;
17
+ /** Content to be displayed inside the dialog body */
18
+ children: ReactNode;
19
+ /** Additional CSS classes to apply to the dialog */
20
+ className?: string;
21
+ /** Inline styles to apply to the dialog element */
22
+ styles?: CSSProperties;
23
+ }
24
+ /**
25
+ * Props for the controlled Dialog component.
26
+ * Use this when you want to manage dialog state externally.
27
+ *
28
+ * @extends BaseDialogProps
29
+ * @property {boolean} isOpen - Controls whether the dialog is currently open
30
+ * @property {(open: boolean) => void} onOpenChange - Callback fired when dialog open state should change
31
+ * @property {boolean} [isAlertDialog=false] - If true, renders as non-modal inline alert using dialog.show()
32
+ * @property {() => void} [onClose] - Deprecated: Use onOpenChange instead. Called when dialog closes.
33
+ * @property {() => void | Promise<void>} [onConfirm] - Callback fired when confirm button is clicked
34
+ * @property {string} [confirmLabel="Confirm"] - Text label for the confirm button
35
+ * @property {string} [cancelLabel="Cancel"] - Text label for the cancel button
36
+ * @property {boolean} [hideFooter=false] - If true, hides the dialog footer with action buttons
37
+ */
38
+ interface DialogProps extends BaseDialogProps {
39
+ /** Controls whether the dialog is currently open (controlled component) */
40
+ isOpen: boolean;
41
+ /** Callback fired when dialog open state should change */
42
+ onOpenChange: (open: boolean) => void;
43
+ /** If true, renders as non-modal inline alert using dialog.show() instead of dialog.showModal() */
44
+ isAlertDialog?: boolean;
45
+ /** @deprecated Use onOpenChange instead. Called when dialog closes. */
46
+ onClose?: () => void;
47
+ /** Callback fired when confirm button is clicked */
48
+ onConfirm?: () => void | Promise<void>;
49
+ /** Text label for the confirm button */
50
+ confirmLabel?: string;
51
+ /** Text label for the cancel button */
52
+ cancelLabel?: string;
53
+ /** If true, hides the dialog footer with action buttons */
54
+ hideFooter?: boolean;
55
+ }
56
+ /**
57
+ * Props for the DialogModal wrapper component.
58
+ * This component manages dialog state internally and provides a trigger button.
59
+ * Use this for simple cases where you don't need external state management.
60
+ *
61
+ * @extends BaseDialogProps
62
+ * @property {boolean} [isAlertDialog=false] - If true, renders as non-modal inline alert
63
+ * @property {() => void} [onClose] - Callback fired when dialog is closed
64
+ * @property {() => void | Promise<void>} [onConfirm] - Callback fired when confirm button is clicked
65
+ * @property {string} [confirmLabel="Confirm"] - Text label for the confirm button
66
+ * @property {string} [cancelLabel="Cancel"] - Text label for the cancel button
67
+ * @property {boolean} [hideFooter=false] - If true, hides the dialog footer
68
+ * @property {string} [btnLabel="Open Dialog"] - Text label for the trigger button
69
+ * @property {"sm" | "md" | "lg"} [btnSize="sm"] - Size variant for the trigger button
70
+ * @property {() => void} [btnOnClick] - Callback fired when trigger button is clicked (before opening)
71
+ * @property {ReactElement} [icon] - Optional icon element. When provided, renders IconButton instead of Button as trigger.
72
+ */
73
+ interface DialogModalProps extends BaseDialogProps {
74
+ /** If true, renders as non-modal inline alert using dialog.show() */
75
+ isAlertDialog?: boolean;
76
+ /** Callback fired when dialog is closed */
77
+ onClose?: () => void;
78
+ /** Callback fired when confirm button is clicked */
79
+ onConfirm?: () => void | Promise<void>;
80
+ /** Text label for the confirm button */
81
+ confirmLabel?: string;
82
+ /** Text label for the cancel button */
83
+ cancelLabel?: string;
84
+ /** If true, hides the dialog footer with action buttons */
85
+ hideFooter?: boolean;
86
+ /** Text label for the trigger button that opens the dialog */
87
+ btnLabel?: string;
88
+ /** Size variant for the trigger button */
89
+ btnSize?: "sm" | "md" | "lg";
90
+ /** Callback fired when trigger button is clicked (before opening dialog) */
91
+ btnOnClick?: () => void;
92
+ /** Additional props to pass to the trigger button component */
93
+ btnProps?: Record<string, unknown>;
94
+ /**
95
+ * Optional icon element. When provided, renders an IconButton instead of a regular Button as the trigger.
96
+ * `btnLabel` serves as both `aria-label` and the visible label text (shown at desktop widths via IconButton's responsive label).
97
+ * Note: `aria-labelledby` cannot be passed via `btnProps` when icon is set — use `btnLabel` instead.
98
+ */
99
+ icon?: ReactElement;
100
+ }
101
+
102
+ /**
103
+ * A controlled dialog component that supports both modal and non-modal (inline alert) modes.
104
+ *
105
+ * **Modal Dialog** (default): Uses native `<dialog>` element with `.showModal()` which provides:
106
+ * - Automatic focus trap (Tab cycles within dialog)
107
+ * - Escape key closes dialog (native behavior)
108
+ * - Backdrop overlay with click-to-close
109
+ * - Inert background (page content becomes non-interactive)
110
+ *
111
+ * **Inline Alert Dialog** (`isAlertDialog={true}`): Uses `.show()` for non-modal inline alerts:
112
+ * - No focus trap (page remains interactive)
113
+ * - No escape key behavior
114
+ * - Positioned inline in page flow
115
+ * - User must explicitly close with button
116
+ *
117
+ * @component
118
+ * @example
119
+ * ```tsx
120
+ * // Controlled usage
121
+ * const [open, setOpen] = useState(false);
122
+ * <Dialog
123
+ * isOpen={open}
124
+ * onOpenChange={setOpen}
125
+ * dialogTitle="Confirm Delete"
126
+ * >
127
+ * Are you sure you want to delete this item?
128
+ * </Dialog>
129
+ * ```
130
+ *
131
+ * @param {DialogProps} props - Component props
132
+ * @param {boolean} props.isOpen - Controls whether the dialog is currently open
133
+ * @param {(open: boolean) => void} props.onOpenChange - Callback fired when dialog open state changes
134
+ * @param {string} props.dialogTitle - The title displayed in the dialog header
135
+ * @param {boolean} [props.isAlertDialog=false] - If true, renders as non-modal inline alert
136
+ * @param {() => void} [props.onClose] - Deprecated: Use onOpenChange. Called when dialog closes.
137
+ * @param {ReactNode} props.children - Content to display inside the dialog body
138
+ * @param {() => void | Promise<void>} [props.onConfirm] - Callback fired when confirm button is clicked
139
+ * @param {string} [props.confirmLabel="Confirm"] - Text label for confirm button
140
+ * @param {string} [props.cancelLabel="Cancel"] - Text label for cancel button
141
+ * @param {boolean} [props.hideFooter=false] - If true, hides the footer with action buttons
142
+ * @param {string} [props.className] - Additional CSS classes to apply
143
+ * @param {string} [props.dialogLabel] - Optional aria-label for the dialog
144
+ * @param {CSSProperties} [props.styles] - Inline styles to apply to dialog element
145
+ * @returns {JSX.Element} A controlled dialog component
146
+ */
147
+ declare const Dialog: React.FC<DialogProps>;
148
+ declare const _default: React.NamedExoticComponent<DialogProps>;
149
+
150
+ export { DialogModalProps as D, _default as _, Dialog as a };