@tempoxyz/ds 0.2.6 → 0.3.0

package/dist/web/components/AlertDialog.js

@@ -1,26 +1,32 @@
-
-import { Props as __zyzzProps } from 'zyzz/runtime';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as BaseUi from '@base-ui/react/alert-dialog';
-import { style } from '../zyzz.config.js';
-import { styles as dialog } from './Dialog.js';
+import { Dialog } from './Dialog.js';
 /**
  * A modal confirmation that interrupts the page until the user decides. The popup has
  * `role="alertdialog"`, traps focus, locks page scroll and closes on Escape or a `Close` part, but
- * never on an outside press. Focus returns to the trigger on close.
+ * never on an outside press. Focus returns to the trigger on close. It shares the parts and look of
+ * `Dialog`, at the `small` size by default.
  *
  * - Reserve it for decisions that need an explicit answer, such as destructive confirmations.
- * - Always include `Title` and `Description`, which name and describe the popup.
+ * - Always include `Title` and `Description` in a `Header`, which name and describe the popup.
  * - Label actions with specific verbs, such as `Delete key`, not `OK`.
  *
  * @example
  * <AlertDialog.Root>
- *   <AlertDialog.Trigger render={<Button variant="negative" />}>Delete key</AlertDialog.Trigger>
+ *   <AlertDialog.Trigger render={<Button />}>Delete key</AlertDialog.Trigger>
  *   <AlertDialog.Popup>
- *     <AlertDialog.Title>Delete this key?</AlertDialog.Title>
- *     <AlertDialog.Description>Apps that use this key stop working.</AlertDialog.Description>
- *     <AlertDialog.Close render={<Button variant="secondary" />}>Cancel</AlertDialog.Close>
- *     <AlertDialog.Close render={<Button variant="negative" />}>Delete key</AlertDialog.Close>
+ *     <AlertDialog.Header>
+ *       <AlertDialog.Title>Delete this key?</AlertDialog.Title>
+ *       <AlertDialog.Description>Apps that use this key stop working.</AlertDialog.Description>
+ *     </AlertDialog.Header>
+ *     <ButtonGroup>
+ *       <AlertDialog.Close render={<Button size="large" variant="secondary" />}>
+ *         Cancel
+ *       </AlertDialog.Close>
+ *       <AlertDialog.Close render={<Button size="large" />}>
+ *         Delete key
+ *       </AlertDialog.Close>
+ *     </ButtonGroup>
  *   </AlertDialog.Popup>
  * </AlertDialog.Root>
  *
@@ -32,39 +38,28 @@ import { styles as dialog } from './Dialog.js';
  */
 export var AlertDialog;
 (function (AlertDialog) {
+    /** Renders the content `<div>` between the header and the footer, as `Dialog.Body` does. */
+    AlertDialog.Body = Dialog.Body;
     /** Closes the dialog on click. Pass `render` to style it as a `Button`. */
     AlertDialog.Close = BaseUi.AlertDialog.Close;
+    /** Renders a `p` that describes the popup through `aria-describedby`. State the consequence here. */
+    AlertDialog.Description = Dialog.Description;
+    /** Holds the `Title` and `Description`, and lays them out as `Dialog.Header` does. */
+    AlertDialog.Header = Dialog.Header;
     /** Owns the open state. Pass `open` and `onOpenChange` to control it. The dialog is always modal. */
     AlertDialog.Root = BaseUi.AlertDialog.Root;
+    /** Renders an `h2` that names the popup through `aria-labelledby`. */
+    AlertDialog.Title = Dialog.Title;
     /** Opens the dialog on click. Pass `render` to style it as a `Button`. */
     AlertDialog.Trigger = BaseUi.AlertDialog.Trigger;
-    /** Renders a `p` that describes the popup through `aria-describedby`. State the consequence here. */
-    function Description(props) {
-        const { className, vars, ...attributes } = props;
-        return (_jsx(BaseUi.AlertDialog.Description, { ...attributes, ...dialog.description({ className, style: props.style, vars }) }));
-    }
-    AlertDialog.Description = Description;
     /**
-     * Renders the portal, scrim, viewport and popup. The popup stays centered at every width.
-     * Opening focuses the first tabbable element. When that is a destructive action, pass the
-     * cancel button's ref to `initialFocus`.
+     * Renders the portal, scrim, viewport and popup as `Dialog.Popup` does, with `size` defaulting
+     * to `small`. Opening focuses the first tabbable element. When that is a destructive action, pass
+     * the cancel button's ref to `initialFocus`.
      */
     function Popup(props) {
-        const { className, vars, ...attributes } = props;
-        return (_jsxs(BaseUi.AlertDialog.Portal, { children: [_jsx(BaseUi.AlertDialog.Backdrop, { ...dialog.backdrop() }), _jsx(BaseUi.AlertDialog.Viewport, { ...styles.viewport(), children: _jsx(BaseUi.AlertDialog.Popup, { ...attributes, ...styles.popup({ className, style: props.style, vars }) }) })] }));
+        return _jsx(Dialog.Popup, { ...props, size: props.size ?? 'small' });
     }
     AlertDialog.Popup = Popup;
-    /** Renders an `h2` that names the popup through `aria-labelledby`. */
-    function Title(props) {
-        const { className, vars, ...attributes } = props;
-        return (_jsx(BaseUi.AlertDialog.Title, { ...attributes, ...dialog.title({ className, style: props.style, vars }) }));
-    }
-    AlertDialog.Title = Title;
 })(AlertDialog || (AlertDialog = {}));
