@expofp/ui 3.45.9 → 3.45.10

package/dist/components/LogoStrip/LogoStrip.d.ts

@@ -0,0 +1,34 @@
+import './LogoStrip.scss';
+import React from 'react';
+export interface LogoStripItem {
+    key: string | number;
+    src: string;
+    alt: string;
+    href: string;
+    /** Tile width in pixels. */
+    width: number;
+    /** Tile height in pixels. */
+    height: number;
+}
+export interface LogoStripProps {
+    items: readonly LogoStripItem[];
+    /**
+     * Horizontal space around each tile in pixels; half goes on each side. The
+     * row is centered, so this is the whole gap between tiles — see `logoRowGap`.
+     */
+    spacing: number;
+    /** The strip does not call `preventDefault()`; a handler that opens the item in-app must call it to keep the `href` from navigating. */
+    onItemClick?: (key: LogoStripItem['key'], event: React.MouseEvent<HTMLAnchorElement>) => void;
+    onPointerEnter?: React.PointerEventHandler<HTMLElement>;
+    onPointerLeave?: React.PointerEventHandler<HTMLElement>;
+    className?: string;
+    style?: React.CSSProperties;
+    ref?: React.Ref<HTMLElement>;
+}
+/**
+ * A row of logo links. Sizes come from the caller (see `logoTileSize`); the
+ * strip only lays them out and fades each new tile in.
+ */
+declare const LogoStrip: ({ items, spacing, onItemClick, onPointerEnter, onPointerLeave, className, style, ref, }: LogoStripProps) => React.JSX.Element;
+export default LogoStrip;
+//# sourceMappingURL=LogoStrip.d.ts.map

package/dist/components/LogoStrip/LogoStrip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './LogoStrip.scss';
+import classNames from 'classnames';
+/**
+ * A row of logo links. Sizes come from the caller (see `logoTileSize`); the
+ * strip only lays them out and fades each new tile in.
+ */
+const LogoStrip = ({ items, spacing, onItemClick, onPointerEnter, onPointerLeave, className, style, ref, }) => (_jsx("section", { ref: ref, className: classNames('efp-logo-strip', className), style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: items.map((item) => (_jsx("a", { href: item.href, className: "efp-logo-strip__item", style: { margin: `0 ${spacing / 2}px` }, onClick: (event) => onItemClick?.(item.key, event), children: _jsx("img", { src: item.src, alt: item.alt, crossOrigin: "anonymous", style: { width: `${item.width}px`, height: `${item.height}px` } }) }, item.key))) }));
+export default LogoStrip;

package/dist/components/LogoStrip/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './LogoStrip.js';
+export type { LogoStripItem, LogoStripProps } from './LogoStrip.js';
+export { fitLogoRow, logoRowGap, logoTileSize } from './logo-layout.js';
+export type { LogoTileOptions, LogoTileSize } from './logo-layout.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/LogoStrip/index.js

@@ -0,0 +1,3 @@
+/* eslint-disable simple-import-sort/exports */
+export { default } from './LogoStrip.js';
+export { fitLogoRow, logoRowGap, logoTileSize } from './logo-layout.js';

package/dist/components/LogoStrip/logo-layout.d.ts

@@ -0,0 +1,53 @@
+/** How a logo tile is sized from its aspect ratio. All lengths are in pixels. */
+export interface LogoTileOptions {
+    /** Side of a square logo. */
+    base: number;
+    /**
+     * 0 gives every logo the same width, 0.5 the same area, 1 the same height
+     * (the legacy behavior), since `height = base · ar^(exponent − 1)`.
+     */
+    exponent: number;
+    /** Floor for the height, so wide logos stay readable. */
+    minHeight: number;
+    /** Hard ceiling for the height. Wins over every other bound. */
+    maxHeight: number;
+    /** Ceiling for the width. Wins over `minHeight`. */
+    maxWidth: number;
+}
+export interface LogoTileSize {
+    width: number;
+    height: number;
+}
+/**
+ * Sizes a logo so logos of different proportions carry a similar visual weight.
+ *
+ * Width is `base · aspectRatio^exponent`; the bounds then apply in order
+ * `minHeight` → `maxWidth` → `maxHeight`, each keeping the aspect ratio, so a
+ * later bound wins over an earlier one.
+ * @param aspectRatio - The logo's width divided by its height.
+ * @param options - Base size, exponent and bounds.
+ * @returns The tile size in pixels.
+ */
+export declare function logoTileSize(aspectRatio: number, options: LogoTileOptions): LogoTileSize;
+/**
+ * Counts how many leading tiles fit a row. Each tile takes its width plus
+ * `spacing` (half on each side), so `n` tiles need `Σwidth + n·spacing`.
+ * @param widths - Tile widths in row order.
+ * @param maxWidth - The width the row may fill.
+ * @param spacing - Space around each tile.
+ * @returns The number of leading tiles that fit; 0 when even the first does not.
+ */
+export declare function fitLogoRow(widths: readonly number[], maxWidth: number, spacing: number): number;
+/**
+ * The even space around each tile of a row: the leftover width shared across
+ * the tiles, clamped to `[spacing, maxGap]`. A centered row then puts whatever
+ * the cap leaves over equally at both ends, so a few logos on a wide bar do not
+ * drift apart.
+ * @param widths - Tile widths in row order.
+ * @param maxWidth - The width the row may fill.
+ * @param spacing - The least space around each tile.
+ * @param maxGap - The most space around each tile.
+ * @returns Space around each tile (half on each side); `spacing` for an empty or overfull row.
+ */
+export declare function logoRowGap(widths: readonly number[], maxWidth: number, spacing: number, maxGap: number): number;
+//# sourceMappingURL=logo-layout.d.ts.map

