@nordmanai/nif 0.2.4 → 0.2.8

package/registry/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.4",
+  "version": "0.2.8",
   "versions": {
     "@animate-ui/react": "^2.4.2",
     "@base-ui/react": "^1.9.0",
@@ -76,6 +76,7 @@
     "input-group",
     "form-field",
     "dialog",
+    "alert-dialog",
     "command",
     "calendar",
     "date-picker",
@@ -91,6 +92,8 @@
     "breadcrumb",
     "status-bar",
     "side-panel",
+    "sidebar",
+    "drawer",
     "prose",
     "gallery",
     "resize-handle",
@@ -302,6 +305,18 @@
       "libs": [],
       "uses": []
     },
+    "alert-dialog": {
+      "dir": "nm-alert-dialog",
+      "files": [
+        "components/nm-alert-dialog/nm-alert-dialog.css",
+        "components/nm-alert-dialog/nm-alert-dialog.tsx",
+        "lib/nm-class.ts"
+      ],
+      "libs": [
+        "@base-ui/react"
+      ],
+      "uses": []
+    },
     "app-panel": {
       "dir": "nm-app-panel",
       "files": [
@@ -1768,22 +1783,27 @@
         "components/nm-popover/nm-popover.tsx",
         "components/nm-prose/nm-prose.css",
         "components/nm-prose/nm-prose.tsx",
-        "components/nm-segmented/nm-segmented.css",
-        "components/nm-segmented/nm-segmented.tsx",
+        "components/nm-resize-handle/nm-resize-handle.css",
+        "components/nm-resize-handle/nm-resize-handle.tsx",
         "components/nm-select/nm-select.css",
         "components/nm-select/nm-select.tsx",
+        "components/nm-side-panel/nm-side-panel.css",
+        "components/nm-side-panel/nm-side-panel.tsx",
         "components/nm-small-icon-button/nm-small-icon-button.tsx",
         "components/nm-textarea/nm-textarea.css",
         "components/nm-textarea/nm-textarea.tsx",
+        "components/nm-toolbar/nm-toolbar.css",
+        "components/nm-toolbar/nm-toolbar.tsx",
         "components/nordman-icon-button/nordman-icon-button.css",
         "components/nordman-icon-button/nordman-icon-button.tsx",
+        "config/nm-button.ts",
         "config/nm-collection.ts",
         "config/nm-dropdown.ts",
         "config/nm-field.ts",
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
-        "config/nm-segmented.ts",
+        "config/nm-side-panel.ts",
         "config/nm-small-icon-button.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
@@ -1811,10 +1831,12 @@
         "input",
         "popover",
         "prose",
-        "segmented",
+        "resize-handle",
         "select",
+        "side-panel",
         "small-icon-button",
         "textarea",
+        "toolbar",
         "nordman-icon-button"
       ]
     },
@@ -2495,6 +2517,21 @@
       ],
       "uses": []
     },
+    "drawer": {
+      "dir": "nm-drawer",
+      "files": [
+        "components/nm-drawer/nm-drawer.css",
+        "components/nm-drawer/nm-drawer.tsx",
+        "config/nm-drawer.ts",
+        "lib/nm-class.ts",
+        "lib/nm-motion.ts"
+      ],
+      "libs": [
+        "@animate-ui/react",
+        "@base-ui/react"
+      ],
+      "uses": []
+    },
     "dropdown": {
       "dir": "nm-dropdown",
       "files": [
@@ -2965,20 +3002,25 @@
         "components/nm-popover/nm-popover.tsx",
         "components/nm-prose/nm-prose.css",
         "components/nm-prose/nm-prose.tsx",
-        "components/nm-segmented/nm-segmented.css",
-        "components/nm-segmented/nm-segmented.tsx",
+        "components/nm-resize-handle/nm-resize-handle.css",
+        "components/nm-resize-handle/nm-resize-handle.tsx",
         "components/nm-select/nm-select.css",
         "components/nm-select/nm-select.tsx",
+        "components/nm-side-panel/nm-side-panel.css",
+        "components/nm-side-panel/nm-side-panel.tsx",
         "components/nm-textarea/nm-textarea.css",
         "components/nm-textarea/nm-textarea.tsx",
+        "components/nm-toolbar/nm-toolbar.css",
+        "components/nm-toolbar/nm-toolbar.tsx",
         "components/nordman-icon-button/nordman-icon-button.css",
         "components/nordman-icon-button/nordman-icon-button.tsx",
+        "config/nm-button.ts",
         "config/nm-dropdown.ts",
         "config/nm-field.ts",
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
-        "config/nm-segmented.ts",
+        "config/nm-side-panel.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -3003,9 +3045,11 @@
         "input",
         "popover",
         "prose",
-        "segmented",
+        "resize-handle",
         "select",
+        "side-panel",
         "textarea",
+        "toolbar",
         "nordman-icon-button"
       ]
     },