-var styles;
-(function (styles) {
-    styles.popup = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-tYAabT0 z_tds_2f_web-tYAabT1 z_tds_2f_web-tYAabT2 z_tds_2f_web-tYAabT3 z_tds_2f_web-tYAabT4 z_tds_2f_web-tYAabT5 z_tds_2f_web-tYAabT6 z_tds_2f_web-tYAabT7 z_tds_2f_web-tYAabT8 z_tds_2f_web-tYAabT9 z_tds_2f_web-tYAabTa z_tds_2f_web-tYAabTb z_tds_2f_web-tYAabTc z_tds_2f_web-tYAabTd z_tds_2f_web-tYAabTe z_tds_2f_web-tYAabTf z_tds_2f_web-tYAabTg z_tds_2f_web-tYAabTh z_tds_2f_web-tYAabTi z_tds_2f_web-tYAabTj z_tds_2f_web-tYAabTk z_tds_2f_web-tYAabTl z_tds_2f_web-tYAabTm z_tds_2f_web-tYAabTn"});
-    styles.viewport = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-tYAabTo z_tds_2f_web-tYAabT3 z_tds_2f_web-tYAabTp z_tds_2f_web-tYAabTq z_tds_2f_web-tYAabTr z_tds_2f_web-tYAabTs z_tds_2f_web-tYAabTt z_tds_2f_web-tYAabTu"});
-})(styles || (styles = {}));
-//# sourceMappingURL=AlertDialog.js.map
-import './AlertDialog.css';
+//# sourceMappingURL=AlertDialog.js.map

package/dist/web/components/AlertDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.js","sourceRoot":"","sources":["../../../src/web/components/AlertDialog.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AlertDialog.js","sourceRoot":"","sources":["../../../src/web/components/AlertDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAA;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,KAAW,WAAW,CAsD3B;AAtDD,WAAiB,WAAW;IAC1B,4FAA4F;IAC/E,gBAAI,GAAG,MAAM,CAAC,IAAI,CAAA;IAE/B,2EAA2E;IAC9D,iBAAK,GAAG,MAAM,CAAC,WAAW,CAAC,KAAK,CAAA;IAE7C,qGAAqG;IACxF,uBAAW,GAAG,MAAM,CAAC,WAAW,CAAA;IAE7C,sFAAsF;IACzE,kBAAM,GAAG,MAAM,CAAC,MAAM,CAAA;IAEnC,qGAAqG;IACxF,gBAAI,GAAG,MAAM,CAAC,WAAW,CAAC,IAAI,CAAA;IAE3C,sEAAsE;IACzD,iBAAK,GAAG,MAAM,CAAC,KAAK,CAAA;IAEjC,0EAA0E;IAC7D,mBAAO,GAAG,MAAM,CAAC,WAAW,CAAC,OAAO,CAAA;IAsBjD;;;;OAIG;IACH,SAAgB,KAAK,CAAC,KAAkB;QACtC,OAAO,KAAC,MAAM,CAAC,KAAK,OAAK,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,OAAO,GAAI,CAAA;IACjE,CAAC;IAFe,YAAA,KAAK,QAEpB,CAAA;AAKH,CAAC,EAtDgB,WAAW,KAAX,WAAW,QAsD3B"}