package/dist/components/LogoStrip/logo-layout.js

@@ -0,0 +1,65 @@
+/**
+ * Sizes a logo so logos of different proportions carry a similar visual weight.
+ *
+ * Width is `base · aspectRatio^exponent`; the bounds then apply in order
+ * `minHeight` → `maxWidth` → `maxHeight`, each keeping the aspect ratio, so a
+ * later bound wins over an earlier one.
+ * @param aspectRatio - The logo's width divided by its height.
+ * @param options - Base size, exponent and bounds.
+ * @returns The tile size in pixels.
+ */
+export function logoTileSize(aspectRatio, options) {
+    const ar = Number.isFinite(aspectRatio) && aspectRatio > 0 ? aspectRatio : 1;
+    let width = options.base * Math.pow(ar, options.exponent);
+    let height = width / ar;
+    if (height < options.minHeight) {
+        height = options.minHeight;
+        width = height * ar;
+    }
+    if (width > options.maxWidth) {
+        width = options.maxWidth;
+        height = width / ar;
+    }
+    if (height > options.maxHeight) {
+        height = options.maxHeight;
+        width = height * ar;
+    }
+    return { width, height };
+}
+/**
+ * Counts how many leading tiles fit a row. Each tile takes its width plus
+ * `spacing` (half on each side), so `n` tiles need `Σwidth + n·spacing`.
+ * @param widths - Tile widths in row order.
+ * @param maxWidth - The width the row may fill.
+ * @param spacing - Space around each tile.
+ * @returns The number of leading tiles that fit; 0 when even the first does not.
+ */
+export function fitLogoRow(widths, maxWidth, spacing) {
+    let used = 0;
+    for (let i = 0; i < widths.length; i++) {
+        used += widths[i] + spacing;
+        if (used > maxWidth)
+            return i;
+    }
+    return widths.length;
+}
+/**
+ * The even space around each tile of a row: the leftover width shared across
+ * the tiles, clamped to `[spacing, maxGap]`. A centered row then puts whatever
+ * the cap leaves over equally at both ends, so a few logos on a wide bar do not
+ * drift apart.
+ * @param widths - Tile widths in row order.
+ * @param maxWidth - The width the row may fill.
+ * @param spacing - The least space around each tile.
+ * @param maxGap - The most space around each tile.
+ * @returns Space around each tile (half on each side); `spacing` for an empty or overfull row.
+ */
+export function logoRowGap(widths, maxWidth, spacing, maxGap) {
+    const n = widths.length;
+    if (!n)
+        return spacing;
+    let used = 0;
+    for (const width of widths)
+        used += width;
+    return Math.max(spacing, Math.min(maxGap, (maxWidth - used) / n));
+}

package/dist/index.d.ts

@@ -27,6 +27,8 @@ export * from './components/LevelBadge';
 export { default as LevelBadge } from './components/LevelBadge';
 export * from './components/LevelSelector';
 export { default as LevelSelector } from './components/LevelSelector';
+export * from './components/LogoStrip/index.js';
+export { default as LogoStrip } from './components/LogoStrip/index.js';
 export * from './components/MapControls';
 export { default as MapControls } from './components/MapControls';
 export * from './components/MobileToggleButton';

package/dist/index.js

@@ -32,6 +32,8 @@ export * from './components/LevelBadge';
 export { default as LevelBadge } from './components/LevelBadge';
 export * from './components/LevelSelector';
 export { default as LevelSelector } from './components/LevelSelector';
+export * from './components/LogoStrip/index.js';
+export { default as LogoStrip } from './components/LogoStrip/index.js';
 export * from './components/MapControls';
 export { default as MapControls } from './components/MapControls';
 export * from './components/MobileToggleButton';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/ui",
-  "version": "3.45.9",
+  "version": "3.45.10",
   "type": "module",
   "description": "ExpoFP SDK internal: shared pure React UI components",
   "homepage": "https://developer.expofp.com/",