@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.
- package/libs/components/alert/alert.css +1 -1
- package/libs/components/alert/alert.css.map +1 -1
- package/libs/components/alert/alert.min.css +2 -2
- package/libs/components/buttons/icon-button.css +1 -1
- package/libs/components/buttons/icon-button.css.map +1 -1
- package/libs/components/buttons/icon-button.min.css +2 -2
- package/libs/components/dialog/dialog.css +1 -1
- package/libs/components/dialog/dialog.css.map +1 -1
- package/libs/components/dialog/dialog.d.cts +2 -105
- package/libs/components/dialog/dialog.d.ts +2 -105
- package/libs/components/dialog/dialog.min.css +2 -2
- package/libs/components/icons/icon.d.cts +1 -1
- package/libs/components/icons/icon.d.ts +1 -1
- package/libs/dialog-6c6b3588.d.ts +150 -0
- package/libs/{icons-2c09535c.d.ts → icons-48788561.d.ts} +32 -32
- package/libs/icons.d.cts +1 -1
- package/libs/icons.d.ts +1 -1
- package/libs/index.cjs +34 -33
- package/libs/index.cjs.map +1 -1
- package/libs/index.css +1 -1
- package/libs/index.css.map +1 -1
- package/libs/index.d.cts +77 -10
- package/libs/index.d.ts +77 -10
- package/libs/index.js +11 -10
- package/libs/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/alert/alert.scss +0 -13
- package/src/components/buttons/icon-button.mdx +204 -0
- package/src/components/buttons/icon-button.scss +64 -26
- package/src/components/buttons/icon-button.tsx +9 -6
- package/src/components/dialog/dialog-modal.stories.tsx +71 -0
- package/src/components/dialog/dialog-modal.tsx +29 -3
- package/src/components/dialog/dialog.scss +1 -0
- package/src/components/dialog/dialog.test.tsx +119 -0
- package/src/components/dialog/dialog.types.ts +8 -1
- package/src/index.ts +5 -1
- package/src/sass/utilities/_display.scss +156 -0
- package/src/sass/utilities/_index.scss +3 -0
- package/src/sass/utilities/display.mdx +203 -0
- package/src/sass/utilities/display.stories.tsx +141 -0
- package/src/styles/alert/alert.css +0 -13
- package/src/styles/alert/alert.css.map +1 -1
- package/src/styles/buttons/icon-button.css +55 -16
- package/src/styles/buttons/icon-button.css.map +1 -1
- package/src/styles/dialog/dialog.css +1 -0
- package/src/styles/dialog/dialog.css.map +1 -1
- package/src/styles/index.css +136 -13
- package/src/styles/index.css.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
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":"
|
|
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
|
-
|
|
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,
|
|
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
|
|
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":"
|
|
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
|
|
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,
|
|
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
|
|
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
|
|
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,
|
|
3
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2RpYWxvZy9kaWFsb2cuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUNFLG1DQUFBLENBQ0Esc0JBQUEsQ0FDQSwwQ0FBQSxDQUNBLDJCQUFBLENBQ0EsNEJBQUEsQ0FDQSw0Q0FBQSxDQUNBLHdCQUFBLENBQ0EsNkJBQUEsQ0FDQSxpREFBQSxDQUNBLCtCQUFBLENBQ0EsOENBQUEsQ0FDQSx3REFBQSxDQUNBLHNCQUFBLENBQ0EsK0JBQUEsQ0FHQSx3Q0FBQSxDQUNBLDhCQUFBLENBQ0EsK0JBQUEsQ0FDQSxpRkFBQSxDQUlGLCtCQUNFLE1BQ0UsbUNBQUEsQ0FDQSwrQkFBQSxDQUNBLGtDQUFBLENBQ0EsbURBQUEsQ0FDQSwrQkFBQSxDQUFBLENBSUosT0FDRSw2QkFBQSxDQUNBLGlDQUFBLENBQ0EscUJBQUEsQ0FDQSxrRUFBQSxDQUNBLHlDQUFBLENBQ0EsNkJBQUEsQ0FDQSx5Q0FBQSxDQUdBLHFCQUNFLG1DQUFBLENBQ0EseUNBQUEsQ0FHRixhQUNFLDZCQUFBLENBQ0EsMkNBQUEsQ0FDQSxxQkFBQSxDQUdGLGVBQ0UsVUFBQSxDQUNBLFlBQUEsQ0FDQSxxQkFBQSxDQUNBLHFCQUFBLENBQ0EsMkNBQUEsQ0FDQSxvQkFBQSxDQUNBLFdBQUEsQ0FJSixlQUNFLFlBQUEsQ0FDQSw2QkFBQSxDQUNBLGtCQUFBLENBQ0EsVUFBQSxDQUNBLGNBQUEsQ0FFQSxrQkFDRSxvQkFBQSxDQUNBLGtCQUFBLENBR0YsNkJBQ0Usa0JBQUEsQ0FHRixtQ0FDRSx3Q0FBQSxDQUNBLGtDQUFBLENBQ0EsK0JBQUEsQ0FDQSxjQUFBLENBRUEseUNBQ0Usc0NBQUEsQ0FDQSw4Q0FBQSxDQUlGLGlEQUNFLG1DQUFBLENBQ0EseUNBQUEsQ0FDQSxzQ0FBQSxDQUNBLDhDQUFBLENBSUYsNkRBQ0UsWUFBQSxDQUtOLHFDQUVFLFlBQUEsQ0FDQSxrQkFBQSxDQUNBLGNBQUEsQ0FDQSxzREFBQSxDQUNBLHFCQUFBLENBQ0EsVUFBQSxDQUdBLCtFQUNFLG1DQUFBLENBQ0EseUNBQUEsQ0FHRix1R0FDRSxZQUFBIiwiZmlsZSI6ImRpYWxvZy5taW4uY3NzIn0= */
|
|
@@ -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 };
|