@revikornmann/muka-ui 0.27.3 → 0.28.1

package/dist/esm/components/MediaViewer/mediaViewerGestures.js

@@ -0,0 +1,58 @@
+/**
+ * Pure gesture maths for `MediaViewer`, kept out of the component so the
+ * swipe and dismiss decisions are unit-testable without pointer events.
+ */
+/** Movement (px) before a drag commits to an axis. */
+export const AXIS_LOCK_DISTANCE = 8;
+/** Fraction of the stage width a slow horizontal drag must pass to page. */
+export const SWIPE_DISTANCE_RATIO = 0.25;
+/** Velocity (px/ms) that pages even on a short horizontal flick. */
+export const SWIPE_VELOCITY = 0.5;
+/** Minimum distance (px) a flick must travel to count. */
+export const FLICK_MIN_DISTANCE = 20;
+/** Downward distance (px) that dismisses on a slow drag. */
+export const DISMISS_DISTANCE = 120;
+/** Downward velocity (px/ms) that dismisses on a short flick. */
+export const DISMISS_VELOCITY = 0.5;
+/**
+ * Decide which axis a drag belongs to, or null while it is still within the
+ * lock distance. Horizontal wins ties so a diagonal flick still pages.
+ */
+export function lockAxis(dx, dy) {
+    if (Math.max(Math.abs(dx), Math.abs(dy)) < AXIS_LOCK_DISTANCE)
+        return null;
+    return Math.abs(dx) >= Math.abs(dy) ? 'x' : 'y';
+}
+/**
+ * Clamp a horizontal drag so it cannot move past the first or last item:
+ * there is nothing to reveal there, so the image stays put (no rubber band).
+ */
+export function clampDragX(dx, hasPrevious, hasNext) {
+    if (dx > 0 && !hasPrevious)
+        return 0;
+    if (dx < 0 && !hasNext)
+        return 0;
+    return dx;
+}
+/**
+ * Where a released horizontal drag goes: `1` to the next item, `-1` to the
+ * previous one, `0` back to the current one. `dx` is already clamped.
+ */
+export function resolveSwipe(dx, velocityX, stageWidth) {
+    const far = stageWidth > 0 && Math.abs(dx) >= stageWidth * SWIPE_DISTANCE_RATIO;
+    const flick = Math.abs(velocityX) >= SWIPE_VELOCITY &&
+        Math.abs(dx) >= FLICK_MIN_DISTANCE &&
+        Math.sign(velocityX) === Math.sign(dx);
+    if (!far && !flick)
+        return 0;
+    return dx < 0 ? 1 : -1;
+}
+/** Whether a released downward drag dismisses the viewer. */
+export function resolveDismiss(dy, velocityY) {
+    if (dy <= 0)
+        return false;
+    if (dy >= DISMISS_DISTANCE)
+        return true;
+    return velocityY >= DISMISS_VELOCITY && dy >= FLICK_MIN_DISTANCE;
+}
+//# sourceMappingURL=mediaViewerGestures.js.map

package/dist/esm/components/MediaViewer/mediaViewerGestures.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediaViewerGestures.js","sourceRoot":"","sources":["../../../../components/MediaViewer/mediaViewerGestures.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,sDAAsD;AACtD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAEpC,4EAA4E;AAC5E,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,CAAC;AAEzC,oEAAoE;AACpE,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAC;AAElC,0DAA0D;AAC1D,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAErC,4DAA4D;AAC5D,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAEpC,iEAAiE;AACjE,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAIpC;;;GAGG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAU,EAAE,EAAU;IAC7C,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,kBAAkB;QAAE,OAAO,IAAI,CAAC;IAC3E,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;AAClD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,EAAU,EAAE,WAAoB,EAAE,OAAgB;IAC3E,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,WAAW;QAAE,OAAO,CAAC,CAAC;IACrC,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,OAAO;QAAE,OAAO,CAAC,CAAC;IACjC,OAAO,EAAE,CAAC;AACZ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,EAAU,EAAE,SAAiB,EAAE,UAAkB;IAC5E,MAAM,GAAG,GAAG,UAAU,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,UAAU,GAAG,oBAAoB,CAAC;IAChF,MAAM,KAAK,GACT,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,cAAc;QACrC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,kBAAkB;QAClC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACzC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK;QAAE,OAAO,CAAC,CAAC;IAC7B,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB,CAAC;AAED,6DAA6D;AAC7D,MAAM,UAAU,cAAc,CAAC,EAAU,EAAE,SAAiB;IAC1D,IAAI,EAAE,IAAI,CAAC;QAAE,OAAO,KAAK,CAAC;IAC1B,IAAI,EAAE,IAAI,gBAAgB;QAAE,OAAO,IAAI,CAAC;IACxC,OAAO,SAAS,IAAI,gBAAgB,IAAI,EAAE,IAAI,kBAAkB,CAAC;AACnE,CAAC"}