@@ -4250,12 +4294,16 @@
         "components/nm-prose/nm-prose.tsx",
         "components/nm-questionnaire/nm-questionnaire.css",
         "components/nm-questionnaire/nm-questionnaire.tsx",
-        "components/nm-segmented/nm-segmented.css",
-        "components/nm-segmented/nm-segmented.tsx",
+        "components/nm-resize-handle/nm-resize-handle.css",
+        "components/nm-resize-handle/nm-resize-handle.tsx",
         "components/nm-select/nm-select.css",
         "components/nm-select/nm-select.tsx",
+        "components/nm-side-panel/nm-side-panel.css",
+        "components/nm-side-panel/nm-side-panel.tsx",
         "components/nm-textarea/nm-textarea.css",
         "components/nm-textarea/nm-textarea.tsx",
+        "components/nm-toolbar/nm-toolbar.css",
+        "components/nm-toolbar/nm-toolbar.tsx",
         "components/nordman-icon-button/nordman-icon-button.css",
         "components/nordman-icon-button/nordman-icon-button.tsx",
         "config/nm-button.ts",
@@ -4265,7 +4313,7 @@
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
         "config/nm-questionnaire.ts",
-        "config/nm-segmented.ts",
+        "config/nm-side-panel.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -4293,9 +4341,11 @@
         "popover",
         "progress",
         "prose",
-        "segmented",
+        "resize-handle",
         "select",
+        "side-panel",
         "textarea",
+        "toolbar",
         "nordman-icon-button"
       ]
     },
@@ -4940,6 +4990,187 @@
         "toolbar"
       ]
     },
