@geowiki/design-system 0.16.14 → 0.16.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +127 -124
- package/dist/index.d.ts +127 -124
- package/dist/index.js +87 -32
- package/dist/index.mjs +87 -32
- package/dist/styles.css +1 -1
- package/package.json +3 -2
package/dist/index.js
CHANGED
|
@@ -5456,7 +5456,7 @@ function useCarousel() {
|
|
|
5456
5456
|
var Carousel = React37.forwardRef(
|
|
5457
5457
|
(_a, ref) => {
|
|
5458
5458
|
var _b = _a, {
|
|
5459
|
-
orientation
|
|
5459
|
+
orientation,
|
|
5460
5460
|
opts,
|
|
5461
5461
|
setApi,
|
|
5462
5462
|
plugins,
|
|
@@ -7600,11 +7600,13 @@ var import_react24 = require("@headlessui/react");
|
|
|
7600
7600
|
var import_outline5 = require("@heroicons/react/24/outline");
|
|
7601
7601
|
var import_react25 = require("react");
|
|
7602
7602
|
var import_lucide_react20 = require("lucide-react");
|
|
7603
|
+
var import_react_zoom_pan_pinch = require("react-zoom-pan-pinch");
|
|
7603
7604
|
var import_jsx_runtime134 = require("react/jsx-runtime");
|
|
7604
7605
|
var GalleryCarouselOpen = ({
|
|
7605
7606
|
list,
|
|
7606
7607
|
currentPhoto,
|
|
7607
7608
|
open,
|
|
7609
|
+
allowZoom,
|
|
7608
7610
|
setOpen,
|
|
7609
7611
|
saveRotationChanges
|
|
7610
7612
|
}) => {
|
|
@@ -7701,31 +7703,78 @@ var GalleryCarouselOpen = ({
|
|
|
7701
7703
|
children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react20.ChevronLeft, { className: "h-8 w-8 disabled:pointer-events-none disabled:opacity-60 text-white", onClick: () => setRotation(0) })
|
|
7702
7704
|
}
|
|
7703
7705
|
),
|
|
7704
|
-
/* @__PURE__ */ (0, import_jsx_runtime134.
|
|
7705
|
-
|
|
7706
|
-
|
|
7707
|
-
|
|
7708
|
-
|
|
7709
|
-
|
|
7710
|
-
|
|
7711
|
-
|
|
7712
|
-
|
|
7713
|
-
|
|
7714
|
-
}
|
|
7715
|
-
|
|
7716
|
-
|
|
7717
|
-
|
|
7718
|
-
|
|
7719
|
-
|
|
7720
|
-
|
|
7721
|
-
|
|
7722
|
-
|
|
7723
|
-
|
|
7724
|
-
|
|
7725
|
-
|
|
7726
|
-
|
|
7727
|
-
|
|
7728
|
-
|
|
7706
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
7707
|
+
import_react_zoom_pan_pinch.TransformWrapper,
|
|
7708
|
+
{
|
|
7709
|
+
initialScale: 1,
|
|
7710
|
+
initialPositionX: 0,
|
|
7711
|
+
initialPositionY: 0,
|
|
7712
|
+
minScale: 0.5,
|
|
7713
|
+
maxScale: 5,
|
|
7714
|
+
wheel: { step: 0.1 },
|
|
7715
|
+
doubleClick: { disabled: true },
|
|
7716
|
+
children: ({ zoomIn, zoomOut, resetTransform }) => /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "w-full h-full flex justify-center items-center", children: [
|
|
7717
|
+
allowZoom && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "absolute top-10 right-10 z-50 flex gap-2 bg-black/60 p-2 rounded-lg backdrop-blur-sm", children: [
|
|
7718
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
7719
|
+
"button",
|
|
7720
|
+
{
|
|
7721
|
+
onClick: () => zoomIn(),
|
|
7722
|
+
className: "px-3 py-1 bg-white text-black font-bold rounded hover:bg-gray-200 transition-colors",
|
|
7723
|
+
children: "\uFF0B"
|
|
7724
|
+
}
|
|
7725
|
+
),
|
|
7726
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
7727
|
+
"button",
|
|
7728
|
+
{
|
|
7729
|
+
onClick: () => zoomOut(),
|
|
7730
|
+
className: "px-3 py-1 bg-white text-black font-bold rounded hover:bg-gray-200 transition-colors",
|
|
7731
|
+
children: "\uFF0D"
|
|
7732
|
+
}
|
|
7733
|
+
),
|
|
7734
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
7735
|
+
"button",
|
|
7736
|
+
{
|
|
7737
|
+
onClick: () => resetTransform(),
|
|
7738
|
+
className: "px-2 py-1 bg-gray-700 text-white text-sm rounded hover:bg-gray-600 transition-colors",
|
|
7739
|
+
children: "Reset"
|
|
7740
|
+
}
|
|
7741
|
+
)
|
|
7742
|
+
] }),
|
|
7743
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
7744
|
+
import_react_zoom_pan_pinch.TransformComponent,
|
|
7745
|
+
{
|
|
7746
|
+
wrapperStyle: { width: "100%", height: "100%" },
|
|
7747
|
+
contentStyle: { width: "100%", height: "100%" },
|
|
7748
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "w-full flex-col flex justify-center items-center", children: [
|
|
7749
|
+
!defaultPhoto.imageUrl.includes(".mp4") && !defaultPhoto.imageUrl.includes(".mov") && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
7750
|
+
"img",
|
|
7751
|
+
{
|
|
7752
|
+
id,
|
|
7753
|
+
src: defaultPhoto.imageUrl,
|
|
7754
|
+
crossOrigin: "anonymous",
|
|
7755
|
+
alt: "Description",
|
|
7756
|
+
style: { maxWidth: "100%", maxHeight: "95vh", transform: `rotate(${rotation}deg)` },
|
|
7757
|
+
className: " p-4"
|
|
7758
|
+
}
|
|
7759
|
+
),
|
|
7760
|
+
(defaultPhoto.imageUrl.includes(".mp4") || defaultPhoto.imageUrl.includes(".mov")) && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
7761
|
+
"video",
|
|
7762
|
+
{
|
|
7763
|
+
id,
|
|
7764
|
+
src: defaultPhoto.imageUrl,
|
|
7765
|
+
controls: true,
|
|
7766
|
+
preload: "metadata",
|
|
7767
|
+
style: { maxWidth: "100%", maxHeight: "95vh", transform: `rotate(${rotation}deg)` },
|
|
7768
|
+
className: " p-4"
|
|
7769
|
+
}
|
|
7770
|
+
),
|
|
7771
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Body16, { className: "z-40 text-white", children: text })
|
|
7772
|
+
] })
|
|
7773
|
+
}
|
|
7774
|
+
)
|
|
7775
|
+
] })
|
|
7776
|
+
}
|
|
7777
|
+
),
|
|
7729
7778
|
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
7730
7779
|
"button",
|
|
7731
7780
|
{
|
|
@@ -7762,7 +7811,7 @@ var GalleryCarouselOpen = ({
|
|
|
7762
7811
|
// src/components/DesignElements/Carousel/CarouselGalleryItemList.tsx
|
|
7763
7812
|
var import_react26 = require("react");
|
|
7764
7813
|
var import_jsx_runtime135 = require("react/jsx-runtime");
|
|
7765
|
-
var CarouselItemList = (
|
|
7814
|
+
var CarouselItemList = (props) => {
|
|
7766
7815
|
const [open, setOpen] = (0, import_react26.useState)(false);
|
|
7767
7816
|
const [selectedItemId, setSelectedItemId] = (0, import_react26.useState)("");
|
|
7768
7817
|
const [selectedImageId, setSelectedImageId] = (0, import_react26.useState)(null);
|
|
@@ -7772,12 +7821,17 @@ var CarouselItemList = ({ galleryItems, saveRotationChanges }) => {
|
|
|
7772
7821
|
setSelectedImageId(imageId);
|
|
7773
7822
|
};
|
|
7774
7823
|
return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { children: [
|
|
7775
|
-
/* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(Carousel, { className: "w-full px-8", children: [
|
|
7776
|
-
/* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CarouselContent, { className: "px-3", children: galleryItems.map((galleryItem, index) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CarouselItem, { className: " md:basis-1/2 lg:basis-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
|
|
7824
|
+
/* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(Carousel, { className: "w-full px-8", orientation: props.orientation || "horizontal", children: [
|
|
7825
|
+
/* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CarouselContent, { className: "px-3", children: props.galleryItems.map((galleryItem, index) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CarouselItem, { className: " md:basis-1/2 lg:basis-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
|
|
7777
7826
|
"div",
|
|
7778
7827
|
{
|
|
7779
|
-
className: "flex aspect-square items-center justify-center cursor-pointer",
|
|
7828
|
+
className: "inline-flex aspect-square items-center justify-center cursor-pointer",
|
|
7780
7829
|
onClick: () => handleOpenGallery(galleryItem.url, galleryItem.id),
|
|
7830
|
+
onMouseEnter: () => {
|
|
7831
|
+
if (props.onHover) {
|
|
7832
|
+
props.onHover(galleryItem.id);
|
|
7833
|
+
}
|
|
7834
|
+
},
|
|
7781
7835
|
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CarouselGalleryItem, { text: galleryItem.text, url: galleryItem.url, id: galleryItem.id })
|
|
7782
7836
|
}
|
|
7783
7837
|
) }) }, index)) }),
|
|
@@ -7788,14 +7842,15 @@ var CarouselItemList = ({ galleryItems, saveRotationChanges }) => {
|
|
|
7788
7842
|
GalleryCarouselOpen,
|
|
7789
7843
|
{
|
|
7790
7844
|
currentPhoto: { imageUrl: selectedItemId, id: selectedImageId },
|
|
7791
|
-
list: galleryItems.map((galleryItem) => ({
|
|
7845
|
+
list: props.galleryItems.map((galleryItem) => ({
|
|
7792
7846
|
url: galleryItem.url,
|
|
7793
7847
|
text: galleryItem.text,
|
|
7794
7848
|
id: galleryItem.id
|
|
7795
7849
|
})),
|
|
7796
7850
|
open,
|
|
7851
|
+
allowZoom: props.allowZoom,
|
|
7797
7852
|
setOpen,
|
|
7798
|
-
saveRotationChanges
|
|
7853
|
+
saveRotationChanges: props.saveRotationChanges
|
|
7799
7854
|
}
|
|
7800
7855
|
)
|
|
7801
7856
|
] });
|
package/dist/index.mjs
CHANGED
|
@@ -5088,7 +5088,7 @@ function useCarousel() {
|
|
|
5088
5088
|
var Carousel = React37.forwardRef(
|
|
5089
5089
|
(_a, ref) => {
|
|
5090
5090
|
var _b = _a, {
|
|
5091
|
-
orientation
|
|
5091
|
+
orientation,
|
|
5092
5092
|
opts,
|
|
5093
5093
|
setApi,
|
|
5094
5094
|
plugins,
|
|
@@ -7232,11 +7232,13 @@ import { Dialog as Dialog5, Transition as Transition3 } from "@headlessui/react"
|
|
|
7232
7232
|
import { XMarkIcon as XMarkIcon4 } from "@heroicons/react/24/outline";
|
|
7233
7233
|
import { useState as useState14, useEffect as useEffect8 } from "react";
|
|
7234
7234
|
import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight5, RotateCw, RotateCcw } from "lucide-react";
|
|
7235
|
+
import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
|
|
7235
7236
|
import { jsx as jsx133, jsxs as jsxs58 } from "react/jsx-runtime";
|
|
7236
7237
|
var GalleryCarouselOpen = ({
|
|
7237
7238
|
list,
|
|
7238
7239
|
currentPhoto,
|
|
7239
7240
|
open,
|
|
7241
|
+
allowZoom,
|
|
7240
7242
|
setOpen,
|
|
7241
7243
|
saveRotationChanges
|
|
7242
7244
|
}) => {
|
|
@@ -7333,31 +7335,78 @@ var GalleryCarouselOpen = ({
|
|
|
7333
7335
|
children: /* @__PURE__ */ jsx133(ChevronLeft2, { className: "h-8 w-8 disabled:pointer-events-none disabled:opacity-60 text-white", onClick: () => setRotation(0) })
|
|
7334
7336
|
}
|
|
7335
7337
|
),
|
|
7336
|
-
/* @__PURE__ */
|
|
7337
|
-
|
|
7338
|
-
|
|
7339
|
-
|
|
7340
|
-
|
|
7341
|
-
|
|
7342
|
-
|
|
7343
|
-
|
|
7344
|
-
|
|
7345
|
-
|
|
7346
|
-
}
|
|
7347
|
-
|
|
7348
|
-
|
|
7349
|
-
|
|
7350
|
-
|
|
7351
|
-
|
|
7352
|
-
|
|
7353
|
-
|
|
7354
|
-
|
|
7355
|
-
|
|
7356
|
-
|
|
7357
|
-
|
|
7358
|
-
|
|
7359
|
-
|
|
7360
|
-
|
|
7338
|
+
/* @__PURE__ */ jsx133(
|
|
7339
|
+
TransformWrapper,
|
|
7340
|
+
{
|
|
7341
|
+
initialScale: 1,
|
|
7342
|
+
initialPositionX: 0,
|
|
7343
|
+
initialPositionY: 0,
|
|
7344
|
+
minScale: 0.5,
|
|
7345
|
+
maxScale: 5,
|
|
7346
|
+
wheel: { step: 0.1 },
|
|
7347
|
+
doubleClick: { disabled: true },
|
|
7348
|
+
children: ({ zoomIn, zoomOut, resetTransform }) => /* @__PURE__ */ jsxs58("div", { className: "w-full h-full flex justify-center items-center", children: [
|
|
7349
|
+
allowZoom && /* @__PURE__ */ jsxs58("div", { className: "absolute top-10 right-10 z-50 flex gap-2 bg-black/60 p-2 rounded-lg backdrop-blur-sm", children: [
|
|
7350
|
+
/* @__PURE__ */ jsx133(
|
|
7351
|
+
"button",
|
|
7352
|
+
{
|
|
7353
|
+
onClick: () => zoomIn(),
|
|
7354
|
+
className: "px-3 py-1 bg-white text-black font-bold rounded hover:bg-gray-200 transition-colors",
|
|
7355
|
+
children: "\uFF0B"
|
|
7356
|
+
}
|
|
7357
|
+
),
|
|
7358
|
+
/* @__PURE__ */ jsx133(
|
|
7359
|
+
"button",
|
|
7360
|
+
{
|
|
7361
|
+
onClick: () => zoomOut(),
|
|
7362
|
+
className: "px-3 py-1 bg-white text-black font-bold rounded hover:bg-gray-200 transition-colors",
|
|
7363
|
+
children: "\uFF0D"
|
|
7364
|
+
}
|
|
7365
|
+
),
|
|
7366
|
+
/* @__PURE__ */ jsx133(
|
|
7367
|
+
"button",
|
|
7368
|
+
{
|
|
7369
|
+
onClick: () => resetTransform(),
|
|
7370
|
+
className: "px-2 py-1 bg-gray-700 text-white text-sm rounded hover:bg-gray-600 transition-colors",
|
|
7371
|
+
children: "Reset"
|
|
7372
|
+
}
|
|
7373
|
+
)
|
|
7374
|
+
] }),
|
|
7375
|
+
/* @__PURE__ */ jsx133(
|
|
7376
|
+
TransformComponent,
|
|
7377
|
+
{
|
|
7378
|
+
wrapperStyle: { width: "100%", height: "100%" },
|
|
7379
|
+
contentStyle: { width: "100%", height: "100%" },
|
|
7380
|
+
children: /* @__PURE__ */ jsxs58("div", { className: "w-full flex-col flex justify-center items-center", children: [
|
|
7381
|
+
!defaultPhoto.imageUrl.includes(".mp4") && !defaultPhoto.imageUrl.includes(".mov") && /* @__PURE__ */ jsx133(
|
|
7382
|
+
"img",
|
|
7383
|
+
{
|
|
7384
|
+
id,
|
|
7385
|
+
src: defaultPhoto.imageUrl,
|
|
7386
|
+
crossOrigin: "anonymous",
|
|
7387
|
+
alt: "Description",
|
|
7388
|
+
style: { maxWidth: "100%", maxHeight: "95vh", transform: `rotate(${rotation}deg)` },
|
|
7389
|
+
className: " p-4"
|
|
7390
|
+
}
|
|
7391
|
+
),
|
|
7392
|
+
(defaultPhoto.imageUrl.includes(".mp4") || defaultPhoto.imageUrl.includes(".mov")) && /* @__PURE__ */ jsx133(
|
|
7393
|
+
"video",
|
|
7394
|
+
{
|
|
7395
|
+
id,
|
|
7396
|
+
src: defaultPhoto.imageUrl,
|
|
7397
|
+
controls: true,
|
|
7398
|
+
preload: "metadata",
|
|
7399
|
+
style: { maxWidth: "100%", maxHeight: "95vh", transform: `rotate(${rotation}deg)` },
|
|
7400
|
+
className: " p-4"
|
|
7401
|
+
}
|
|
7402
|
+
),
|
|
7403
|
+
/* @__PURE__ */ jsx133(Body16, { className: "z-40 text-white", children: text })
|
|
7404
|
+
] })
|
|
7405
|
+
}
|
|
7406
|
+
)
|
|
7407
|
+
] })
|
|
7408
|
+
}
|
|
7409
|
+
),
|
|
7361
7410
|
/* @__PURE__ */ jsx133(
|
|
7362
7411
|
"button",
|
|
7363
7412
|
{
|
|
@@ -7394,7 +7443,7 @@ var GalleryCarouselOpen = ({
|
|
|
7394
7443
|
// src/components/DesignElements/Carousel/CarouselGalleryItemList.tsx
|
|
7395
7444
|
import { useState as useState15 } from "react";
|
|
7396
7445
|
import { jsx as jsx134, jsxs as jsxs59 } from "react/jsx-runtime";
|
|
7397
|
-
var CarouselItemList = (
|
|
7446
|
+
var CarouselItemList = (props) => {
|
|
7398
7447
|
const [open, setOpen] = useState15(false);
|
|
7399
7448
|
const [selectedItemId, setSelectedItemId] = useState15("");
|
|
7400
7449
|
const [selectedImageId, setSelectedImageId] = useState15(null);
|
|
@@ -7404,12 +7453,17 @@ var CarouselItemList = ({ galleryItems, saveRotationChanges }) => {
|
|
|
7404
7453
|
setSelectedImageId(imageId);
|
|
7405
7454
|
};
|
|
7406
7455
|
return /* @__PURE__ */ jsxs59("div", { children: [
|
|
7407
|
-
/* @__PURE__ */ jsxs59(Carousel, { className: "w-full px-8", children: [
|
|
7408
|
-
/* @__PURE__ */ jsx134(CarouselContent, { className: "px-3", children: galleryItems.map((galleryItem, index) => /* @__PURE__ */ jsx134(CarouselItem, { className: " md:basis-1/2 lg:basis-1/3", children: /* @__PURE__ */ jsx134("div", { className: "p-1", children: /* @__PURE__ */ jsx134(
|
|
7456
|
+
/* @__PURE__ */ jsxs59(Carousel, { className: "w-full px-8", orientation: props.orientation || "horizontal", children: [
|
|
7457
|
+
/* @__PURE__ */ jsx134(CarouselContent, { className: "px-3", children: props.galleryItems.map((galleryItem, index) => /* @__PURE__ */ jsx134(CarouselItem, { className: " md:basis-1/2 lg:basis-1/3", children: /* @__PURE__ */ jsx134("div", { className: "p-1", children: /* @__PURE__ */ jsx134(
|
|
7409
7458
|
"div",
|
|
7410
7459
|
{
|
|
7411
|
-
className: "flex aspect-square items-center justify-center cursor-pointer",
|
|
7460
|
+
className: "inline-flex aspect-square items-center justify-center cursor-pointer",
|
|
7412
7461
|
onClick: () => handleOpenGallery(galleryItem.url, galleryItem.id),
|
|
7462
|
+
onMouseEnter: () => {
|
|
7463
|
+
if (props.onHover) {
|
|
7464
|
+
props.onHover(galleryItem.id);
|
|
7465
|
+
}
|
|
7466
|
+
},
|
|
7413
7467
|
children: /* @__PURE__ */ jsx134(CarouselGalleryItem, { text: galleryItem.text, url: galleryItem.url, id: galleryItem.id })
|
|
7414
7468
|
}
|
|
7415
7469
|
) }) }, index)) }),
|
|
@@ -7420,14 +7474,15 @@ var CarouselItemList = ({ galleryItems, saveRotationChanges }) => {
|
|
|
7420
7474
|
GalleryCarouselOpen,
|
|
7421
7475
|
{
|
|
7422
7476
|
currentPhoto: { imageUrl: selectedItemId, id: selectedImageId },
|
|
7423
|
-
list: galleryItems.map((galleryItem) => ({
|
|
7477
|
+
list: props.galleryItems.map((galleryItem) => ({
|
|
7424
7478
|
url: galleryItem.url,
|
|
7425
7479
|
text: galleryItem.text,
|
|
7426
7480
|
id: galleryItem.id
|
|
7427
7481
|
})),
|
|
7428
7482
|
open,
|
|
7483
|
+
allowZoom: props.allowZoom,
|
|
7429
7484
|
setOpen,
|
|
7430
|
-
saveRotationChanges
|
|
7485
|
+
saveRotationChanges: props.saveRotationChanges
|
|
7431
7486
|
}
|
|
7432
7487
|
)
|
|
7433
7488
|
] });
|