package/dist/esm/components/Thumbnail/Thumbnail.css

@@ -33,6 +33,17 @@
   height: 120px;
 }
 
+/* Fluid: fill the parent's width; the shape sets the height via aspect-ratio. */
+.muka-thumbnail--fluid {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1 / 1;
+}
+
+.muka-thumbnail--fluid.muka-thumbnail--4-3 {
+  aspect-ratio: 4 / 3;
+}
+
 .muka-thumbnail--ellipse .muka-thumbnail__frame {
   border-radius: var(--border-radius-full);
 }

package/dist/esm/components/Thumbnail/Thumbnail.js

@@ -19,12 +19,15 @@ import './Thumbnail.css';
  *   and clicking activates `onClick` (e.g. to enlarge in a dialog).
  * - **removable** — a tertiary × button in the top-right corner calls
  *   `onRemove` to delete the photo.
+ * - **fluid** — fills its parent's width at the shape's aspect ratio, for
+ *   responsive grids; **lazy** defers loading the image until it nears the
+ *   viewport.
  *
  * Tokens used: border-radius-lg, color-black-alpha-3, dialog-color-backdrop,
  * button-color-tertiary-*, alias-color-state-error-*, alert-color-error-accent,
  * motion-duration-micro, motion-easing-enter.
  */
