@molecule/app-image-gallery-react 1.0.0

package/LICENSE

@@ -0,0 +1,115 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work.
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship.
+
+      "Contribution" shall mean any work of authorship, including the
+      original version of the Work and any modifications or additions
+      to that Work, that is intentionally submitted to the Licensor for
+      inclusion in the Work by the copyright owner or by an individual or
+      Legal Entity authorized to submit on behalf of the copyright owner.
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      patent license to make, have made, use, offer to sell, sell, import,
+      and otherwise transfer the Work.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file.
+
+   5. Submission of Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.
+
+   8. Limitation of Liability. In no event and under no legal theory shall
+      any Contributor be liable to You for damages.
+
+   9. Accepting Warranty or Additional Liability.
+
+   Copyright 2026 Molecule Dev, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/dist/ImageGallery.d.ts

@@ -0,0 +1,25 @@
+import { type JSX } from 'react';
+/** Props for {@link ImageGallery}. */
+export interface ImageGalleryProps {
+    /** Image URLs in display order. */
+    images: string[];
+    /** Controlled selected index — caller owns state. */
+    selectedIndex?: number;
+    /** Called when a thumbnail is clicked. */
+    onSelect?: (index: number) => void;
+    /** Max thumbnails shown. Extra are summarised as "+N". */
+    maxThumbnails?: number;
+    /** Alt-text for screen readers. Applied per-image; falls back to `'Image N'`. */
+    alts?: string[];
+    /** Extra classes on the outer wrapper. */
+    className?: string;
+}
+/**
+ * Main image + thumbnail grid gallery. Controlled-optional: when
+ * `selectedIndex` is omitted the component tracks its own selection.
+ *
+ * Used for product images, property listings, portfolio galleries.
+ * @param props - Component props (see {@link ImageGalleryProps}).
+ */
+export declare function ImageGallery({ images, selectedIndex, onSelect, maxThumbnails, alts, className, }: ImageGalleryProps): JSX.Element | null;
+//# sourceMappingURL=ImageGallery.d.ts.map

package/dist/ImageGallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGallery.d.ts","sourceRoot":"","sources":["../src/ImageGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAY,MAAM,OAAO,CAAA;AA8B1C,sCAAsC;AACtC,MAAM,WAAW,iBAAiB;IAChC,mCAAmC;IACnC,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,aAAa,EACb,QAAQ,EACR,aAAiB,EACjB,IAAI,EACJ,SAAS,GACV,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAkDxC"}

