@konstructio/ui 0.1.5 → 0.1.7

package/dist/components/Sheet/components/SheetStep/SheetStep.js

@@ -0,0 +1,94 @@
+"use client";
+import { t as C } from "../../../../utils-DnIJruo0.js";
+import { useEffect as O, useLayoutEffect as L, useRef as c } from "react";
+import { jsx as j } from "react/jsx-runtime";
+import { animate as y, motion as G, useMotionValue as M } from "motion/react";
+var h = "100%", u = {
+  type: "spring",
+  stiffness: 380,
+  damping: 38
+}, E = { duration: 0 }, V = 0.05, l = (t) => typeof t == "number" ? t : t.direction, P = "-30%", W = {
+  enter: (t) => l(t) > 0 ? {
+    x: h,
+    opacity: 1,
+    zIndex: 1
+  } : {
+    x: P,
+    opacity: 1,
+    zIndex: 0
+  },
+  center: (t) => ({
+    x: 0,
+    opacity: 1,
+    zIndex: l(t) > 0 ? 1 : 0
+  }),
+  exit: (t) => typeof t == "object" && t.instant ? {
+    opacity: 0,
+    transition: E
+  } : l(t) > 0 ? {
+    x: P,
+    opacity: 1,
+    zIndex: 0
+  } : {
+    x: h,
+    opacity: 1,
+    zIndex: 1
+  }
+}, D = ({ step: t, direction: R, animated: s, canSwipeBack: r, onMount: I, commitSignal: f, isArmed: S, onBackStart: m, onBackMove: A, onBackEnd: T, onBackCommit: g, onBackCancel: N, children: _ }) => {
+  const n = M(0), a = c(null), o = c(!1), d = c(f);
+  L(() => {
+    I(a.current?.getBoundingClientRect().height ?? 0);
+  }, []);
+  const x = () => {
+    const i = n.get();
+    if (typeof i == "string") {
+      const e = a.current?.offsetWidth ?? 0;
+      n.set(parseFloat(i) / 100 * e || 0);
+    }
+  }, p = () => {
+    n.stop(), x(), y(n, a.current?.offsetWidth ?? 0, {
+      ...u,
+      onComplete: g
+    });
+  };
+  O(() => {
+    d.current !== f && (d.current = f, p());
+  }, [f]);
+  const b = (i, e) => {
+    o.current = r && S(e), o.current && (n.stop(), x(), m());
+  }, z = (i, e) => {
+    if (!o.current) return;
+    const v = e.offset.x >= 0 ? e.offset.x : e.offset.x * V;
+    n.set(v), A(Math.max(v, 0));
+  }, F = (i, e) => {
+    if (o.current) {
+      if (o.current = !1, T(e) === "back") {
+        p();
+        return;
+      }
+      y(n, 0, {
+        ...u,
+        onComplete: N
+      });
+    }
+  };
+  return /* @__PURE__ */ j(G.div, {
+    ref: a,
+    custom: R,
+    className: C("relative flex w-full flex-col bg-white dark:bg-metal-800", r && "touch-pan-y"),
+    style: { x: n },
+    variants: s ? W : void 0,
+    initial: s ? "enter" : !1,
+    animate: "center",
+    exit: s ? "exit" : void 0,
+    transition: s ? u : E,
+    onPanStart: r ? b : void 0,
+    onPan: r ? z : void 0,
+    onPanEnd: r ? F : void 0,
+    children: _
+  }, t);
+};
+D.displayName = "KonstructSheetStep";
+export {
+  D as SheetStep
+};

package/dist/components/Sheet/components/index.js

@@ -0,0 +1,4 @@
+import { SheetStep as t } from "./SheetStep/SheetStep.js";
+export {
+  t as SheetStep
+};

package/dist/components/Sheet/utils/index.js