-export const Thumbnail = forwardRef(({ src, alt = '', shape = '4:3', loading = false, progress = 0, processing = false, error = false, caption, errorReason, onRemove, onClick, removeLabel = 'Remove photo', viewLabel = 'View photo', className = '', ...props }, ref) => {
+export const Thumbnail = forwardRef(({ src, alt = '', shape = '4:3', fluid = false, lazy = false, imgProps, loading = false, progress = 0, processing = false, error = false, caption, errorReason, onRemove, onClick, removeLabel = 'Remove photo', viewLabel = 'View photo', className = '', ...props }, ref) => {
     const isBusy = loading || processing;
     const isInteractive = !isBusy && !error && Boolean(onClick);
     const showRemove = !isBusy && Boolean(onRemove);
@@ -32,6 +35,7 @@ export const Thumbnail = forwardRef(({ src, alt = '', shape = '4:3', loading = f
         'muka-thumbnail',
         // '4:3' → '--4-3', '1:1' → '--1-1', 'ellipse' → '--ellipse'
         `muka-thumbnail--${shape.replace(':', '-')}`,
+        fluid && 'muka-thumbnail--fluid',
         loading && 'muka-thumbnail--loading',
         processing && 'muka-thumbnail--processing',
         error && 'muka-thumbnail--error',
@@ -40,7 +44,7 @@ export const Thumbnail = forwardRef(({ src, alt = '', shape = '4:3', loading = f
     ]
         .filter(Boolean)
         .join(' ');
-    const image = _jsx("img", { className: "muka-thumbnail__image", src: src, alt: alt });
+    const image = (_jsx("img", { ...(lazy && { loading: 'lazy' }), decoding: "async", ...imgProps, className: "muka-thumbnail__image", src: src, alt: alt }));
     const removeButton = showRemove ? (_jsx("button", { type: "button", className: "muka-thumbnail__remove", onClick: onRemove, "aria-label": removeLabel, children: _jsx(Icon, { name: "close", variant: "line", size: "xs" }) })) : null;
     // The frame owns the shape's clip (border-radius + overflow), so the remove
     // button — a sibling of the frame — is never clipped, even for the circle.

package/dist/esm/components/Thumbnail/Thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../../components/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../../components/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/index.js

@@ -87,6 +87,7 @@ export { PullToRefresh } from './PullToRefresh';
 export { LicensePlateInput, } from './LicensePlateInput';
 export { SocialSignInButton, } from './SocialSignInButton';
 export { Thumbnail } from './Thumbnail';
+export { MediaViewer, } from './MediaViewer';
 export { PhotoUploader, } from './PhotoUploader';
 export { TextLink } from './TextLink';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"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"}

package/dist/styles/base.css

@@ -116,4 +116,6 @@ body {
   padding: 0;
   /* Page background uses Muka surface token so it matches theme (e.g. dark for muka-dark, wireframe-dark) */
   background-color: var(--color-surface-level3);
+  /* Default text color so bare text (h1–h6, p, span outside components) follows the theme instead of browser black */
+  color: var(--color-text-default-default);
 }

package/dist/styles/components/DataPieChart.css

@@ -24,7 +24,10 @@
   fill: none;
   /* Subtle lift on the filled segment, matching the Figma elevation */
   filter: drop-shadow(0 2px 4px var(--color-black-alpha-5, rgba(0, 0, 0, 0.05)));
-  transition: stroke-dasharray 0.3s ease;
+  /* Butt caps keep the always-rendered 0% arc invisible (round caps would draw a dot) */
+  stroke-linecap: butt;
+  /* view duration (300ms) reads at the 24px size; tokens zero it for reduced motion */
+  transition: stroke-dasharray var(--motion-duration-view) var(--motion-easing-default);
 }
 
 /* ─── Indeterminate (spinner) ─────────────────────────── */

package/dist/styles/components/Dialog.css

@@ -38,6 +38,7 @@
   height: 100%;
   max-width: 100vw;
   max-height: 100vh;
+  max-height: 100dvh;
   margin: 0;
   display: flex;
   flex-direction: column;
@@ -72,6 +73,8 @@
 
 .muka-dialog--lg .muka-dialog__surface {
   height: calc(100vh - var(--dialog-margin-top-mobile));
+  /* dvh tracks the visible area as mobile toolbars show and hide */
+  height: calc(100dvh - var(--dialog-margin-top-mobile));
 }
 
 /* Body */

package/dist/styles/components/Input.css

@@ -192,6 +192,9 @@
   flex-shrink: 0;
   width: var(--size-2xl, 2rem);
   height: var(--size-2xl, 2rem);
+  /* Bleed into the field's vertical padding: keeps the full hit area without
+     making a password or clearable field taller than a plain one. */
+  margin-block: calc(var(--input-field-padding-y) * -1);
   padding: 0;
   border: none;
   background: transparent;
@@ -199,6 +202,24 @@
   cursor: pointer;
 }
 
+/* The outermost button bleeds into the right padding by the same amount, so
+   its glyph sits as close to the edge as it does to the top and bottom. */
+.muka-input__clear:last-child,
+.muka-input__reveal:last-child {
+  margin-inline-end: calc(var(--input-field-padding-y) * -1);
+}
+
+/* md: match the right gap to the gap above and below the vertically centred
+   button exactly, i.e. (field height − borders − button) / 2. Holds in the
+   focus/error state too, where border and padding trade 1px. */
+.muka-input__field--md .muka-input__clear:last-child,
+.muka-input__field--md .muka-input__reveal:last-child {
+  margin-inline-end: calc(
+    (var(--input-field-height-default) - 2 * var(--border-width-regular) - var(--size-2xl, 2rem)) / 2
+      - var(--input-field-padding-x)
+  );
+}
+
 .muka-input__field--sm .muka-input__clear,
 .muka-input__field--sm .muka-input__reveal {
   width: var(--size-xl, 1.5rem);

package/dist/styles/components/MediaViewer.css

@@ -0,0 +1,183 @@
+/* MediaViewer Component Styles - Using Muka Design Tokens */
+
+/* ─── Native dialog: full viewport ────────────────────── */
+.muka-media-viewer {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  overscroll-behavior: contain;
+  color: var(--color-text-default-default);
+  background-color: var(--color-black-alpha-12);
+  animation: muka-media-viewer-in var(--motion-duration-component) var(--motion-easing-enter);
+}
+
+.muka-media-viewer:not([open]) {
+  display: none;
+}
+
+.muka-media-viewer::backdrop {
+  background-color: var(--color-black-alpha-12);
+}
+
+@keyframes muka-media-viewer-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* ─── Chrome: TopBar and footer sit on a surface ──────── */
+.muka-media-viewer__topbar {
+  flex-shrink: 0;
+  background-color: var(--color-surface-level3);
+}
+
+.muka-media-viewer__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ─── Stage: the dark area the images slide across ────── */
+.muka-media-viewer__stage {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+  /* Gestures are handled in JS: no browser panning or pinch on the stage. */
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.muka-media-viewer__slide {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-4);
+  transition: transform var(--motion-duration-component) var(--motion-easing-default);
+  will-change: transform;
+}
+
+/* While a finger drags, the image follows it without easing. */
+.muka-media-viewer--dragging .muka-media-viewer__slide {
+  transition: none;
+}
+
+.muka-media-viewer__image {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  /* The image takes touches, so a long press opens the OS menu (save, share,
+     copy). The swipe still works: pointer events bubble to the stage, and a
+     long press doesn't move far enough to start a drag. */
+  -webkit-touch-callout: default;
+}
+
+/* ─── Previous / next: devices that can hover ─────────── */
+.muka-media-viewer__nav {
+  position: absolute;
+  top: 50%;
+  display: none;
+  transform: translateY(-50%);
+  opacity: 0;
+  transition: opacity var(--motion-duration-micro) var(--motion-easing-enter);
+}
+
+.muka-media-viewer__nav--previous {
+  left: var(--spacing-4);
+}
+
+.muka-media-viewer__nav--next {
+  right: var(--spacing-4);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .muka-media-viewer__nav {
+    display: block;
+  }
+
+  .muka-media-viewer__stage:hover .muka-media-viewer__nav,
+  .muka-media-viewer__nav:focus-within {
+    opacity: 1;
+  }
+}
+
+/* ─── Footer: caption, meta and actions ───────────────── */
+.muka-media-viewer__footer {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4);
+  padding-bottom: calc(var(--spacing-4) + env(safe-area-inset-bottom, 0px));
+  background-color: var(--color-surface-level3);
+}
+
+.muka-media-viewer__details {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+}
+
+.muka-media-viewer__caption {
+  min-width: 0;
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-size: var(--text-body-sm-regular-fontSize);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  line-height: var(--text-body-sm-regular-lineHeight);
+  overflow-wrap: anywhere;
+}
+
+.muka-media-viewer__meta {
+  flex-shrink: 0;
+}
+
+.muka-media-viewer__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+}
+
+/* Mobile: actions stack full width, like Dialog footers. */
+@media (max-width: 1023px) {
+  .muka-media-viewer__actions {
+    flex-direction: column;
+  }
+
+  .muka-media-viewer__actions > * {
+    width: 100%;
+  }
+}
+
+/* ─── Reduced motion ──────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .muka-media-viewer,
+  .muka-media-viewer__slide,
+  .muka-media-viewer__nav {
+    animation: none;
+    transition: none;
+  }
+}

package/dist/styles/components/Thumbnail.css

@@ -33,6 +33,17 @@
   height: 120px;
 }
 
+/* Fluid: fill the parent's width; the shape sets the height via aspect-ratio. */
+.muka-thumbnail--fluid {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1 / 1;
+}
+
+.muka-thumbnail--fluid.muka-thumbnail--4-3 {
+  aspect-ratio: 4 / 3;
+}
+
 .muka-thumbnail--ellipse .muka-thumbnail__frame {
   border-radius: var(--border-radius-full);
 }