@konstructio/ui 0.1.4 → 0.1.6

package/dist/lib/components/Sheet/Sheet.d.ts

@@ -9,11 +9,17 @@ import { Props } from './Sheet.types';
  *
  * Multi-step sheets pass a `step`: when it changes the content slides across
  * (forward for a higher step, back for a lower one) and the panel height
- * animates to the new content.
+ * animates to the new content. With `onBack`, swiping the content towards the
+ * right on a later step goes back the way the iOS back gesture does: the
+ * previous step follows the finger in from the left while the panel grows or
+ * shrinks to its height, and the swipe commits or springs back on release.
  *
- * On touch screens the panel can be dragged by its grab handle or header
- * towards the edge it docks to: it closes past a quarter of its height or on a
- * quick flick, and springs back otherwise.
+ * On touch screens the panel follows a finger on its grab handle or header.
+ * Towards the edge it docks to it closes past a quarter of its height or on a
+ * quick flick, and springs back otherwise. An `expandable` sheet grows with
+ * the finger when pulled away from that edge and, once released, springs the
+ * rest of the way to the full viewport (or back to its natural height); from
+ * there a pull towards the edge shrinks it again, and a long one closes it.
  *
  * @example
  * ```tsx

package/dist/lib/components/Sheet/Sheet.types.d.ts

@@ -16,6 +16,12 @@ export type Props = PropsWithChildren<{
     isOpen: boolean;
     /** Called when the sheet asks to close: scrim tap, Escape, or `closeOnSelect` */
     onClose: () => void;
+    /**
+     * Goes back one step. On a step above the first the header (chevron and
+     * title) becomes the back control in place of `leading`, and swiping the
+     * content towards the right goes back too.
+     */
+    onBack?: () => void;
     /** Heading of the sheet; also its accessible name */
     title: ReactNode;
     /** Keep the title for assistive technology only */
@@ -24,6 +30,12 @@ export type Props = PropsWithChildren<{
     leading?: ReactNode;
     /** Screen edge the sheet docks to (default: 'bottom') */
     position?: SheetPosition;
+    /**
+     * Let a swipe away from the docked edge grow the panel to the full viewport.
+     * A swipe back towards the edge restores its natural height first and only
+     * a further swipe closes it.
+     */
+    expandable?: boolean;
     /**
      * Index of the step the content shows. Changing it slides the content across
      * (forward for a higher index, back for a lower one) and animates the panel

package/dist/lib/components/Sheet/components/SheetStep/SheetStep.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { Props } from './SheetStep.types';
+/**
+ * One step of a sheet's content. It owns its horizontal offset so a step that
+ * was swiped away keeps that offset while it unmounts and the next step mounts
+ * in place.
+ */
+export declare const SheetStep: FC<Props>;

package/dist/lib/components/Sheet/components/SheetStep/SheetStep.types.d.ts

@@ -0,0 +1,32 @@
+import { PanInfo } from 'motion/react';
+import { PropsWithChildren } from 'react';
+export type BackOutcome = 'back' | 'stay';
+/**
+ * What AnimatePresence hands an exiting step: the direction of travel and
+ * whether the step has already been moved out by a gesture.
+ */
+export type StepExitCustom = {
+    direction: number;
+    instant: boolean;
+};
+export type Props = PropsWithChildren<{
+    step: number;
+    direction: number;
+    /** Slide the content across on mount and unmount */
+    animated: boolean;
+    /** The content follows a swipe towards the right and reports its progress */
+    canSwipeBack: boolean;
+    /** Whether the pan that just started is a horizontal one on swipeable content */
+    isArmed: (info: PanInfo) => boolean;
+    onBackStart: () => void;
+    onBackMove: (offset: number) => void;
+    onBackEnd: (info: PanInfo) => BackOutcome;
+    /** Reports the step's own height once it is laid out */
+    onMount: (height: number) => void;
+    /** Bumped to slide the content out as if swiped, e.g. from the back button */
+    commitSignal: number;
+    /** The content has finished sliding out after a completed swipe */
+    onBackCommit: () => void;
+    /** The content has settled back in place after an abandoned swipe */
+    onBackCancel: () => void;
+}>;

package/dist/lib/components/Sheet/components/index.d.ts

@@ -0,0 +1,2 @@
+export { SheetStep } from './SheetStep/SheetStep';
+export type { BackOutcome } from './SheetStep/SheetStep.types';

package/dist/lib/components/Sheet/utils/index.d.ts

@@ -1,11 +1,26 @@
 import { SheetPosition } from '../Sheet.types';
 export declare const DISMISS_DISTANCE_RATIO = 0.25;
 export declare const DISMISS_VELOCITY = 500;
-type DismissGesture = {
+type Gesture = {
     offset: number;
     velocity: number;
     panelHeight: number;
     position: SheetPosition;
 };
-export declare function shouldDismissSheet({ offset, velocity, panelHeight, position, }: DismissGesture): boolean;
+type SheetGesture = Gesture & {
+    expandable: boolean;
+    isExpanded: boolean;
+    /** Height the panel had before it expanded; the collapse target */
+    restHeight?: number;
+};
+export type SheetGestureOutcome = 'dismiss' | 'expand' | 'collapse' | 'rest';
+export declare function shouldDismissSheet(gesture: Gesture): boolean;
+export declare function shouldExpandSheet(gesture: Gesture): boolean;
+type BackGesture = {
+    offset: number;
+    velocity: number;
+    panelWidth: number;
+};
+export declare function shouldSwipeBack({ offset, velocity, panelWidth, }: BackGesture): boolean;
+export declare function resolveSheetGesture({ expandable, isExpanded, restHeight, ...gesture }: SheetGesture): SheetGestureOutcome;
 export {};

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -102,7 +102,7 @@
     "google-libphonenumber": "^3.2.48",
     "i18n-iso-countries": "^7.14.0",
     "js-cookie": "^3.0.8",
-    "lucide-react": "^1.67.0",
+    "lucide-react": "^1.68.0",
     "react-chartjs-2": "^5.3.1",
     "react-day-picker": "^10.0.2",
     "react-feather": "^2.0.10",
@@ -176,7 +176,7 @@
     "jest-axe": "^11.0.0",
     "jsdom": "^30.1.3",
     "lodash": "^4.18.1",
-    "motion": "^14.9.0",
+    "motion": "^14.9.1",
     "postcss": "^8.5.32",
     "prettier": "^3.9.10",
     "rimraf": "^6.1.4",