@crewlethq/ui 0.2.0 → 0.3.0

package/dist/Modal/ConfirmModal.d.ts

@@ -0,0 +1,74 @@
+import { type ReactNode } from 'react';
+import { type ButtonVariant } from '../Button/index.js';
+import { type ModalShape, type ModalSize } from './Modal.js';
+export interface ConfirmModalProps {
+    open: boolean;
+    onClose: () => void;
+    /**
+     * The action. It may be asynchronous, and a REJECTION LEAVES THE SURFACE
+     * OPEN: closing on a request that failed tells the reader the thing was
+     * done. Report the failure from inside it, where the error is.
+     */
+    onConfirm: () => void | Promise<void>;
+    title: ReactNode;
+    /** The sentence the prompt leads with. */
+    message?: ReactNode;
+    /** Anything below the message: an acknowledgement checkbox, a phrase to type. */
+    children?: ReactNode;
+    confirmLabel?: ReactNode;
+    cancelLabel?: ReactNode;
+    /**
+     * The action cannot be undone. It takes the danger fill and makes the
+     * surface an `alertdialog`, which asks a reader's software to announce the
+     * whole prompt at once rather than its name alone.
+     */
+    destructive?: boolean | undefined;
+    confirmVariant?: ButtonVariant | undefined;
+    cancelVariant?: ButtonVariant | undefined;
+    /** Not yet answerable, such as a confirmation phrase nobody has typed. */
+    confirmDisabled?: boolean | undefined;
+    /** Why confirming is unavailable. Read out with the button's name. */
+    confirmDisabledReason?: string | undefined;
+    /**
+     * The request is in flight: the confirm button shows it, and Escape, the
+     * veil and the close control all stop closing.
+     */
+    submitting?: boolean | undefined;
+    /** Why cancelling and closing are unavailable while the request is in flight. */
+    busyReason?: string | undefined;
+    /**
+     * `prompt`, the default and what a confirmation IS: a title, a sentence and
+     * two buttons, with no head band, no glyph and no close control. `framed`
+     * is for a confirmation that grew a form inside it, where the bands keep the
+     * question apart from the fields answering it.
+     */
+    shape?: ModalShape | undefined;
+    /** Ignored by the prompt shape, which has a width of its own. */
+    size?: ModalSize | undefined;
+}
+/**
+ * A prompt that asks one question and takes one answer.
+ *
+ * IT IS A FORM, with confirm as its submit button, so Enter from anywhere
+ * inside answers it. That is not decoration: an acknowledgement checkbox or a
+ * phrase to type puts a control between the reader and the button, and Enter
+ * is what everybody presses next.
+ *
+ * WHAT CHANGED FROM 0.2.0, and why each one was wrong:
+ *
+ * - `submitting` only stopped the veil. Escape and the close control still
+ *   abandoned a request whose outcome nobody had seen. It is `dismissable`
+ *   now, which is all three.
+ * - The confirm label was swapped for the word "Working" while the request
+ *   ran, so a screen reader was told the button had been renamed rather than
+ *   that it was busy. It is the Button's own `loading` now: the name holds
+ *   still and `aria-busy` says what is happening.
+ * - `onConfirm` was called with `void`, so a rejection became an unhandled
+ *   rejection the browser reported to nobody. It is awaited now.
+ * - It was drawn as a full dialog, with a head band, a glyph and a close
+ *   control over one sentence, and the close control did what the Cancel two
+ *   inches below it did. It is the PROMPT shape now: a title, the sentence
+ *   and the two buttons, 420px and centred. `shape="framed"` is the way back
+ *   for a confirmation that grew a form inside it.
+ */
+export declare function ConfirmModal({ open, onClose, onConfirm, title, message, children, confirmLabel, cancelLabel, destructive, confirmVariant, cancelVariant, confirmDisabled, confirmDisabledReason, submitting, busyReason, shape, size, }: ConfirmModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/Modal/Modal.d.ts

@@ -0,0 +1,154 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Which surface this is.
+ *
+ * `dialog` is sized for a question and centred over the page. `sheet` is the
+ * side sheet: an editor with a dozen fields, a list or two and the refusals
+ * beside them needs the full height of the window, and it needs the thing
+ * being edited to stay in view at its side so the operator keeps their place.
+ * A centred dialog grown to hold that covers the very card it is editing.
+ */
+export type ModalVariant = 'dialog' | 'sheet';
+/**
+ * Where a dialog sits in the window.
+ *
+ * `top` is the default and the one placement the engine's dashboard has: a
+ * reader who just pressed a button is looking at the top half of the window,
+ * and a surface that opens in the middle of the screen asks them to find it
+ * again. It is also what a surface read while typing wants, which is why the
+ * command palette has always asked for it.
+ *
+ * `center` is kept for a surface that is the whole of what the reader is doing
+ * and has nothing above it to stay in touch with, such as a full-bleed viewer.
+ */
+export type ModalPlacement = 'center' | 'top';
+/**
+ * How much chrome the surface carries.
+ *
+ * `framed` is the default and is every editor, wizard and form: a head band
+ * with the title and a close control, a body, and a foot band with the
+ * actions.
+ *
+ * `prompt` is one question and one answer, and takes the bands off. The title
+ * is drawn as the body's own first line, the actions hang off its bottom edge
+ * with no rule and no ground, there is no glyph and no close control, and the
+ * frame is narrower and centred. A prompt IS what the reader is doing, so it
+ * has nothing behind it to stay in touch with; every band around it is
+ * something the eye crosses before reaching the sentence. It changes the
+ * dialog variant only: a sheet is never a prompt.
+ */
+export type ModalShape = 'framed' | 'prompt';
+/**
+ * What the surface IS to a screen reader. `alertdialog` is for a prompt that
+ * interrupts to report or to confirm something consequential, and nothing
+ * else: it asks a reader's software to announce the whole surface at once,
+ * which is right for "delete this forever?" and wrong for an editor.
+ */
+export type ModalRole = 'dialog' | 'alertdialog';
+/**
+ * The attributes a caller may put on the frame.
+ *
+ * The three ARIA relationships are withheld on purpose. This component decides
+ * all three (the title names the frame, `ariaLabel` names one without a title,
+ * `describedBy` defaults to the subtitle), and a value arriving through the
+ * rest props would be overwritten with no sign of it: a surface that looked
+ * named in the source would ship unnamed. Refusing them in the type points the
+ * caller at the props that are actually read.
+ */
+type FrameAttributes = Omit<HTMLAttributes<HTMLElement>, 'title' | 'onSubmit' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-describedby'>;
+export interface ModalProps extends FrameAttributes {
+    /** Controls visibility. While false the surface is not mounted at all. */
+    open: boolean;
+    /** Asked to close: Escape, the veil, or the close control. */
+    onClose: () => void;
+    /** The line that names the surface. It names the dialog whether or not it is drawn. */
+    title?: ReactNode;
+    /** A second line under the title. It describes the surface unless `describedBy` says otherwise. */
+    subtitle?: ReactNode;
+    /** A glyph beside the title. Decorative: the title carries the words. */
+    icon?: ReactNode;
+    /** Actions, at the inline end of the footer. */
+    footer?: ReactNode;
+    /** The footer's inline start: a secondary action, a count, a last-saved line. */
+    footerStart?: ReactNode;
+    /**
+     * Actions in the HEAD, at its inline end, beside the title.
+     *
+     * What a side sheet's commit pair wants: a sheet's body is a tall column a
+     * reader scrolls, and Apply at the bottom of it is a button they have to
+     * travel the whole form to reach and travel back from. A dialog answered in
+     * one glance keeps its actions in the foot, where the eye ends up.
+     */
+    headerActions?: ReactNode;
+    children?: ReactNode;
+    size?: ModalSize | undefined;
+    variant?: ModalVariant | undefined;
+    shape?: ModalShape | undefined;
+    placement?: ModalPlacement | undefined;
+    role?: ModalRole | undefined;
+    /**
+     * False while a request is in flight: Escape, the veil and the close
+     * control all stop closing, so a stray press cannot abandon a write whose
+     * outcome the reader has not seen.
+     */
+    dismissable?: boolean | undefined;
+    /** A veil-only switch: the surface still closes on Escape and on its close control. */
+    closeOnBackdrop?: boolean | undefined;
+    showCloseButton?: boolean | undefined;
+    /** Stacks the body's children in a column with a gap, which most forms want. */
+    stackBody?: boolean | undefined;
+    /** Drops the body's padding, for content that owns its own edges. */
+    flush?: boolean | undefined;
+    className?: string | undefined;
+    /** Names a surface that draws no title. Ignored when `title` is given. */
+    ariaLabel?: string | undefined;
+    /** Describes the surface. Defaults to the subtitle. */
+    describedBy?: string | undefined;
+    /** Where focus starts, if not the first control in the body. */
+    initialFocus?: (() => HTMLElement | null) | undefined;
+    /** When given, the frame is a form and Enter in a field submits it. */
+    onSubmit?: (() => void) | undefined;
+    closeLabel?: string | undefined;
+    /** Why the close control is unavailable while `dismissable` is false. */
+    closeDisabledReason?: string | undefined;
+}
+/**
+ * Modal: the one surface every dialog, prompt and side sheet in this package
+ * is built from.
+ *
+ * WHAT IT OWNS: the veil, the frame, the name a screen reader announces, the
+ * head, body and foot, and where focus starts. Escape, the veil press, the Tab
+ * trap, where focus goes back, the stacking order and the body's scroll lock
+ * belong to the layer stack, which every overlay here shares, so a prompt
+ * raised over a sheet closes on its own Escape and leaves the sheet open.
+ *
+ * WHAT IT DELIBERATELY DOES NOT OWN: what the surface says, what its buttons
+ * do, and whether closing is allowed right now. A surface mid-write passes
+ * `dismissable={false}`.
+ *
+ * THE TITLE ALWAYS NAMES THE FRAME. It is linked by an id this component
+ * mints, because a name passed by hand is a name a caller can forget: none of
+ * conlet's sixteen dialogs passed one, and every one of them was announced as
+ * "dialog" and nothing more.
+ *
+ * ITS CONTENTS ARE THEIR OWN OUTLINE. `aria-modal` puts everything behind the
+ * veil out of reach, so a heading inside starts at 2 however deeply the
+ * component that opened the surface was nested. The title itself is not a
+ * heading: the dialog role announces it already, and a reader moving by
+ * heading would meet it twice.
+ */
+export declare function Modal({ open, ...rest }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Whether a slot was handed something to draw.
+ *
+ * Not `!== undefined`, because that is not how a caller says "nothing here":
+ * `footer={null}` and `title={ready && name}` are both ordinary, and read as
+ * present they draw an empty footer band and, worse, point `aria-labelledby`
+ * at an empty element. That leaves the surface with no name at all AND
+ * suppresses the `ariaLabel` that would have given it one, which is the exact
+ * failure this component was rebuilt to remove. React's own rule is the one
+ * used here: null, undefined, false and the empty string draw nothing.
+ */
+export declare function given(node: ReactNode): boolean;
+export {};

package/dist/Modal/index.d.ts

@@ -0,0 +1,5 @@
+import './Modal.css';
+export { Modal } from './Modal.js';
+export type { ModalPlacement, ModalProps, ModalRole, ModalShape, ModalSize, ModalVariant, } from './Modal.js';
+export { ConfirmModal } from './ConfirmModal.js';
+export type { ConfirmModalProps } from './ConfirmModal.js';

package/dist/Modal/index.js

@@ -0,0 +1,8 @@
+export { ConfirmModal, Modal } from '../chunk-2EOKFKHX.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-ITHXJHBB.js';
+import '../chunk-F27EPQ7D.js';
+import '../chunk-BZYDZBAN.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';