@usefragments/ui 1.6.0 → 2.0.0

package/src/components/Dialog/Dialog.module.scss

@@ -1,13 +1,12 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action" as action;
 @use "../../recipes/overlay" as overlay;
 
 .backdrop {
-  position: fixed;
-  z-index: var(--fui-overlay-layer-backdrop, 50);
-  inset: 0;
-  background-color: var(--fui-backdrop, $fui-backdrop);
+  @include overlay.backdrop;
+
   opacity: 0;
   transition: opacity var(--fui-transition-normal, $fui-transition-normal);
 
@@ -25,13 +24,21 @@
   @include overlay.safe-viewport;
 
   position: fixed;
-  z-index: var(--fui-overlay-layer-modal, 51);
+  z-index: var(--fui-overlay-layer-modal, #{$fui-overlay-layer-modal});
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-block: var(--_fui-overlay-safe-top) var(--_fui-overlay-safe-bottom);
-  padding-inline: var(--_fui-overlay-safe-left) var(--_fui-overlay-safe-right);
+  padding-block: var(
+      --_fui-overlay-safe-top,
+      var(--fui-raw-space-16, #{measurements.raw-space(16)})
+    )
+    var(--_fui-overlay-safe-bottom, var(--fui-raw-space-16, #{measurements.raw-space(16)}));
+  padding-inline: var(
+      --_fui-overlay-safe-left,
+      var(--fui-raw-space-16, #{measurements.raw-space(16)})
+    )
+    var(--_fui-overlay-safe-right, var(--fui-raw-space-16, #{measurements.raw-space(16)}));
   overflow: auto;
 }
 
@@ -42,7 +49,7 @@
   inline-size: 100%;
   max-inline-size: overlay.dialog-max("md");
   opacity: 0;
-  transform: scale(0.95) translateY(-$fui-anim-offset-md);
+  transform: scale(0.95) translateY(calc(-1 * var(--fui-anim-offset-md, #{$fui-anim-offset-md})));
   transition:
     opacity var(--fui-transition-normal, $fui-transition-normal),
     transform var(--fui-transition-normal, $fui-transition-normal);
@@ -54,12 +61,12 @@
 
   &[data-starting-style] {
     opacity: 0;
-    transform: scale(0.95) translateY(-$fui-anim-offset-md);
+    transform: scale(0.95) translateY(calc(-1 * var(--fui-anim-offset-md, #{$fui-anim-offset-md})));
   }
 
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.95) translateY($fui-anim-offset-md);
+    transform: scale(0.95) translateY(var(--fui-anim-offset-md, #{$fui-anim-offset-md}));
   }
 }
 
@@ -80,7 +87,10 @@
 }
 
 .full {
-  max-inline-size: var(--_fui-overlay-safe-inline);
+  max-inline-size: var(
+    --_fui-overlay-safe-inline,
+    calc(100dvw - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+  );
 }
 
 .header {
@@ -90,14 +100,14 @@
 .title {
   @include overlay.modal-title;
 
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-primary, $fui-text-primary);
 }
 
 .description {
   @include overlay.description;
 
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-secondary, $fui-text-secondary);
 }
 
@@ -107,35 +117,19 @@
 
 .footer {
   @include overlay.footer;
-
-  border-top: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
-  border-radius: 0 0 var(--fui-radius-lg, $fui-radius-lg) var(--fui-radius-lg, $fui-radius-lg);
-  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
 }
 
 .close {
   @include button-reset;
   @include interactive-base;
   @include overlay.close;
-
-  border-radius: var(--fui-radius-md, $fui-radius-md);
-  color: var(--fui-text-secondary, $fui-text-secondary);
-
-  &:hover {
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
-    color: var(--fui-text-primary, $fui-text-primary);
-  }
-
-  svg {
-    inline-size: action.icon-size("sm");
-    block-size: action.icon-size("sm");
-  }
 }
 
 .popup:has(.close) .header {
   padding-inline-end: calc(
-    var(--fui-overlay-close-inset, var(--fui-raw-space-12, 12px)) + #{action.track("sm")} +
-      var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px))
+    var(--fui-overlay-close-inset, var(--fui-raw-space-12, #{measurements.raw-space(12)})) +
+      #{action.track("sm")} +
+      var(--fui-overlay-section-gap, var(--fui-raw-space-8, #{measurements.raw-space(8)}))
   );
 }
 

package/src/components/Dialog/index.tsx

@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import { Dialog as BaseDialog } from '@base-ui/react/dialog';
-import styles from './Dialog.module.scss';
+import * as React from "react";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import styles from "./Dialog.module.scss";
 
 // ============================================
 // Types
@@ -12,6 +12,8 @@ import styles from './Dialog.module.scss';
  * Modal dialog overlay for confirmations, forms, and focused tasks.
  * @see https://usefragments.com/components/dialog
  */
+export type DialogWidth = "sm" | "md" | "lg" | "xl" | "full";
+
 export interface DialogProps {
   children: React.ReactNode;
   /** Controlled open state */
@@ -27,20 +29,23 @@ export interface DialogProps {
 
 export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  /** Dialog width.
+  /** Dialog width. `full` spans the safe viewport.
    * @default "md"
-   * @see https://usefragments.com/components/dialog#sizes */
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+   * @see https://usefragments.com/components/dialog#widths */
+  width?: DialogWidth;
   /** Whether the dialog should autofocus content on open.
    * @default true */
   initialFocus?: boolean;
 }
 
-export interface DialogTitleProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+export interface DialogTitleProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
   children: React.ReactNode;
 }
 
-export interface DialogDescriptionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+export interface DialogDescriptionProps extends Omit<
+  React.HTMLAttributes<HTMLElement>,
+  "children"
+> {
   children: React.ReactNode;
 }
 
@@ -61,7 +66,7 @@ type DialogTriggerAsButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>
   asChild?: false;
 };
 
-type DialogTriggerAsChildProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {
+type DialogTriggerAsChildProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
   children: React.ReactElement;
   asChild: true;
 };
@@ -73,7 +78,7 @@ type DialogCloseAsButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
   asChild?: false;
 };
 
-type DialogCloseAsChildProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {
+type DialogCloseAsChildProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
   children: React.ReactElement;
   asChild: true;
 };
@@ -108,13 +113,7 @@ function CloseIcon() {
 // Components
 // ============================================
 
-function DialogRoot({
-  children,
-  open,
-  defaultOpen,
-  onOpenChange,
-  modal = true,
-}: DialogProps) {
+function DialogRoot({ children, open, defaultOpen, onOpenChange, modal = true }: DialogProps) {
   return (
     <BaseDialog.Root
       open={open}
@@ -127,15 +126,14 @@ function DialogRoot({
   );
 }
 
-function DialogTrigger({
-  children,
-  asChild,
-  className,
-  ...htmlProps
-}: DialogTriggerProps) {
+function DialogTrigger({ children, asChild, className, ...htmlProps }: DialogTriggerProps) {
   if (asChild) {
     return (
-      <BaseDialog.Trigger {...htmlProps} className={className} render={children as React.ReactElement}>
+      <BaseDialog.Trigger
+        {...htmlProps}
+        className={className}
+        render={children as React.ReactElement}
+      >
         {null}
       </BaseDialog.Trigger>
     );
@@ -150,14 +148,12 @@ function DialogTrigger({
 
 function DialogContent({
   children,
-  size = 'md',
+  width = "md",
   initialFocus = true,
   className,
   ...htmlProps
 }: DialogContentProps) {
-  const popupClasses = [styles.popup, styles[size], className]
-    .filter(Boolean)
-    .join(' ');
+  const popupClasses = [styles.popup, styles[width], className].filter(Boolean).join(" ");
 
   return (
     <BaseDialog.Portal>
@@ -172,17 +168,25 @@ function DialogContent({
 }
 
 function DialogHeader({ children, className, ...htmlProps }: DialogHeaderProps) {
-  const classes = [styles.header, className].filter(Boolean).join(' ');
-  return <div {...htmlProps} className={classes}>{children}</div>;
+  const classes = [styles.header, className].filter(Boolean).join(" ");
+  return (
+    <div {...htmlProps} className={classes}>
+      {children}
+    </div>
+  );
 }
 
 function DialogTitle({ children, className, ...htmlProps }: DialogTitleProps) {
-  const classes = [styles.title, className].filter(Boolean).join(' ');
-  return <BaseDialog.Title {...htmlProps} className={classes}>{children}</BaseDialog.Title>;
+  const classes = [styles.title, className].filter(Boolean).join(" ");
+  return (
+    <BaseDialog.Title {...htmlProps} className={classes}>
+      {children}
+    </BaseDialog.Title>
+  );
 }
 
 function DialogDescription({ children, className, ...htmlProps }: DialogDescriptionProps) {
-  const classes = [styles.description, className].filter(Boolean).join(' ');
+  const classes = [styles.description, className].filter(Boolean).join(" ");
   return (
     <BaseDialog.Description {...htmlProps} className={classes}>
       {children}
@@ -191,13 +195,21 @@ function DialogDescription({ children, className, ...htmlProps }: DialogDescript
 }
 
 function DialogBody({ children, className, ...htmlProps }: DialogBodyProps) {
-  const classes = [styles.body, className].filter(Boolean).join(' ');
-  return <div {...htmlProps} className={classes}>{children}</div>;
+  const classes = [styles.body, className].filter(Boolean).join(" ");
+  return (
+    <div {...htmlProps} className={classes}>
+      {children}
+    </div>
+  );
 }
 
 function DialogFooter({ children, className, ...htmlProps }: DialogFooterProps) {
-  const classes = [styles.footer, className].filter(Boolean).join(' ');
-  return <div {...htmlProps} className={classes}>{children}</div>;
+  const classes = [styles.footer, className].filter(Boolean).join(" ");
+  return (
+    <div {...htmlProps} className={classes}>
+      {children}
+    </div>
+  );
 }
 
 function DialogClose({ children, asChild, className, ...htmlProps }: DialogCloseProps) {
@@ -208,7 +220,7 @@ function DialogClose({ children, asChild, className, ...htmlProps }: DialogClose
         {...htmlProps}
         data-dialog-close
         aria-label="Close dialog"
-        className={[styles.close, className].filter(Boolean).join(' ')}
+        className={[styles.close, className].filter(Boolean).join(" ")}
       >
         <CloseIcon />
       </BaseDialog.Close>

package/src/components/Drawer/Drawer.contract.json

@@ -1,15 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Drawer",
-  "description": "A panel that slides in from screen edges. Extends the Dialog pattern with slide animations and edge positioning.",
-  "category": "feedback",
-  "tags": [
-    "drawer",
-    "sheet",
-    "panel",
-    "sidebar",
-    "slide-over"
-  ],
+  "description": "Slides a panel in from a screen edge and dims the page behind it.",
+  "category": "overlays",
+  "tags": ["drawer", "sheet", "panel", "sidebar", "slide-over"],
   "status": "stable",
   "sourcePath": "src/components/Drawer/index.tsx",
   "exportName": "Drawer",
@@ -51,25 +45,23 @@
   },
   "usage": {
     "when": [
-      "Side panels for editing or creating content",
-      "Mobile-style bottom sheets for actions",
-      "Navigation panels that slide in from the left",
-      "Detail views that overlay the main content"
+      "Editing or creating alongside the page behind it",
+      "Touch-reachable action sheets",
+      "Navigation that slides in and back out",
+      "Detail views that overlay rather than replace"
     ],
     "whenNot": [
-      "Centered modal dialogs (use Dialog)",
-      "Non-blocking notifications (use Toast)",
-      "Permanent side navigation (use Sidebar)",
-      "Small contextual menus (use Menu or Popover)"
+      "A centred task (use Dialog)",
+      "Navigation that stays on screen (use Sidebar)",
+      "A short list of actions (use Menu or Popover)",
+      "Feedback the user does not act on (use Toast)"
     ],
     "guidelines": [
-      "Default to right side for content editing and forms",
-      "Use left side for navigation drawers",
-      "Use bottom for mobile-style action sheets",
-      "Provide clear close affordance (X button or cancel)",
-      "Keep drawer content focused on a single task",
-      "Drawer.Trigger and Drawer.Close with asChild require a single valid React element child",
-      "Set Drawer.Content initialFocus={false} when custom focus management is needed"
+      "Right for editing, left for navigation, bottom for touch",
+      "Always give the user a visible way out",
+      "One task per drawer",
+      "asChild on Trigger and Close needs a single element child",
+      "Set initialFocus={false} when you place focus yourself"
     ],
     "accessibility": [
       "Automatically traps focus within the drawer",
@@ -81,23 +73,23 @@
   "examples": [
     {
       "name": "Default",
-      "description": "Right-side drawer with header, body, and footer",
-      "code": "<Drawer>\n  <Drawer.Trigger asChild>\n    <Button>Open Drawer</Button>\n  </Drawer.Trigger>\n  <Drawer.Content>\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Drawer Title</Drawer.Title>\n      <Drawer.Description>\n        A panel sliding in from the right.\n      </Drawer.Description>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Drawer content goes here.</p>\n    </Drawer.Body>\n    <Drawer.Footer>\n      <Drawer.Close asChild>\n        <Button variant=\"secondary\">Cancel</Button>\n      </Drawer.Close>\n      <Button variant=\"primary\">Save</Button>\n    </Drawer.Footer>\n  </Drawer.Content>\n</Drawer>"
+      "description": "Enters from the right, the default for editing and forms.",
+      "code": "<Drawer>\n  <Drawer.Trigger asChild>\n    <Button>Open Drawer</Button>\n  </Drawer.Trigger>\n  <Drawer.Content>\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Drawer Title</Drawer.Title>\n      <Drawer.Description>\n        A panel sliding in from the right.\n      </Drawer.Description>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Drawer content goes here.</p>\n    </Drawer.Body>\n    <Drawer.Footer>\n      <Drawer.Close asChild>\n        <Button variant=\"soft\">Cancel</Button>\n      </Drawer.Close>\n      <Button variant=\"solid\">Save</Button>\n    </Drawer.Footer>\n  </Drawer.Content>\n</Drawer>"
     },
     {
       "name": "Left Side",
-      "description": "Left-side drawer for navigation",
-      "code": "<Drawer>\n  <Drawer.Trigger asChild>\n    <Button variant=\"secondary\">Open Left</Button>\n  </Drawer.Trigger>\n  <Drawer.Content side=\"left\">\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Navigation</Drawer.Title>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Left-side drawer for navigation or filters.</p>\n    </Drawer.Body>\n  </Drawer.Content>\n</Drawer>"
+      "description": "Enters from the left, where navigation belongs.",
+      "code": "<Drawer>\n  <Drawer.Trigger asChild>\n    <Button variant=\"soft\">Open Left</Button>\n  </Drawer.Trigger>\n  <Drawer.Content side=\"left\">\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Navigation</Drawer.Title>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Left-side drawer for navigation or filters.</p>\n    </Drawer.Body>\n  </Drawer.Content>\n</Drawer>"
     },
     {
       "name": "Bottom Sheet",
-      "description": "Bottom drawer for mobile-style actions",
-      "code": "<Drawer>\n  <Drawer.Trigger asChild>\n    <Button variant=\"secondary\">Open Bottom Sheet</Button>\n  </Drawer.Trigger>\n  <Drawer.Content side=\"bottom\" size=\"sm\">\n    <Drawer.Header>\n      <Drawer.Title>Actions</Drawer.Title>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Bottom sheet for mobile-style actions.</p>\n    </Drawer.Body>\n  </Drawer.Content>\n</Drawer>"
+      "description": "Rises from the bottom for touch-reachable actions.",
+      "code": "<Drawer>\n  <Drawer.Trigger asChild>\n    <Button variant=\"soft\">Open Bottom Sheet</Button>\n  </Drawer.Trigger>\n  <Drawer.Content side=\"bottom\" width=\"sm\">\n    <Drawer.Header>\n      <Drawer.Title>Actions</Drawer.Title>\n    </Drawer.Header>\n    <Drawer.Body>\n      <p>Bottom sheet for mobile-style actions.</p>\n    </Drawer.Body>\n  </Drawer.Content>\n</Drawer>"
     },
     {
       "name": "With Form",
-      "description": "Drawer with a form layout",
-      "code": "<Drawer>\n  <Drawer.Trigger asChild>\n    <Button>Edit Settings</Button>\n  </Drawer.Trigger>\n  <Drawer.Content size=\"md\">\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Settings</Drawer.Title>\n      <Drawer.Description>Update your preferences.</Drawer.Description>\n    </Drawer.Header>\n    <Drawer.Body>\n      <Stack gap=\"md\">\n        <Input label=\"Display Name\" placeholder=\"Enter name\" />\n        <Input label=\"Email\" type=\"email\" placeholder=\"you@example.com\" />\n      </Stack>\n    </Drawer.Body>\n    <Drawer.Footer>\n      <Drawer.Close asChild>\n        <Button variant=\"secondary\">Cancel</Button>\n      </Drawer.Close>\n      <Button variant=\"primary\">Save Changes</Button>\n    </Drawer.Footer>\n  </Drawer.Content>\n</Drawer>"
+      "description": "Fields in the body, submit and cancel pinned to the footer.",
+      "code": "<Drawer>\n  <Drawer.Trigger asChild>\n    <Button>Edit Settings</Button>\n  </Drawer.Trigger>\n  <Drawer.Content width=\"md\">\n    <Drawer.Close />\n    <Drawer.Header>\n      <Drawer.Title>Settings</Drawer.Title>\n      <Drawer.Description>Update your preferences.</Drawer.Description>\n    </Drawer.Header>\n    <Drawer.Body>\n      <Stack gap=\"md\">\n        <Input label=\"Display Name\" placeholder=\"Enter name\" />\n        <Input label=\"Email\" type=\"email\" placeholder=\"you@example.com\" />\n      </Stack>\n    </Drawer.Body>\n    <Drawer.Footer>\n      <Drawer.Close asChild>\n        <Button variant=\"soft\">Cancel</Button>\n      </Drawer.Close>\n      <Button variant=\"solid\">Save Changes</Button>\n    </Drawer.Footer>\n  </Drawer.Content>\n</Drawer>"
     }
   ],
   "relations": [
@@ -123,14 +115,10 @@
       "onOpenChange: (open) => void - open state handler",
       "modal: boolean - blocks page interaction (default: true)",
       "Drawer.Content side: left|right|top|bottom - slide direction (default: right)",
-      "Drawer.Content size: sm|md|lg|xl|full - panel size",
+      "Drawer.Content width: sm|md|lg|xl|full - panel width, or height for top/bottom (default: md)",
       "Drawer.Content initialFocus: boolean - auto-focus popup on open (default: true)"
     ],
-    "a11yRules": [
-      "A11Y_DIALOG_FOCUS",
-      "A11Y_DIALOG_ESCAPE",
-      "A11Y_DIALOG_LABEL"
-    ]
+    "a11yRules": ["A11Y_DIALOG_FOCUS", "A11Y_DIALOG_ESCAPE", "A11Y_DIALOG_LABEL"]
   },
   "ai": {
     "compositionPattern": "compound",
@@ -145,11 +133,9 @@
       "Body",
       "Footer"
     ],
-    "requiredChildren": [
-      "Content"
-    ],
+    "requiredChildren": ["Content"],
     "commonPatterns": [
-      "<Drawer><Drawer.Trigger><Button>Open</Button></Drawer.Trigger><Drawer.Content><Drawer.Close /><Drawer.Header><Drawer.Title>{title}</Drawer.Title></Drawer.Header><Drawer.Body>{content}</Drawer.Body><Drawer.Footer><Drawer.Close asChild><Button variant=\"secondary\">Cancel</Button></Drawer.Close><Button>Save</Button></Drawer.Footer></Drawer.Content></Drawer>"
+      "<Drawer><Drawer.Trigger><Button>Open</Button></Drawer.Trigger><Drawer.Content><Drawer.Close /><Drawer.Header><Drawer.Title>{title}</Drawer.Title></Drawer.Header><Drawer.Body>{content}</Drawer.Body><Drawer.Footer><Drawer.Close asChild><Button variant=\"soft\">Cancel</Button></Drawer.Close><Button>Save</Button></Drawer.Footer></Drawer.Content></Drawer>"
     ]
   },
   "provenance": {