@ntmats/hc-ui 0.7.0 → 0.8.0

package/dist/index.d.ts

@@ -310,6 +310,7 @@ export interface DialogProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'ti
  */
 export declare const Dialog: ForwardRefExoticComponent<DialogProps & RefAttributes<HTMLDialogElement>>;
 export type SheetPresentation = 'bottom' | 'center' | 'auto';
+export type SheetHeight = 'content' | 'half';
 interface SheetBaseProps extends Omit<DialogProps, 'size' | 'actions' | 'description' | 'closeLabel' | 'title'> {
     /** Slot under the scrolling body, for the buttons (Clear | Done). */
     footer?: ReactNode;
@@ -321,6 +322,13 @@ interface SheetBaseProps extends Omit<DialogProps, 'size' | 'actions' | 'descrip
     presentation?: SheetPresentation;
     /** Maximum width of the centered panel, in px. Default 440. */
     width?: number;
+    /**
+     * Resting height at the bottom. `content` (default) grows with the content up to almost the
+     * whole screen. `half` rests at half the screen, so what is behind stays in sight (dimmed),
+     * and the content scrolls inside; a drag up from the grabber or header still goes to full
+     * height, and a drag down from there comes back to half. No effect on the centered panel.
+     */
+    height?: SheetHeight;
 }
 /**
  * `Sheet` props. By default the sheet has a header with the title (its accessible name) and a
@@ -346,7 +354,8 @@ export type SheetProps = SheetBaseProps & ({
  * Tab trap, Esc, focus return, scroll lock, stacking and controlled `open`/`onClose`.
  * At the bottom it has a grabber, drag to close (past 20% of its height or a quick
  * flick) and drag up from the grabber or header to full height; content that has
- * scrolled down scrolls back before the sheet moves.
+ * scrolled down scrolls back before the sheet moves. `height="half"` rests at half the
+ * screen instead of growing with the content.
  */
 export declare const Sheet: ForwardRefExoticComponent<SheetProps & RefAttributes<HTMLDialogElement>>;
 export interface SheetOption<T extends string> {

package/dist/index.js

@@ -602,7 +602,7 @@ function useSheetDrag(sheet, latest) {
     };
   }, [sheet, latest]);
 }
-var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, footer, dismissible = true, header = true, onClose, className, style, ...props }, ref) {
+var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, height = "content", footer, dismissible = true, header = true, onClose, className, style, ...props }, ref) {
   const [node, setNode] = useState(null);
   const setRef = useCallback((element) => {
     setNode(element);
@@ -626,7 +626,8 @@ var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, foo
       headerless: !header,
       className: classes("hc-ui-sheet", className),
       style: sized,
-      "data-presentation": presentation
+      "data-presentation": presentation,
+      "data-height": height === "half" ? "half" : void 0
     }
   );
 });

package/dist/styles.css

@@ -854,6 +854,11 @@
   border-radius: 20px 20px 0 0;
 }
 [data-hc-ds] .hc-ui-sheet[data-presentation='bottom'][data-closing] { animation: hc-ui-sheet-down var(--hc-dur-medium) var(--hc-ease-emphasized-accel) forwards; }
+/* height="half": rests at half the screen; the body scrolls. Expanded still wins (full height). */
+[data-hc-ds] .hc-ui-sheet[data-presentation='bottom'][data-height='half']:not([data-expanded]) {
+  height: 50dvh;
+  max-height: 50dvh;
+}
 
 @media (max-width: 959.98px) {
   [data-hc-ds] .hc-ui-sheet[data-presentation='auto'] {
@@ -888,6 +893,10 @@
     border-radius: 20px 20px 0 0;
   }
   [data-hc-ds] .hc-ui-sheet[data-presentation='auto'][data-closing] { animation: hc-ui-sheet-down var(--hc-dur-medium) var(--hc-ease-emphasized-accel) forwards; }
+  [data-hc-ds] .hc-ui-sheet[data-presentation='auto'][data-height='half']:not([data-expanded]) {
+    height: 50dvh;
+    max-height: 50dvh;
+  }
 }
 
 /* Closing by drag: the backdrop fades with the sheet instead of waiting for the exit. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntmats/hc-ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "module",
   "description": "Shared HCUI/Arena React presentation primitives.",
   "license": "UNLICENSED",