package/dist/ImageGallery.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { getClassMap } from '@molecule/app-ui';
+/**
+ * Column counts the ClassMap `cm.grid()` resolver can actually render. The
+ * `@molecule/app-ui-tailwind` grid CVA only defines these keys — any other
+ * value produces no `grid-cols-*` class and the thumbnails collapse into a
+ * single column. Keep in sync with that bond's `grid` variants.
+ */
+const SUPPORTED_GRID_COLS = [1, 2, 3, 4, 5, 6, 12];
+/**
+ * Snaps an arbitrary desired column count to the largest ClassMap-supported
+ * value that does not exceed it (minimum 1). This lets any `maxThumbnails`
+ * render a real grid — thumbnails beyond the chosen column count simply wrap
+ * onto additional rows instead of breaking the layout.
+ *
+ * @param desired - The requested number of columns (e.g. `maxThumbnails`).
+ * @returns A column count guaranteed to resolve to a `grid-cols-*` class.
+ */
+function toGridCols(desired) {
+    const clamped = Math.max(1, Math.floor(desired || 0));
+    let best = SUPPORTED_GRID_COLS[0];
+    for (const cols of SUPPORTED_GRID_COLS) {
+        if (cols <= clamped)
+            best = cols;
+    }
+    return best;
+}
+/**
+ * Main image + thumbnail grid gallery. Controlled-optional: when
+ * `selectedIndex` is omitted the component tracks its own selection.
+ *
+ * Used for product images, property listings, portfolio galleries.
+ * @param props - Component props (see {@link ImageGalleryProps}).
+ */
+export function ImageGallery({ images, selectedIndex, onSelect, maxThumbnails = 4, alts, className, }) {
+    const cm = getClassMap();
+    const [internalIndex, setInternalIndex] = useState(0);
+    const idx = selectedIndex ?? internalIndex;
+    const setIdx = (i) => {
+        if (selectedIndex === undefined)
+            setInternalIndex(i);
+        onSelect?.(i);
+    };
+    if (images.length === 0)
+        return null;
+    const visible = images.slice(0, maxThumbnails);
+    const overflow = Math.max(0, images.length - visible.length);
+    return (_jsxs("div", { className: cm.cn(cm.stack(2), className), children: [_jsx("div", { style: { aspectRatio: '4 / 3' }, children: _jsx("img", { src: images[idx], alt: alts?.[idx] ?? `Image ${idx + 1}`, style: { width: '100%', height: '100%', objectFit: 'cover' } }) }), images.length > 1 && (_jsxs("div", { className: cm.grid({ cols: toGridCols(maxThumbnails), gap: 'sm' }), children: [visible.map((src, i) => (_jsx("button", { type: "button", onClick: () => setIdx(i), "aria-current": i === idx ? 'true' : undefined, "aria-label": alts?.[i] ?? `Image ${i + 1}`, style: { aspectRatio: '1 / 1' }, children: _jsx("img", { src: src, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover' } }) }, i))), overflow > 0 && (_jsxs("div", { className: cm.cn(cm.flex({ align: 'center', justify: 'center' }), cm.textSize('sm'), cm.fontWeight('semibold')), style: { aspectRatio: '1 / 1' }, children: ["+", overflow] }))] }))] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * React image gallery.
+ *
+ * Exports `<ImageGallery>` — main image + thumbnail grid with controlled-optional
+ * selection and "+N" overflow summarisation.
+ *
+ * @example
+ * ```tsx
+ * import { ImageGallery } from '@molecule/app-image-gallery-react'
+ *
+ * const images = [
+ *   'https://example.com/photo-1.jpg',
+ *   'https://example.com/photo-2.jpg',
+ *   'https://example.com/photo-3.jpg',
+ * ]
+ *
+ * // Uncontrolled — manages its own selected index
+ * <ImageGallery images={images} maxThumbnails={4} />
+ *
+ * // Controlled — caller drives selected index
+ * <ImageGallery images={images} selectedIndex={activeIdx} onSelect={setActiveIdx} />
+ * ```
+ *
+ * @remarks
+ * - Renders `null` when `images` is empty — no empty-state UI.
+ * - `maxThumbnails` doubles as the thumbnail grid's column count. Any value is
+ *   safe: it is snapped to the nearest column count the ClassMap grid actually
+ *   supports (1-6 or 12), so a real `grid-cols-*` class is always emitted and
+ *   extra thumbnails wrap onto additional rows instead of collapsing.
+ * - Default alt text is the English "Image N" — pass `alts` with translated
+ *   strings in localized apps.
+ * - `getClassMap()` requires a bonded ClassMap (e.g.
+ *   `@molecule/app-ui-tailwind`).
+ *
+ * @module
+ */
+export * from './ImageGallery.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,cAAc,mBAAmB,CAAA"}

package/dist/index.js

@@ -0,0 +1,37 @@
+/**
+ * React image gallery.
+ *
+ * Exports `<ImageGallery>` — main image + thumbnail grid with controlled-optional
+ * selection and "+N" overflow summarisation.
+ *
+ * @example
+ * ```tsx
+ * import { ImageGallery } from '@molecule/app-image-gallery-react'
+ *
+ * const images = [
+ *   'https://example.com/photo-1.jpg',
+ *   'https://example.com/photo-2.jpg',
+ *   'https://example.com/photo-3.jpg',
+ * ]
+ *
+ * // Uncontrolled — manages its own selected index
+ * <ImageGallery images={images} maxThumbnails={4} />
+ *
+ * // Controlled — caller drives selected index
+ * <ImageGallery images={images} selectedIndex={activeIdx} onSelect={setActiveIdx} />
+ * ```
+ *
+ * @remarks
+ * - Renders `null` when `images` is empty — no empty-state UI.
+ * - `maxThumbnails` doubles as the thumbnail grid's column count. Any value is
+ *   safe: it is snapped to the nearest column count the ClassMap grid actually
+ *   supports (1-6 or 12), so a real `grid-cols-*` class is always emitted and
+ *   extra thumbnails wrap onto additional rows instead of collapsing.
+ * - Default alt text is the English "Image N" — pass `alts` with translated
+ *   strings in localized apps.
+ * - `getClassMap()` requires a bonded ClassMap (e.g.
+ *   `@molecule/app-ui-tailwind`).
+ *
+ * @module
+ */
+export * from './ImageGallery.js';

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@molecule/app-image-gallery-react",
+  "version": "1.0.0",
+  "description": "Main image + thumbnail grid gallery with selection + optional upload",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "molecule",
+    "image-gallery",
+    "react"
+  ],
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "@molecule/app-react": "^1.0.0",
+    "@molecule/app-ui": "^1.0.0",
+    "@molecule/app-ui-react": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@molecule/app-react": "1.0.0",
+    "@molecule/app-ui": "1.0.0",
+    "@molecule/app-ui-react": "1.0.0",
+    "@types/node": "26.1.2",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  }
+}