@apliteni/apliteni-ui 0.27.0 → 0.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.27.0",
+  "version": "0.31.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -29,7 +29,24 @@ import '@apliteni/apliteni-ui/react/css';  // React components' shell styles (mo
 import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 ```
 
-Components: `DataTable`, `Pagination`, `Modal`, `Button`, `Badge`, `Card`, `Icon`.
+Components: `DataTable`, `Pagination`, `Modal`, `Drawer`, `CommandPalette`, `Button`, `Badge`, `Card`, `Icon`.
+
+`CommandPalette` renders the kit's `commandPalette()` markup, class for class, and imports the
+kit's ranking rather than repeating it — so a palette a server rendered and the same palette
+after a keystroke put the same row first. Three differences from the vanilla one. Two are
+because a React host already owns the state the wiring would: it has no Cmd+K binding, since
+`open` is the host's prop to set from whatever key it wants; and a destructive row names an
+`onConfirm` callback rather than the id of a confirm dialog, which is refused the same way — a
+`danger` row with neither renders disabled. `rank={false}` hands the query back through
+`onQueryChange` for a palette a server feeds.
+
+The third is not a design decision and is going: **one Escape closes a `Modal` and the palette
+under it.** The React palette and the React `Modal` each register their own listener on the
+document, and `inert` does not stop a document listener, so the question and the surface it was
+asked about close together. The vanilla pair does not do this — every kit overlay is on one
+stack there, and Escape closes the top one only. The React half joins that shared dialog stack
+when this branch is rebased onto the drawer branch, which is where `dialog.ts` lands; until then,
+open a `Modal` from a palette row knowing both will close.
 
 `Pagination` renders the kit's `pagination()` markup, class for class, so its styles come from
 `@apliteni/apliteni-ui/css` rather than from this bundle. One deliberate difference: it takes no
@@ -47,6 +64,37 @@ controls, disabled controls, controls inside a closed disclosure and elements wi
 negative tabindex are skipped. Tab and Shift+Tab wrap at the ends of the same list.
 Escape and a click on the scrim dismiss the dialog and return focus to its opener.
 
+The Modal fades in and out: the scrim fades and the panel rises a few pixels. After `open`
+turns false it stays mounted until that transition ends, then unmounts. While it leaves,
+focus is already back on the opener and the dialog takes no clicks.
+
+## Drawer
+
+A panel that slides in from an edge of the screen over a scrim. It renders the vanilla
+`drawer()` markup, class for class, so it looks and moves like the kit's drawer, and like
+`Pagination` its styles come from `@apliteni/apliteni-ui/css` rather than from this bundle.
+Group what goes inside it the way `drawerSection()` does — a heading over a `<dl>` of label
+and value rows — rather than in cards; the rules are on Guidelines / Drawers.
+
+```tsx
+<Drawer open={open} title="Transaction" onClose={() => setOpen(false)}
+  side="right" size="md" footer={<Button onClick={save}>Save</Button>}>
+  …
+</Drawer>
+```
+
+`side` is `right` (default), `left`, `top` or `bottom`. `size` is `sm`, `md` (default) or
+`lg`, measured along the slide. `closeLabel` names the close button (default "Close").
+Focus, Escape, the scrim, Tab and the return of focus behave as the Modal's do. Like the
+Modal, it stays mounted until its exit slide ends. It is portalled to `document.body`.
+
+React Modals, Drawers and CommandPalettes share one stack. When one is open over another,
+only the top one takes Escape and Tab, and closing it hands focus back to the one below —
+so a destructive palette row that opens a Modal takes one Escape to answer, not one that
+closes both. The vanilla `drawer()`, `confirm()` and `commandPalette()` keep a separate
+stack that this one cannot see, so do not open a React dialog and a vanilla overlay over
+each other on the same page.
+
 ## Work on them
 
 From the repo root — one `npm install` covers the workspace:

package/react/dist/index.css

@@ -25,7 +25,12 @@
   backdrop-filter: blur(2px);
   display: grid;
   place-items: center;
-  z-index: 50;
+  z-index: calc(var(--z-overlay) + 1);
+  opacity: 0;
+  transition: opacity var(--dur-med) var(--ease);
+}
+.rx-scrim.is-open {
+  opacity: 1;
 }
 .rx-modal {
   width: min(480px, 92vw);
@@ -34,6 +39,11 @@
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-lg);
   overflow: hidden;
+  transform: translateY(8px);
+  transition: transform var(--dur-med) var(--ease);
+}
+.rx-scrim.is-open .rx-modal {
+  transform: none;
 }
 .rx-modal__head {
   display: flex;

package/react/dist/index.d.ts

@@ -23,9 +23,11 @@ declare function Badge({ variant, children }: {
     children: ReactNode;
 }): react.JSX.Element;
 
-declare function Card({ title, sub, children }: {
+type Level = 2 | 3 | 4 | 5 | 6;
+declare function Card({ title, sub, level, children }: {
     title?: ReactNode;
     sub?: ReactNode;
+    level?: Level;
     children?: ReactNode;
 }): react.JSX.Element;
 
@@ -38,6 +40,63 @@ type ModalProps = {
 };
 declare function Modal({ open, title, onClose, footer, children }: ModalProps): react.ReactPortal | null;
 
+type DrawerProps = {
+    open: boolean;
+    title: string;
+    onClose: () => void;
+    side?: 'right' | 'left' | 'top' | 'bottom';
+    size?: 'sm' | 'md' | 'lg';
+    footer?: ReactNode;
+    children?: ReactNode;
+    closeLabel?: string;
+};
+declare function Drawer({ open, title, onClose, side, size, footer, children, closeLabel, }: DrawerProps): react.ReactPortal | null;
+
+type CommandItem = {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: string;
+    /** Aliases a reader might type instead of the label. */
+    keywords?: string[];
+    /** Drawn as <kbd>, never read out: the row already says what it does. */
+    shortcut?: string | string[];
+    badge?: string;
+    /** A row that goes somewhere. Cmd or Ctrl held on Enter opens it in a tab. */
+    href?: string;
+    /** A row that destroys something. It must carry `onConfirm`, or it is disabled. */
+    danger?: boolean;
+    /** What a destructive row opens instead of running. */
+    onConfirm?: () => void;
+    disabled?: boolean;
+};
+type CommandGroup = {
+    label?: string;
+    items: CommandItem[];
+};
+type CommandPaletteProps = {
+    open: boolean;
+    onClose: () => void;
+    groups: CommandGroup[];
+    /** What the reader chose. `newTab` is Cmd or Ctrl held, for a row with an href. */
+    onSelect?: (item: CommandItem, meta: {
+        newTab: boolean;
+    }) => void;
+    label?: string;
+    placeholder?: string;
+    empty?: string;
+    density?: 'compact' | 'roomy';
+    hint?: boolean;
+    /**
+     * false → the caller ranks. `groups` is rendered in the order it is given and
+     * `onQueryChange` is where the query goes — the shape a palette fed by a
+     * server takes, where the rest of the results are not on this page to rank.
+     */
+    rank?: boolean;
+    onQueryChange?: (query: string) => void;
+};
+declare function CommandPalette({ open, onClose, groups, onSelect, label, placeholder, empty, density, hint, rank, onQueryChange, }: CommandPaletteProps): react.ReactPortal | null;
+
 type Column<T> = {
     key: keyof T & string;
     label: string;
@@ -163,4 +222,4 @@ declare function Denied({ title, sub, need, icon, className, children, }: Denied
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, Denied, type DeniedProps, Icon, Modal, type ModalProps, PAGE_SIZES, Pagination, type PaginationProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, type TableSort, sortTableRows };
+export { Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, Denied, type DeniedProps, Drawer, type DrawerProps, Icon, Modal, type ModalProps, PAGE_SIZES, Pagination, type PaginationProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, type TableSort, sortTableRows };