+    "sidebar": {
+      "dir": "nm-sidebar",
+      "files": [
+        "components/nm-chip/nm-chip.css",
+        "components/nm-chip/nm-chip.tsx",
+        "components/nm-drawer/nm-drawer.css",
+        "components/nm-drawer/nm-drawer.tsx",
+        "components/nm-icon/animated/activity.tsx",
+        "components/nm-icon/animated/archive.tsx",
+        "components/nm-icon/animated/arrow-down.tsx",
+        "components/nm-icon/animated/arrow-left.tsx",
+        "components/nm-icon/animated/arrow-right.tsx",
+        "components/nm-icon/animated/arrow-up-down.tsx",
+        "components/nm-icon/animated/arrow-up.tsx",
+        "components/nm-icon/animated/audio-lines.tsx",
+        "components/nm-icon/animated/bookmark-plus.tsx",
+        "components/nm-icon/animated/bookmark.tsx",
+        "components/nm-icon/animated/bot.tsx",
+        "components/nm-icon/animated/calendar-days.tsx",
+        "components/nm-icon/animated/calendar.tsx",
+        "components/nm-icon/animated/camera.tsx",
+        "components/nm-icon/animated/chart-column-increasing.tsx",
+        "components/nm-icon/animated/chart-column.tsx",
+        "components/nm-icon/animated/chart-line.tsx",
+        "components/nm-icon/animated/check-check.tsx",
+        "components/nm-icon/animated/check.tsx",
+        "components/nm-icon/animated/chevron-down.tsx",
+        "components/nm-icon/animated/chevron-left.tsx",
+        "components/nm-icon/animated/chevron-right.tsx",
+        "components/nm-icon/animated/chevron-up.tsx",
+        "components/nm-icon/animated/circle-alert.tsx",
+        "components/nm-icon/animated/circle-check-big.tsx",
+        "components/nm-icon/animated/circle-check.tsx",
+        "components/nm-icon/animated/circle-plus.tsx",
+        "components/nm-icon/animated/circle-question-mark.tsx",
+        "components/nm-icon/animated/circle-x.tsx",
+        "components/nm-icon/animated/clock-3.tsx",
+        "components/nm-icon/animated/clock-4.tsx",
+        "components/nm-icon/animated/clock.tsx",
+        "components/nm-icon/animated/cloud-sun.tsx",
+        "components/nm-icon/animated/cloud-upload.tsx",
+        "components/nm-icon/animated/copy.tsx",
+        "components/nm-icon/animated/download.tsx",
+        "components/nm-icon/animated/ellipsis.tsx",
+        "components/nm-icon/animated/external-link.tsx",
+        "components/nm-icon/animated/eye-off.tsx",
+        "components/nm-icon/animated/eye.tsx",
+        "components/nm-icon/animated/fast-forward.tsx",
+        "components/nm-icon/animated/file-clock.tsx",
+        "components/nm-icon/animated/file-text.tsx",
+        "components/nm-icon/animated/file.tsx",
+        "components/nm-icon/animated/folder.tsx",
+        "components/nm-icon/animated/gauge.tsx",
+        "components/nm-icon/animated/globe.tsx",
+        "components/nm-icon/animated/graduation-cap.tsx",
+        "components/nm-icon/animated/headphones.tsx",
+        "components/nm-icon/animated/image.tsx",
+        "components/nm-icon/animated/index.ts",
+        "components/nm-icon/animated/info.tsx",
+        "components/nm-icon/animated/key-round.tsx",
+        "components/nm-icon/animated/layers.tsx",
+        "components/nm-icon/animated/layout-dashboard.tsx",
+        "components/nm-icon/animated/library-big.tsx",
+        "components/nm-icon/animated/lightbulb.tsx",
+        "components/nm-icon/animated/link.tsx",
+        "components/nm-icon/animated/list-filter.tsx",
+        "components/nm-icon/animated/list.tsx",
+        "components/nm-icon/animated/loader-circle.tsx",
+        "components/nm-icon/animated/lock.tsx",
+        "components/nm-icon/animated/log-out.tsx",
+        "components/nm-icon/animated/mail.tsx",
+        "components/nm-icon/animated/map-pin.tsx",
+        "components/nm-icon/animated/menu.tsx",
+        "components/nm-icon/animated/message-circle-dashed.tsx",
+        "components/nm-icon/animated/message-circle.tsx",
+        "components/nm-icon/animated/message-square-plus.tsx",
+        "components/nm-icon/animated/message-square-text.tsx",
+        "components/nm-icon/animated/message-square.tsx",
+        "components/nm-icon/animated/mic-off.tsx",
+        "components/nm-icon/animated/mic.tsx",
+        "components/nm-icon/animated/minimize.tsx",
+        "components/nm-icon/animated/minus.tsx",
+        "components/nm-icon/animated/moon.tsx",
+        "components/nm-icon/animated/music.tsx",
+        "components/nm-icon/animated/notebook-pen.tsx",
+        "components/nm-icon/animated/panel-left.tsx",
+        "components/nm-icon/animated/panel-right.tsx",
+        "components/nm-icon/animated/paperclip.tsx",
+        "components/nm-icon/animated/pause.tsx",
+        "components/nm-icon/animated/pencil.tsx",
+        "components/nm-icon/animated/pin-off.tsx",
+        "components/nm-icon/animated/pin.tsx",
+        "components/nm-icon/animated/plane-takeoff.tsx",
+        "components/nm-icon/animated/play.tsx",
+        "components/nm-icon/animated/plug-zap.tsx",
+        "components/nm-icon/animated/plus.tsx",
+        "components/nm-icon/animated/radio.tsx",
+        "components/nm-icon/animated/refresh-cw.tsx",
+        "components/nm-icon/animated/rocket.tsx",
+        "components/nm-icon/animated/rotate-ccw.tsx",
+        "components/nm-icon/animated/rotate-cw.tsx",
+        "components/nm-icon/animated/save.tsx",
+        "components/nm-icon/animated/search.tsx",
+        "components/nm-icon/animated/send.tsx",
+        "components/nm-icon/animated/settings.tsx",
+        "components/nm-icon/animated/share-2.tsx",
+        "components/nm-icon/animated/share.tsx",
+        "components/nm-icon/animated/shield-check.tsx",
+        "components/nm-icon/animated/shopping-bag.tsx",
+        "components/nm-icon/animated/sliders-horizontal.tsx",
+        "components/nm-icon/animated/sparkles.tsx",
+        "components/nm-icon/animated/star.tsx",
+        "components/nm-icon/animated/sun.tsx",
+        "components/nm-icon/animated/terminal.tsx",
+        "components/nm-icon/animated/trash-2.tsx",
+        "components/nm-icon/animated/trash.tsx",
+        "components/nm-icon/animated/trending-up.tsx",
+        "components/nm-icon/animated/triangle-alert.tsx",
+        "components/nm-icon/animated/trophy.tsx",
+        "components/nm-icon/animated/type.tsx",
+        "components/nm-icon/animated/upload.tsx",
+        "components/nm-icon/animated/user-round.tsx",
+        "components/nm-icon/animated/user.tsx",
+        "components/nm-icon/animated/users-round.tsx",
+        "components/nm-icon/animated/users.tsx",
+        "components/nm-icon/animated/volume-2.tsx",
+        "components/nm-icon/animated/wand-sparkles.tsx",
+        "components/nm-icon/animated/x.tsx",
+        "components/nm-icon/animated/zap.tsx",
+        "components/nm-icon/animated/zoom-in.tsx",
+        "components/nm-icon/animated/zoom-out.tsx",
+        "components/nm-icon/nm-icon.css",
+        "components/nm-icon/nm-icon.tsx",
+        "components/nm-icon/nm-lucide-extended.tsx",
+        "components/nm-icon/nm-lucide.tsx",
+        "components/nm-input/nm-input.css",
+        "components/nm-input/nm-input.tsx",
+        "components/nm-kbd/nm-kbd.css",
+        "components/nm-kbd/nm-kbd.tsx",
+        "components/nm-separator/nm-separator.css",
+        "components/nm-separator/nm-separator.tsx",
+        "components/nm-sidebar/nm-sidebar.css",
+        "components/nm-sidebar/nm-sidebar.tsx",
+        "components/nm-skeleton/nm-skeleton.css",
+        "components/nm-skeleton/nm-skeleton.tsx",
+        "components/nm-small-icon-button/nm-small-icon-button.tsx",
+        "components/nm-tooltip/nm-tooltip.css",
+        "components/nm-tooltip/nm-tooltip.tsx",
+        "components/nordman-icon-button/nordman-icon-button.css",
+        "components/nordman-icon-button/nordman-icon-button.tsx",
+        "config/nm-drawer.ts",
+        "config/nm-icon-button.ts",
+        "config/nm-icons-extended.ts",
+        "config/nm-icons.ts",
+        "config/nm-sidebar.ts",
+        "config/nm-small-icon-button.ts",
+        "config/nordman-chrome.ts",
+        "kit-logger.ts",
+        "lib/logger.ts",
+        "lib/nm-class.ts",
+        "lib/nm-motion.ts"
+      ],
+      "libs": [
+        "@animate-ui/react",
+        "@base-ui/react",
+        "lucide-react",
+        "motion"
+      ],
+      "uses": [
+        "chip",
+        "drawer",
+        "icon",
+        "input",
+        "kbd",
+        "separator",
+        "skeleton",
+        "small-icon-button",
+        "tooltip",
+        "nordman-icon-button"
+      ]
+    },
     "skeleton": {
       "dir": "nm-skeleton",
       "files": [
@@ -5450,27 +5681,36 @@
         "components/nm-icon/nm-lucide.tsx",
         "components/nm-prose/nm-prose.css",
         "components/nm-prose/nm-prose.tsx",
-        "components/nm-segmented/nm-segmented.css",
-        "components/nm-segmented/nm-segmented.tsx",
+        "components/nm-resize-handle/nm-resize-handle.css",
+        "components/nm-resize-handle/nm-resize-handle.tsx",
+        "components/nm-side-panel/nm-side-panel.css",
+        "components/nm-side-panel/nm-side-panel.tsx",
         "components/nm-textarea/nm-textarea.css",
         "components/nm-textarea/nm-textarea.tsx",
+        "components/nm-toolbar/nm-toolbar.css",
+        "components/nm-toolbar/nm-toolbar.tsx",
+        "config/nm-button.ts",
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
-        "config/nm-segmented.ts",
+        "config/nm-side-panel.ts",
         "kit-logger.ts",
         "lib/logger.ts",
-        "lib/nm-class.ts"
+        "lib/nm-class.ts",
+        "lib/nm-motion.ts"
       ],
       "libs": [
         "@animate-ui/react",
+        "@base-ui/react",
         "lucide-react",
         "motion"
       ],
       "uses": [
         "icon",
         "prose",
-        "segmented"
+        "resize-handle",
+        "side-panel",
+        "toolbar"
       ]
     },
     "toggle": {

package/registry/ui/components/nm-alert-dialog/nm-alert-dialog.css

@@ -0,0 +1,4 @@
+  /* The alert dialog shares the dialog's surface. It is narrower: a question and two actions. */
+  .nm-alert-dialog {
+    width: min(var(--nm-width-alert-dialog), calc(100% - var(--nm-space-24) * 2));
+  }

package/registry/ui/components/nm-alert-dialog/nm-alert-dialog.tsx

@@ -0,0 +1,43 @@
+import type { ComponentProps } from 'react';
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import { nmClass } from '../../lib/nm-class.ts';
+/**
+ * Base UI Alert Dialog, in the shadcn composition, styled by NIF tokens.
+ * A dialog that asks before something that cannot be undone. It does not close on a click outside, only from its actions or Escape.
+ */
+export function NmAlertDialog(props: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+export function NmAlertDialogTrigger(props: AlertDialogPrimitive.Trigger.Props) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+export function NmAlertDialogContent({ className, children, ...props }: AlertDialogPrimitive.Popup.Props) {
+  return (
+    <AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Backdrop data-slot="alert-dialog-overlay" className="nm-dialog__backdrop" />
+      <AlertDialogPrimitive.Popup data-slot="alert-dialog-content" className={nmClass('nm-dialog nm-alert-dialog', className as string)} {...props}>
+        {children}
+      </AlertDialogPrimitive.Popup>
+    </AlertDialogPrimitive.Portal>
+  );
+}
+export function NmAlertDialogHeader({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="alert-dialog-header" className={nmClass('nm-dialog__header', className)} {...props} />;
+}
+export function NmAlertDialogFooter({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="alert-dialog-footer" className={nmClass('nm-dialog__footer', className)} {...props} />;
+}
+export function NmAlertDialogTitle({ className, ...props }: AlertDialogPrimitive.Title.Props) {
+  return <AlertDialogPrimitive.Title data-slot="alert-dialog-title" className={nmClass('nm-dialog__title', className as string)} {...props} />;
+}
+export function NmAlertDialogDescription({ className, ...props }: AlertDialogPrimitive.Description.Props) {
+  return <AlertDialogPrimitive.Description data-slot="alert-dialog-description" className={nmClass('nm-dialog__description', className as string)} {...props} />;
+}
+/** The action that confirms. Give it a NIF Button with `render`; `tone="danger"` when it destroys. */
+export function NmAlertDialogAction(props: AlertDialogPrimitive.Close.Props) {
+  return <AlertDialogPrimitive.Close data-slot="alert-dialog-action" {...props} />;
+}
+/** The action that cancels. Give it a NIF Button with `render`. */
+export function NmAlertDialogCancel(props: AlertDialogPrimitive.Close.Props) {
+  return <AlertDialogPrimitive.Close data-slot="alert-dialog-cancel" {...props} />;
+}

package/registry/ui/components/nm-dialog/nm-dialog.css

@@ -56,6 +56,21 @@
     color: var(--nm-fg-muted);
     font-size: var(--nm-type-ui-sm);
   }
+  .nm-dialog__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-12);
+    min-height: 0;
+    padding: var(--nm-space-16) var(--nm-space-24) 0;
+    overflow: auto;
+  }
+  .nm-dialog__footer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nm-space-8);
+    justify-content: flex-end;
+    padding: var(--nm-space-24);
+  }
 
   .nm-dialog[data-size='full'] {
     inset: 0;

package/registry/ui/components/nm-dialog/nm-dialog.tsx

@@ -31,6 +31,14 @@ export function NmDialogHeader({ className, ...props }: ComponentProps<'div'>) {
   return <div data-slot="dialog-header" className={nmClass('nm-dialog__header', className)} {...props} />;
 }
 
+/** The content between the header and the footer. It scrolls when the dialog is full. */
+export function NmDialogBody({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="dialog-body" className={nmClass('nm-dialog__body', className)} {...props} />;
+}
+/** The actions at the end, right-aligned. */
+export function NmDialogFooter({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="dialog-footer" className={nmClass('nm-dialog__footer', className)} {...props} />;
+}
 export function NmDialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
   return <DialogPrimitive.Title data-slot="dialog-title" className={nmClass('nm-dialog__title', className as string)} {...props} />;
 }

package/registry/ui/components/nm-drawer/nm-drawer.css

@@ -0,0 +1,70 @@
+  .nm-drawer__backdrop {
+    position: fixed;
+    z-index: var(--nm-menu-z);
+    inset: 0;
+    background: rgb(var(--nm-canvas-rgb) / 0.7);
+    transition: opacity var(--reveal) var(--ease);
+  }
+  .nm-drawer__backdrop[data-starting-style],
+  .nm-drawer__backdrop[data-ending-style] {
+    opacity: 0;
+  }
+  /* The panel sits on an edge and takes the whole height. It slides in from its own edge. */
+  .nm-drawer {
+    position: fixed;
+    z-index: var(--nm-menu-z);
+    inset-block: 0;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: var(--nm-width-drawer);
+    max-width: 100%;
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    outline: none;
+    /* The motion popup owns transform: it slides the panel in from its side. */
+    transition: opacity var(--reveal) var(--ease);
+  }
+  .nm-drawer[data-side='left'] {
+    inset-inline-start: 0;
+    border-inline-end: var(--nm-rule) solid var(--nm-line-strong);
+  }
+  .nm-drawer[data-side='right'] {
+    inset-inline-end: 0;
+    border-inline-start: var(--nm-rule) solid var(--nm-line-strong);
+  }
+  .nm-drawer[data-starting-style],
+  .nm-drawer[data-ending-style] {
+    opacity: 0;
+  }
+  .nm-drawer__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-4);
+    padding: var(--nm-space-16);
+  }
+  .nm-drawer__footer {
+    display: flex;
+    gap: var(--nm-space-8);
+    justify-content: flex-end;
+    margin-top: auto;
+    padding: var(--nm-space-16);
+  }
+  .nm-drawer__title {
+    margin: 0;
+    font-size: var(--nm-type-body);
+    font-weight: var(--nm-weight-medium);
+  }
+  .nm-drawer__description {
+    margin: 0;
+    color: var(--nm-fg-muted);
+    font-size: var(--nm-type-ui-sm);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .nm-drawer,
+    .nm-drawer__backdrop {
+      transition: none;
+    }
+  }