@@ -1,10 +1,37 @@
-var I = 0.25, i = 500;
-function c({ offset: e, velocity: n, panelHeight: o, position: S }) {
-  const s = S === "bottom" ? 1 : -1, t = e * s, r = n * s;
-  return t <= 0 ? !1 : t > o * 0.25 || r > 500;
+var c = 0.25, f = 500;
+function r({ offset: n, velocity: e, position: t }) {
+  const s = t === "bottom" ? 1 : -1;
+  return {
+    distance: n * s,
+    speed: e * s
+  };
+}
+function i(n, e, t) {
+  return n > t * 0.25 || e > 500;
+}
+function u(n) {
+  const { distance: e, speed: t } = r(n);
+  return e <= 0 ? !1 : i(e, t, n.panelHeight);
+}
+function d(n) {
+  const { distance: e, speed: t } = r(n);
+  return e >= 0 ? !1 : i(-e, -t, n.panelHeight);
+}
+function l({ offset: n, velocity: e, panelWidth: t }) {
+  return n <= 0 ? !1 : i(n, e, t);
+}
+function p({ expandable: n, isExpanded: e, restHeight: t = 0, ...s }) {
+  if (n && !e && d(s)) return "expand";
+  if (!u(s)) return "rest";
+  if (!e) return "dismiss";
+  const { distance: o } = r(s), a = o - (s.panelHeight - t) > t * c;
+  return t > 0 && a ? "dismiss" : "collapse";
 }
 export {
-  I as DISMISS_DISTANCE_RATIO,
-  i as DISMISS_VELOCITY,
-  c as shouldDismissSheet
+  c as DISMISS_DISTANCE_RATIO,
+  f as DISMISS_VELOCITY,
+  p as resolveSheetGesture,
+  u as shouldDismissSheet,
+  d as shouldExpandSheet,
+  l as shouldSwipeBack
 };

package/dist/components/Tabs/Tabs.variants.js

@@ -1,11 +1,11 @@
 import { t } from "../../dist-B9GE4SXf.js";
-var e = t([""], {
+var r = t([""], {
   variants: { variant: {
     horizontal: "",
     vertical: "flex gap-6"
   } },
   defaultVariants: { variant: "horizontal" }
-}), r = t([""], {
+}), e = t([""], {
   variants: { variant: { default: "" } },
   defaultVariants: { variant: "default" }
 }), i = t(["flex"], {
@@ -17,9 +17,6 @@ var e = t([""], {
   defaultVariants: { variant: "default" }
 }), f = t([
   "cursor-pointer",
-  "relative",
-  "tap-target",
-  "touch-hit-area",
   "h-[27px]",
   "w-fit",
   "block",
@@ -66,8 +63,8 @@ var e = t([""], {
   defaultVariants: { variant: "default" }
 });
 export {
-  r as contentVariants,
+  e as contentVariants,
   i as listVariants,
-  e as rootVariants,
+  r as rootVariants,
   f as triggerVariants
 };

package/dist/components/Tabs/components/Trigger.js

@@ -1,19 +1,19 @@
-import { i as t } from "../../../dist-DeWnSzlM.js";
+import { i as o } from "../../../dist-DeWnSzlM.js";
 import { Typography as s } from "../../Typography/Typography.js";
 import { t as n } from "../../../utils-DnIJruo0.js";
 import { triggerVariants as u } from "../Tabs.variants.js";
 import { jsx as i } from "react/jsx-runtime";
-var l = (r) => r === void 0 ? "auto" : r ? "active" : "inactive", m = ({ tab: r, label: o, isActive: a, className: e }) => /* @__PURE__ */ i(t, {
+var l = (r) => r === void 0 ? "auto" : r ? "active" : "inactive", m = ({ tab: r, label: a, isActive: t, className: e }) => /* @__PURE__ */ i(o, {
   value: r,
-  className: "group/tab rounded-xs outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-aurora-500 kubefirst:focus-visible:outline-kubefirst-primary",
+  className: "group/tab relative tap-target touch-hit-area rounded-xs outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-aurora-500 kubefirst:focus-visible:outline-kubefirst-primary",
   children: /* @__PURE__ */ i(s, {
     variant: "body2",
     component: "span",
     className: n(u({
-      variant: l(a),
+      variant: l(t),
       className: e
     })),
-    children: o
+    children: a
   })
 });
 m.displayName = "KonstructTabsTrigger";

package/dist/components/VirtualizedTable/components/Header/Header.js

@@ -36,7 +36,7 @@ var j = {
           return /* @__PURE__ */ r("th", {
             scope: "col",
             ref: b ? D(e.id) : void 0,
-            className: t("kvt-header-cell", "px-4", "py-3", "text-left", "text-xs", !o && !a && "first:rounded-tl-lg", !o && !a && "last:rounded-tr-lg", !o && a && k(d, g, H), "border-transparent", "dark:border-t", "dark:border-metal-700", !a && "dark:first:border-l", !a && "dark:last:border-r", a && k(d, g, L), b && "bg-slate-100 dark:bg-metal-800", h.className, f && O[f], _),
+            className: t("kvt-header-cell", "px-4", "py-3", "text-left", "text-xs", !o && !a && "first:rounded-tl-lg", !o && !a && "last:rounded-tr-lg", !o && a && k(d, g, H), "border-transparent", "dark:border-t", "dark:border-metal-700", !a && "dark:first:border-l", !a && "dark:last:border-r", a && k(d, g, L), b && "z-1 bg-slate-100 dark:bg-metal-800", h.className, f && O[f], _),
             style: h.style,
             "aria-sort": x ? j[i || "none"] : void 0,
             children: x ? /* @__PURE__ */ c("button", {

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

@@ -19,6 +19,8 @@ export interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'di
     asChild?: boolean;
     /** Whether the button is disabled */
     disabled?: boolean;
+    /** Sink the button while pressed on touch screens (default: true) */
+    pressEffect?: boolean;
     /** Theme override for this component */
     theme?: Theme;
 }

package/dist/lib/components/Button/Button.variants.d.ts

@@ -1,4 +1,5 @@
 export declare const buttonVariants: (props?: ({
+    pressEffect?: boolean | null | undefined;
     variant?: "link" | "danger" | "primary" | "secondary" | "tertiary" | null | undefined;
     shape?: "circle" | "pill" | null | undefined;
     version?: "default" | "alternate" | null | undefined;

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.4",
+  "version": "0.1.6",
   "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",