package/registry/ui/components/nm-drawer/nm-drawer.tsx

@@ -0,0 +1,41 @@
+import type { ComponentProps } from 'react';
+import { Dialog as DialogPrimitive } from '../../lib/nm-motion.ts';
+import { nmClass } from '../../lib/nm-class.ts';
+import type { NmDrawerSide } from '../../config/nm-drawer.ts';
+
+/**
+ * A panel that slides in from an edge, over the page, with a scrim behind it. The shadcn Sheet, on the Base UI
+ * Dialog, styled by NIF tokens. For navigation on a phone, filters, or a form that should not leave the page.
+ */
+export function NmDrawer(props: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="drawer" {...props} />;
+}
+export function NmDrawerTrigger(props: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+export function NmDrawerClose(props: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+/** The panel. `side` is the edge it comes from. Its width is the --nm-width-drawer token. */
+export function NmDrawerContent({ className, children, side = 'left', ...props }: DialogPrimitive.Popup.Props & { side?: NmDrawerSide }) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Backdrop data-slot="drawer-overlay" className="nm-drawer__backdrop" />
+      <DialogPrimitive.Popup data-slot="drawer-content" data-side={side} from={side} className={nmClass('nm-drawer', className as string)} {...props}>
+        {children}
+      </DialogPrimitive.Popup>
+    </DialogPrimitive.Portal>
+  );
+}
+export function NmDrawerHeader({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="drawer-header" className={nmClass('nm-drawer__header', className)} {...props} />;
+}
+export function NmDrawerFooter({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="drawer-footer" className={nmClass('nm-drawer__footer', className)} {...props} />;
+}
+export function NmDrawerTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return <DialogPrimitive.Title data-slot="drawer-title" className={nmClass('nm-drawer__title', className as string)} {...props} />;
+}
+export function NmDrawerDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+  return <DialogPrimitive.Description data-slot="drawer-description" className={nmClass('nm-drawer__description', className as string)} {...props} />;
+}