@lifesg/react-design-system 4.0.0-alpha.5 → 4.0.0-alpha.7

package/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/form/index.ts"],"sourcesContent":["import { FormCustomField } from \"./form-custom-field\";\nimport { FormDateInput } from \"./form-date-input\";\nimport { FormDateRangeInput } from \"./form-date-range-input\";\nimport { FormESignature } from \"./form-e-signature\";\nimport { FormHistogramSlider } from \"./form-histogram\";\nimport { FormInput } from \"./form-input\";\nimport { FormInputGroup } from \"./form-input-group\";\nimport { FormLabel } from \"./form-label\";\nimport { FormMaskedInput } from \"./form-masked-input\";\nimport { FormMultiSelect } from \"./form-multi-select\";\nimport { FormNestedMultiSelect } from \"./form-nested-multi-select\";\nimport { FormNestedSelect } from \"./form-nested-select\";\nimport { FormOtpVerification } from \"./form-otp-verification\";\nimport { FormPhoneNumberInput } from \"./form-phone-number-input\";\nimport { FormPredictiveTextInput } from \"./form-predictive-text-input\";\nimport { FormRangeSelect } from \"./form-range-select\";\nimport { FormRangeSlider } from \"./form-range-slider\";\nimport { FormSelect } from \"./form-select\";\nimport { FormSelectHistogram } from \"./form-select-histogram\";\nimport { FormSlider } from \"./form-slider\";\nimport { FormTextarea } from \"./form-textarea\";\nimport { FormTimeRangePicker } from \"./form-time-range-picker\";\nimport { FormTimepicker } from \"./form-timepicker\";\nimport { FormUnitNumberInput } from \"./form-unit-number-input\";\n\nexport * from \"./types\";\n\nexport const Form = {\n    DateInput: FormDateInput,\n    DateRangeInput: FormDateRangeInput,\n    ESignature: FormESignature,\n    HistogramSlider: FormHistogramSlider,\n    Input: FormInput,\n    InputGroup: FormInputGroup,\n    MaskedInput: FormMaskedInput,\n    Label: FormLabel,\n    MultiSelect: FormMultiSelect,\n    NestedSelect: FormNestedSelect,\n    NestedMultiSelect: FormNestedMultiSelect,\n    Select: FormSelect,\n    SelectHistogram: FormSelectHistogram,\n    Slider: FormSlider,\n    RangeSlider: FormRangeSlider,\n    RangeSelect: FormRangeSelect,\n    Textarea: FormTextarea,\n    Timepicker: FormTimepicker,\n    TimeRangePicker: FormTimeRangePicker,\n    CustomField: FormCustomField,\n    UnitNumberInput: FormUnitNumberInput,\n    PhoneNumberInput: FormPhoneNumberInput,\n    PredictiveTextInput: FormPredictiveTextInput,\n    OtpVerification: FormOtpVerification,\n};\n"],"names":["Form","DateInput","FormDateInput","DateRangeInput","FormDateRangeInput","ESignature","FormESignature","HistogramSlider","FormHistogramSlider","Input","FormInput","InputGroup","FormInputGroup","MaskedInput","FormMaskedInput","Label","FormLabel","MultiSelect","FormMultiSelect","NestedSelect","FormNestedSelect","NestedMultiSelect","FormNestedMultiSelect","Select","FormSelect","SelectHistogram","FormSelectHistogram","Slider","FormSlider","RangeSlider","FormRangeSlider","RangeSelect","FormRangeSelect","Textarea","FormTextarea","Timepicker","FormTimepicker","TimeRangePicker","FormTimeRangePicker","CustomField","FormCustomField","UnitNumberInput","FormUnitNumberInput","PhoneNumberInput","FormPhoneNumberInput","PredictiveTextInput","FormPredictiveTextInput","OtpVerification","FormOtpVerification"],"mappings":"22CA2BO,MAAMA,EAAO,CAChBC,UAAWC,EACXC,eAAgBC,EAChBC,WAAYC,EACZC,gBAAiBC,EACjBC,MAAOC,EACPC,WAAYC,EACZC,YAAaC,EACbC,MAAOC,EACPC,YAAaC,EACbC,aAAcC,EACdC,kBAAmBC,EACnBC,OAAQC,EACRC,gBAAiBC,EACjBC,OAAQC,EACRC,YAAaC,EACbC,YAAaC,EACbC,SAAUC,EACVC,WAAYC,EACZC,gBAAiBC,EACjBC,YAAaC,EACbC,gBAAiBC,EACjBC,iBAAkBC,EAClBC,oBAAqBC,EACrBC,gBAAiBC"}
+{"version":3,"file":"index.js","sources":["../../src/form/index.ts"],"sourcesContent":["import { FormCustomField } from \"./form-custom-field\";\nimport { FormDateInput } from \"./form-date-input\";\nimport { FormDateRangeInput } from \"./form-date-range-input\";\nimport { FormESignature } from \"./form-e-signature\";\nimport { FormHistogramSlider } from \"./form-histogram-slider\";\nimport { FormInput } from \"./form-input\";\nimport { FormInputGroup } from \"./form-input-group\";\nimport { FormLabel } from \"./form-label\";\nimport { FormMaskedInput } from \"./form-masked-input\";\nimport { FormMultiSelect } from \"./form-multi-select\";\nimport { FormNestedMultiSelect } from \"./form-nested-multi-select\";\nimport { FormNestedSelect } from \"./form-nested-select\";\nimport { FormOtpVerification } from \"./form-otp-verification\";\nimport { FormPhoneNumberInput } from \"./form-phone-number-input\";\nimport { FormPredictiveTextInput } from \"./form-predictive-text-input\";\nimport { FormRangeSelect } from \"./form-range-select\";\nimport { FormRangeSlider } from \"./form-range-slider\";\nimport { FormSelect } from \"./form-select\";\nimport { FormSelectHistogram } from \"./form-select-histogram\";\nimport { FormSlider } from \"./form-slider\";\nimport { FormTextarea } from \"./form-textarea\";\nimport { FormTimeRangePicker } from \"./form-time-range-picker\";\nimport { FormTimepicker } from \"./form-timepicker\";\nimport { FormUnitNumberInput } from \"./form-unit-number-input\";\n\nexport type { FormCustomFieldProps } from \"./form-custom-field/types\";\nexport type { FormDateInputProps } from \"./form-date-input/types\";\nexport type { FormDateRangeInputProps } from \"./form-date-range-input/types\";\nexport type { FormESignatureProps } from \"./form-e-signature/types\";\nexport type { FormHistogramSliderProps } from \"./form-histogram-slider/types\";\nexport type { FormInputProps } from \"./form-input/types\";\nexport type { FormInputGroupProps } from \"./form-input-group/types\";\nexport type {\n    FormLabelAddonProps,\n    FormLabelAddonType,\n    FormLabelProps,\n} from \"./form-label/types\";\nexport type { FormMaskedInputProps } from \"./form-masked-input/types\";\nexport type { FormMultiSelectProps } from \"./form-multi-select/types\";\nexport type { FormNestedMultiSelectProps } from \"./form-nested-multi-select/types\";\nexport type { FormNestedSelectProps } from \"./form-nested-select/types\";\nexport type { FormPhoneNumberInputProps } from \"./form-phone-number-input/types\";\nexport type { FormPredictiveTextInputProps } from \"./form-predictive-text-input/types\";\nexport type { FormInputRangeSelectProps } from \"./form-range-select/types\";\nexport type { FormRangeSliderProps } from \"./form-range-slider/types\";\nexport type { FormInputSelectProps } from \"./form-select/types\";\nexport type { FormSelectHistogramProps } from \"./form-select-histogram/types\";\nexport type { FormSliderProps } from \"./form-slider/types\";\nexport type { FormTextareaProps } from \"./form-textarea/types\";\nexport type { FormTimeRangePickerProps } from \"./form-time-range-picker/types\";\nexport type { FormTimepickerProps } from \"./form-timepicker/types\";\nexport type { FormUnitNumberInputProps } from \"./form-unit-number-input/types\";\nexport * from \"./types\";\n\n// @catalog\n/**\n * A collection of form field components that each combine a label, input\n * control, and inline error message with consistent ARIA wiring.\n *\n * Use `Form.*` sub-components to build accessible forms. Use `Form.CustomField` to wrap any\n * bespoke input element in the same layout.\n *\n * Sub-components:\n * - `Form.CustomField` — layout shell for wrapping custom input elements.\n * - `Form.DateInput` — single date picker.\n * - `Form.DateRangeInput` — date range picker.\n * - `Form.ESignature` — e-signature capture field.\n * - `Form.HistogramSlider` — range slider with histogram overlay.\n * - `Form.Input` — single-line text input field.\n * - `Form.InputGroup` — grouped inputs with shared label and error state.\n * - `Form.Label` — standalone label for use outside a `Form.*` field.\n * - `Form.MaskedInput` — text input with a character-level input mask.\n * - `Form.MultiSelect` — multi-value dropdown select.\n * - `Form.NestedMultiSelect` — hierarchical multi-value select.\n * - `Form.NestedSelect` — hierarchical single-value select.\n * - `Form.OtpVerification` — OTP send-and-verify flow.\n * - `Form.PhoneNumberInput` — phone number input with country code selection.\n * - `Form.PredictiveTextInput` — text input with predictive suggestions.\n * - `Form.RangeSelect` — dual-value range dropdown select.\n * - `Form.RangeSlider` — dual-handle range slider.\n * - `Form.Select` — single-value dropdown select.\n * - `Form.SelectHistogram` — select control with histogram.\n * - `Form.Slider` — single-value range slider.\n * - `Form.Textarea` — multi-line text area.\n * - `Form.Timepicker` — time picker.\n * - `Form.TimeRangePicker` — time range picker.\n * - `Form.UnitNumberInput` — structured unit number input.\n */\nexport const Form = {\n    /** Layout shell that wraps any custom input element with label, subtitle, and error message. */\n    CustomField: FormCustomField,\n\n    /** Single date picker with form layout. */\n    DateInput: FormDateInput,\n\n    /** Date range picker with form layout. */\n    DateRangeInput: FormDateRangeInput,\n\n    /** E-signature capture field with form layout. */\n    ESignature: FormESignature,\n\n    /** Range slider with histogram overlay and form layout. */\n    HistogramSlider: FormHistogramSlider,\n\n    /** Single-line text input field with form layout. */\n    Input: FormInput,\n\n    /** Grouped inputs with shared label, error state, and form layout. */\n    InputGroup: FormInputGroup,\n\n    /** Standalone label element for use outside a `Form.*` field with optional subtitle and addon icon. */\n    Label: FormLabel,\n\n    /** Text input with a character-level input mask and form layout. */\n    MaskedInput: FormMaskedInput,\n\n    /** Multi-value dropdown select with form layout. */\n    MultiSelect: FormMultiSelect,\n\n    /** Hierarchical multi-value select with form layout. */\n    NestedMultiSelect: FormNestedMultiSelect,\n\n    /** Hierarchical single-value select with form layout. */\n    NestedSelect: FormNestedSelect,\n\n    /** OTP send-and-verify flow with form layout. */\n    OtpVerification: FormOtpVerification,\n\n    /** Phone number input with country code selection and form layout. */\n    PhoneNumberInput: FormPhoneNumberInput,\n\n    /** Text input with predictive suggestions and form layout. */\n    PredictiveTextInput: FormPredictiveTextInput,\n\n    /** Dual-value range dropdown select with form layout. */\n    RangeSelect: FormRangeSelect,\n\n    /** Dual-handle range slider with form layout. */\n    RangeSlider: FormRangeSlider,\n\n    /** Single-value dropdown select with form layout. */\n    Select: FormSelect,\n\n    /** Select control with histogram and form layout. */\n    SelectHistogram: FormSelectHistogram,\n\n    /** Single-value range slider with form layout. */\n    Slider: FormSlider,\n\n    /** Multi-line text area with form layout. */\n    Textarea: FormTextarea,\n\n    /** Time picker with form layout. */\n    Timepicker: FormTimepicker,\n\n    /** Time range picker with form layout. */\n    TimeRangePicker: FormTimeRangePicker,\n\n    /** Structured unit number input with form layout. */\n    UnitNumberInput: FormUnitNumberInput,\n};\n"],"names":["Form","CustomField","FormCustomField","DateInput","FormDateInput","DateRangeInput","FormDateRangeInput","ESignature","FormESignature","HistogramSlider","FormHistogramSlider","Input","FormInput","InputGroup","FormInputGroup","Label","FormLabel","MaskedInput","FormMaskedInput","MultiSelect","FormMultiSelect","NestedMultiSelect","FormNestedMultiSelect","NestedSelect","FormNestedSelect","OtpVerification","FormOtpVerification","PhoneNumberInput","FormPhoneNumberInput","PredictiveTextInput","FormPredictiveTextInput","RangeSelect","FormRangeSelect","RangeSlider","FormRangeSlider","Select","FormSelect","SelectHistogram","FormSelectHistogram","Slider","FormSlider","Textarea","FormTextarea","Timepicker","FormTimepicker","TimeRangePicker","FormTimeRangePicker","UnitNumberInput","FormUnitNumberInput"],"mappings":"+yDAwFO,MAAMA,EAAO,CAEhBC,YAAaC,EAGbC,UAAWC,EAGXC,eAAgBC,EAGhBC,WAAYC,EAGZC,gBAAiBC,EAGjBC,MAAOC,EAGPC,WAAYC,EAGZC,MAAOC,EAGPC,YAAaC,EAGbC,YAAaC,EAGbC,kBAAmBC,EAGnBC,aAAcC,EAGdC,gBAAiBC,EAGjBC,iBAAkBC,EAGlBC,oBAAqBC,EAGrBC,YAAaC,EAGbC,YAAaC,EAGbC,OAAQC,EAGRC,gBAAiBC,EAGjBC,OAAQC,EAGRC,SAAUC,EAGVC,WAAYC,EAGZC,gBAAiBC,EAGjBC,gBAAiBC"}

package/form/types.d.ts

@@ -1,98 +1,40 @@
-import type { DateInputProps } from "../date-input/types";
-import type { DateRangeInputProps } from "../date-range-input/types";
-import type { EsignatureProps } from "../e-signature/types";
-import type { HistogramSliderProps } from "../histogram-slider";
-import type { InputPartialProps } from "../input/types";
-import type { InputGroupPartialProps } from "../input-group/types";
-import type { InputMultiSelectPartialProps } from "../input-multi-select/types";
-import type { InputNestedMultiSelectPartialProps } from "../input-nested-multi-select";
-import type { InputNestedSelectPartialProps } from "../input-nested-select";
-import type { InputRangeSelectPartialProps } from "../input-range-select/types";
-import type { InputRangeSliderProps } from "../input-range-slider/types";
-import type { InputSelectPartialProps } from "../input-select/types";
-import type { InputSliderProps } from "../input-slider";
-import type { TextareaPartialProps } from "../input-textarea/types";
 import type { ColProps } from "../layout/types";
-import type { MaskedInputPartialProps } from "../masked-input/types";
-import type { PhoneNumberInputProps } from "../phone-number-input/types";
-import type { PredictiveTextInputProps } from "../predictive-text-input/types";
-import type { SelectHistogramProps } from "../select-histogram";
-import type { TimeRangePickerProps } from "../time-range-picker/types";
-import type { TimepickerProps } from "../timepicker/types";
-import type { UnitNumberInputProps } from "../unit-number/types";
-export type FormLabelAddonType = "tooltip" | "popover";
-export interface FormLabelAddonTriggerProps {
-    addonType?: FormLabelAddonType | undefined;
-    icon?: JSX.Element | undefined;
-    "data-testid"?: string | undefined;
-}
-export interface FormLabelAddonProps {
-    content: string | JSX.Element;
-    type?: FormLabelAddonType | undefined;
-    icon?: JSX.Element | undefined;
-    id?: string | undefined;
-    zIndex?: number | undefined;
-    "data-testid"?: string | undefined;
-}
-export interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
-    addon?: FormLabelAddonProps | undefined;
-    subtitle?: string | JSX.Element | undefined;
-    "data-testid"?: string | undefined;
-}
+import type { FormLabelProps } from "./form-label/types";
+/**
+ * Controls how a form field's outer container is rendered.
+ *
+ * - `"flex"` — plain `div` with no column constraints.
+ * - `"grid"` — `ColDiv` that accepts responsive column span props from `ColProps`.
+ */
 export type FormElementLayoutType = "flex" | "grid";
+/**
+ * Common props shared by all `Form.*` field components.
+ */
 export interface BaseFormElementProps extends ColProps {
+    /**
+     * Label rendered above the input. Accepts a plain string or a
+     * `FormLabelProps` object to provide additional configuration.
+     */
     label?: FormLabelProps | string | undefined;
+    /**
+     * Inline error text rendered below the input.
+     */
     errorMessage?: string | React.ReactNode | undefined;
     "data-testid"?: string | undefined;
     "data-error-testid"?: string | undefined;
-    /** The layout type. Values: "flex" | "grid" */
+    /**
+     * Controls whether the container uses flex layout or a responsive column grid.
+     */
     layoutType?: FormElementLayoutType | undefined;
 }
+/**
+ * Props for the `FormWrapper` layout container.
+ */
 export interface FormWrapperProps extends BaseFormElementProps {
     children: JSX.Element | JSX.Element[];
+    /**
+     * Base ID used to derive ARIA label, subtitle, and error-message element
+     * IDs. A generated ID is used when omitted.
+     */
     id?: string | undefined;
 }
-export interface FormInputProps extends InputPartialProps, BaseFormElementProps {
-}
-export interface FormInputGroupProps<T, V> extends InputGroupPartialProps<T, V>, BaseFormElementProps {
-}
-export interface FormMaskedInputProps extends MaskedInputPartialProps, BaseFormElementProps {
-}
-export interface FormTextareaProps extends TextareaPartialProps, BaseFormElementProps {
-}
-export interface FormCustomFieldProps extends FormWrapperProps, BaseFormElementProps {
-}
-export interface FormInputSelectProps<T, V> extends InputSelectPartialProps<T, V>, BaseFormElementProps {
-}
-export interface FormInputRangeSelectProps<T, V> extends InputRangeSelectPartialProps<T, V>, BaseFormElementProps {
-}
-export interface FormMultiSelectProps<T, V> extends InputMultiSelectPartialProps<T, V>, BaseFormElementProps {
-}
-export interface FormNestedSelectProps<V1, V2, V3> extends InputNestedSelectPartialProps<V1, V2, V3>, BaseFormElementProps {
-}
-export interface FormNestedMultiSelectProps<V1, V2, V3> extends InputNestedMultiSelectPartialProps<V1, V2, V3>, BaseFormElementProps {
-}
-export interface FormDateInputProps extends DateInputProps, BaseFormElementProps {
-}
-export interface FormDateRangeInputProps extends DateRangeInputProps, BaseFormElementProps {
-}
-export interface FormTimepickerProps extends TimepickerProps, BaseFormElementProps {
-}
-export interface FormUnitNumberInputProps extends UnitNumberInputProps, BaseFormElementProps {
-}
-export interface FormPhoneNumberInputProps extends PhoneNumberInputProps, BaseFormElementProps {
-}
-export interface FormTimeRangePickerProps extends TimeRangePickerProps, BaseFormElementProps {
-}
-export interface FormPredictiveTextInputProps<T, V> extends PredictiveTextInputProps<T, V>, BaseFormElementProps {
-}
-export interface FormSliderProps extends InputSliderProps, BaseFormElementProps {
-}
-export interface FormRangeSliderProps extends InputRangeSliderProps, BaseFormElementProps {
-}
-export interface FormHistogramSliderProps extends HistogramSliderProps, BaseFormElementProps {
-}
-export interface FormESignatureProps extends EsignatureProps, BaseFormElementProps {
-}
-export interface FormSelectHistogramProps extends SelectHistogramProps, BaseFormElementProps {
-}

package/fullscreen-image-carousel/fullscreen-image-carousel.d.ts

@@ -1,3 +1,10 @@
 import type { FullscreenImageCarouselProps, FullscreenImageCarouselRef } from "./types";
 export declare const Component: ({ items, initialActiveItemIndex, hideThumbnail, hideNavigation, hideCounter, hideMagnifier, onDelete, onClose, insets, show, ...otherProps }: FullscreenImageCarouselProps, ref: React.Ref<FullscreenImageCarouselRef>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A fullscreen modal carousel for browsing images and custom media items.
+ *
+ * Use to present a collection of images or custom content in an overlay with
+ * navigation controls, zoom support, and an optional thumbnail strip.
+ * The top info bar is rendered only when at least one item provides some file metadata.
+ */
 export declare const FullscreenImageCarousel: (props: FullscreenImageCarouselProps & import("react").RefAttributes<FullscreenImageCarouselRef>) => React.ReactElement | null;

package/fullscreen-image-carousel/fullscreen-image-carousel.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as i,jsxs as t,Fragment as l}from"react/jsx-runtime";import{ChevronLeftIcon as r,ChevronRightIcon as o,MagnifierPlusIcon as n,MagnifierMinusIcon as a,CrossIcon as s}from"@lifesg/react-icons";import{BinIcon as d}from"@lifesg/react-icons/bin";import{clearAnnouncer as c,announce as m}from"@react-aria/live-announcer";import u from"clsx";import{forwardRef as h,useState as v,useRef as p,useMemo as f,useCallback as g,useImperativeHandle as b,useEffect as N}from"react";import{TransformWrapper as j,TransformComponent as x}from"react-zoom-pan-pinch";import{ModalV2 as k}from"../modal-v2/index.js";import{ClickableIcon as y}from"../shared/clickable-icon/clickable-icon.js";import{useStateCallback as w}from"../shared/hooks/use-state-callback.js";import{ImagePlaceholder as C}from"../shared/image-placeholder/image-placeholder.js";import"../theme/theme-provider/index.js";import{formatUnitValue as I}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as T}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as $}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import{useEventListener as B}from"../util/use-event-listener.js";import{tokens as S,carouselModalContent as A,imageGalleryContainer as L,imageGalleryWrapper as D,imageGallerySwipe as M,iconButton as z,arrowButton as X,arrowButtonLeft as Z,arrowButtonRight as O,boxChip as R,chip as W,topActionButtons as q,iconButtonError as E,imageGallerySlides as P,imageGallerySlide as V,focusableImageRegion as _,slidePlaceholderImage as F,slideImage as H,thumbnailContainer as G,thumbnailWrapper as J,thumbnailItemContainer as K,thumbnailItem as Q,thumbnailImage as U,fileInfoFileName as Y,fileInfoFileSize as ee,fileInfoTextWrapper as ie,fileInfoTextWrapperCentered as te}from"./fullscreen-image-carousel.styles.js";import{StatefulImage as le}from"./stateful-image.js";const re=e=>!!e&&"custom"===e.type,oe=(h,oe)=>{var ne,{items:ae,initialActiveItemIndex:se,hideThumbnail:de=!1,hideNavigation:ce=!1,hideCounter:me=!1,hideMagnifier:ue=!1,onDelete:he,onClose:ve,insets:pe,show:fe}=h,ge=e(h,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show"]);const[be,Ne]=w(null!=se?se:0),[je,xe]=v({}),[ke,ye]=v(1),[we,Ce]=v(),[Ie,Te]=v(),$e=p(null),Be=p([]),Se=p([]),Ae=p(null),Le=p(null),De=p(null),Me=p(null),ze=p(null),Xe=we&&Ie?we-Ie:0,Ze=ae[be],Oe=ae.some((e=>{var i;return re(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),Re=Oe?"item":"image",We=f((()=>ae.some((e=>{var i,t;return(null===(i=e.fileName)||void 0===i?void 0:i.trim())||(null===(t=e.fileSize)||void 0===t?void 0:t.trim())}))),[ae]);T(Le,{[S.topActionButtons.insetTop]:I(null==pe?void 0:pe.top,"px"),[S.topActionButtons.insetLeft]:I(null==pe?void 0:pe.left,"px"),[S.topActionButtons.insetRight]:I(null==pe?void 0:pe.right,"px")}),T(De,{[S.arrowButton.insetLeft]:I(null==pe?void 0:pe.left,"px")}),T(Me,{[S.arrowButton.insetRight]:I(null==pe?void 0:pe.right,"px")}),T(ze,{[S.thumbnailContainer.insetBottom]:I(null==pe?void 0:pe.bottom,"px")});const qe=g((e=>{var i,t;const l=ae[e],r=Oe?"Item":"Image",o=re(l)?(null===(i=l.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=l.alt)||void 0===t?void 0:t.trim())||"",n=`${r} ${e+1} of ${ae.length}.`;return o?`${o}. ${n}`:n}),[ae,Oe]);b(oe,(()=>({currentItemIndex:be,setCurrentItem:He,goToPrevItem:_e,goToNextItem:Fe}))),B("keydown",(function(e){"ArrowRight"===e.key?Fe():"ArrowLeft"===e.key?_e():"Escape"===e.key&&(null==ve||ve())}),"document"),N((()=>{var e;fe&&(null===(e=Ae.current)||void 0===e||e.focus())}),[fe]),N((()=>{0!==ae.length?be>ae.length-1&&Ne(ae.length-1):Ne(0)}),[be,ae.length,Ne]),N((()=>{var e,i;null===(i=null===(e=Be.current)||void 0===e?void 0:e[be])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),ye(1)}),[be]);const Ee=e=>{ye(e.state.scale)};const Pe=({src:e,height:i,width:t})=>{xe((l=>Object.assign(Object.assign({},l),{[e]:{height:i,width:t}})))},Ve=()=>{if(!Ze||re(Ze))return;const e=je[Ze.src];if($e.current&&e){const{clientHeight:i,clientWidth:t}=$e.current,{width:l,height:r}=e,o=r/l<i/t;return l<t&&r<i?o?t/l:i/r:o?i/(r/(l/t)):t/(l/(r/i))}},_e=()=>{var e,i;null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.resetTransform(),Ne((e=>0===e?ae.length-1:e-1),(e=>{c("polite"),m(qe(e),"polite")}))},Fe=()=>{var e,i;null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.resetTransform(),Ne((e=>e===ae.length-1?0:e+1),(e=>{c("polite"),m(qe(e),"polite")}))},He=e=>{var i,t;null===(t=null===(i=Se.current)||void 0===i?void 0:i[be])||void 0===t||t.resetTransform(),Ne(e)};return i(k,Object.assign({},ge,{"data-testid":"image-carousel-modal","aria-label":Oe?"Carousel":"Image carousel",show:fe,disableInitialFocus:!0,children:t("div",{className:A,children:[t("div",{className:L,children:[t("div",{className:D,children:[i("div",{className:M,ref:$e,onTouchStart:e=>{ke<=1&&Ce(e.touches[0].clientX)},onTouchMove:e=>{!we||ke>1||Te(e.touches[0].clientX)},onTouchEnd:()=>{$e.current&&(Math.abs(Xe)>$e.current.offsetWidth/3&&(Xe>0?Fe():_e()),Ce(void 0),Te(void 0))},children:i("div",{className:P,style:{transform:`translateX(calc(${100*-be}% - ${Xe}px))`},children:ae.map(((e,t)=>{const l=t===be,r=Math.abs(t-be)<=1||0===be&&t===ae.length-1||be===ae.length-1&&0===t;return i("div",{className:V,"data-testid":"slide-item",children:i("div",{className:_,ref:l?Ae:null,tabIndex:l?0:-1,children:re(e)?r?e.renderContent():i(C,{className:F}):i(j,{ref:e=>Se.current[t]=e,panning:{disabled:ke<=1},initialScale:1,onZoom:Ee,onZoomStop:Ee,onWheel:Ee,children:i(x,{children:i(le,{className:H,src:e.src,alt:qe(t),placeholder:i(C,{className:F}),fit:"scale-down",retrieveImageDimension:!0,setDimension:Pe})})})})},t)}))})}),!ce&&t(l,{children:[i(y,{className:u(z,X,Z),ref:De,"aria-label":`Previous ${Re}`,"data-testid":"prev-btn",onClick:_e,children:i(r,{"aria-hidden":!0})}),i(y,{className:u(z,X,O),ref:Me,"aria-label":`Next ${Re}`,"data-testid":"forward-btn",onClick:Fe,children:i(o,{"aria-hidden":!0})})]}),!me&&i("div",{className:R,"aria-hidden":"true",children:i($.BodyXS,{className:W,weight:"semibold","data-testid":"carousel-counter",children:`${be+1}/${ae.length}`})})]}),!de&&i("div",{className:G,ref:ze,"aria-hidden":"true","data-testid":"thumbnail-container",children:i("div",{className:J,children:ae.map(((e,t)=>{var l;const r=re(e)?e.thumbnailSrc:null!==(l=e.thumbnailSrc)&&void 0!==l?l:e.src;return i("div",{className:K,children:i("div",{className:Q,"data-active":t===be,"data-testid":"thumbnail-item",onClick:()=>He(t),ref:e=>Be.current[t]=e,children:r?i(le,{className:U,src:r,alt:`Thumbnail ${t+1}`,fit:"cover"}):i(C,{className:F})})},t)}))})})]}),t("div",{className:q,ref:Le,"data-has-file-info":We,children:[We&&(()=>{const{fileName:e,fileSize:l}=null!=Ze?Ze:{},r=null==e?void 0:e.trim(),o=null==l?void 0:l.trim();return t("div",{className:u(ie,!o&&te),"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[r&&i($.BodyBL,{className:Y,weight:"semibold","data-testid":"file-info-name",children:r}),o&&i($.BodyMD,{className:ee,"data-testid":"file-info-size",children:o})]})})(),!ue&&!re(Ze)&&i(y,{className:z,"aria-label":1===ke?"Zoom in":"Zoom out",onClick:()=>{var e,i,t,l;if(1===ke){const t=Ve();null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.centerView(t),ye(null!=t?t:1)}else ye(1),null===(l=null===(t=Se.current)||void 0===t?void 0:t[be])||void 0===l||l.resetTransform()},children:i(1===ke?n:a,{"aria-hidden":!0})}),he&&i(y,{className:u(z,E),"aria-label":`Delete ${re(Ze)&&(null===(ne=Ze.itemLabel)||void 0===ne?void 0:ne.trim())||"image"}`,"data-testid":"delete-btn",onClick:()=>{Ze&&he&&he(Ze,be)},children:i(d,{"aria-hidden":!0})}),i(y,{className:z,"aria-label":Oe?"Close carousel":"Close image carousel",onClick:ve,children:i(s,{"aria-hidden":!0})})]})]})}))},ne=h(oe);export{oe as Component,ne as FullscreenImageCarousel};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as i,jsxs as t,Fragment as l}from"react/jsx-runtime";import{ChevronLeftIcon as r,ChevronRightIcon as o,MagnifierPlusIcon as a,MagnifierMinusIcon as n,CrossIcon as s}from"@lifesg/react-icons";import{BinIcon as d}from"@lifesg/react-icons/bin";import{clearAnnouncer as c,announce as m}from"@react-aria/live-announcer";import u from"clsx";import{forwardRef as h,useState as v,useRef as p,useMemo as f,useCallback as g,useImperativeHandle as b,useEffect as N}from"react";import{TransformWrapper as j,TransformComponent as x}from"react-zoom-pan-pinch";import{ModalV2 as k}from"../modal-v2/modal-v2.js";import{ClickableIcon as y}from"../shared/clickable-icon/clickable-icon.js";import{useStateCallback as w}from"../shared/hooks/use-state-callback.js";import{ImagePlaceholder as C}from"../shared/image-placeholder/image-placeholder.js";import"../theme/theme-provider/index.js";import{formatUnitValue as I}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as T}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as $}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import{useEventListener as B}from"../util/use-event-listener.js";import{tokens as S,carouselModalContent as A,imageGalleryContainer as L,imageGalleryWrapper as D,imageGallerySwipe as M,iconButton as z,arrowButton as X,arrowButtonLeft as Z,arrowButtonRight as O,boxChip as R,chip as W,topActionButtons as q,iconButtonError as E,imageGallerySlides as P,imageGallerySlide as V,focusableImageRegion as _,slidePlaceholderImage as F,slideImage as H,thumbnailContainer as G,thumbnailWrapper as J,thumbnailItemContainer as K,thumbnailItem as Q,thumbnailImage as U,fileInfoFileName as Y,fileInfoFileSize as ee,fileInfoTextWrapper as ie,fileInfoTextWrapperCentered as te}from"./fullscreen-image-carousel.styles.js";import{StatefulImage as le}from"./stateful-image.js";const re=e=>!!e&&"custom"===e.type,oe=(h,oe)=>{var ae,{items:ne,initialActiveItemIndex:se,hideThumbnail:de=!1,hideNavigation:ce=!1,hideCounter:me=!1,hideMagnifier:ue=!1,onDelete:he,onClose:ve,insets:pe,show:fe}=h,ge=e(h,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show"]);const[be,Ne]=w(null!=se?se:0),[je,xe]=v({}),[ke,ye]=v(1),[we,Ce]=v(),[Ie,Te]=v(),$e=p(null),Be=p([]),Se=p([]),Ae=p(null),Le=p(null),De=p(null),Me=p(null),ze=p(null),Xe=we&&Ie?we-Ie:0,Ze=ne[be],Oe=ne.some((e=>{var i;return re(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),Re=Oe?"item":"image",We=f((()=>ne.some((e=>{var i,t;return(null===(i=e.fileName)||void 0===i?void 0:i.trim())||(null===(t=e.fileSize)||void 0===t?void 0:t.trim())}))),[ne]);T(Le,{[S.topActionButtons.insetTop]:I(null==pe?void 0:pe.top,"px"),[S.topActionButtons.insetLeft]:I(null==pe?void 0:pe.left,"px"),[S.topActionButtons.insetRight]:I(null==pe?void 0:pe.right,"px")}),T(De,{[S.arrowButton.insetLeft]:I(null==pe?void 0:pe.left,"px")}),T(Me,{[S.arrowButton.insetRight]:I(null==pe?void 0:pe.right,"px")}),T(ze,{[S.thumbnailContainer.insetBottom]:I(null==pe?void 0:pe.bottom,"px")});const qe=g((e=>{var i,t;const l=ne[e],r=Oe?"Item":"Image",o=re(l)?(null===(i=l.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=l.alt)||void 0===t?void 0:t.trim())||"",a=`${r} ${e+1} of ${ne.length}.`;return o?`${o}. ${a}`:a}),[ne,Oe]);b(oe,(()=>({currentItemIndex:be,setCurrentItem:He,goToPrevItem:_e,goToNextItem:Fe}))),B("keydown",(function(e){"ArrowRight"===e.key?Fe():"ArrowLeft"===e.key?_e():"Escape"===e.key&&(null==ve||ve())}),"document"),N((()=>{var e;fe&&(null===(e=Ae.current)||void 0===e||e.focus())}),[fe]),N((()=>{0!==ne.length?be>ne.length-1&&Ne(ne.length-1):Ne(0)}),[be,ne.length,Ne]),N((()=>{var e,i;null===(i=null===(e=Be.current)||void 0===e?void 0:e[be])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),ye(1)}),[be]);const Ee=e=>{ye(e.state.scale)};const Pe=({src:e,height:i,width:t})=>{xe((l=>Object.assign(Object.assign({},l),{[e]:{height:i,width:t}})))},Ve=()=>{if(!Ze||re(Ze))return;const e=je[Ze.src];if($e.current&&e){const{clientHeight:i,clientWidth:t}=$e.current,{width:l,height:r}=e,o=r/l<i/t;return l<t&&r<i?o?t/l:i/r:o?i/(r/(l/t)):t/(l/(r/i))}},_e=()=>{var e,i;null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.resetTransform(),Ne((e=>0===e?ne.length-1:e-1),(e=>{c("polite"),m(qe(e),"polite")}))},Fe=()=>{var e,i;null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.resetTransform(),Ne((e=>e===ne.length-1?0:e+1),(e=>{c("polite"),m(qe(e),"polite")}))},He=e=>{var i,t;null===(t=null===(i=Se.current)||void 0===i?void 0:i[be])||void 0===t||t.resetTransform(),Ne(e)};return i(k,Object.assign({},ge,{"data-testid":"image-carousel-modal","aria-label":Oe?"Carousel":"Image carousel",show:fe,disableInitialFocus:!0,children:t("div",{className:A,children:[t("div",{className:L,children:[t("div",{className:D,children:[i("div",{className:M,ref:$e,onTouchStart:e=>{ke<=1&&Ce(e.touches[0].clientX)},onTouchMove:e=>{!we||ke>1||Te(e.touches[0].clientX)},onTouchEnd:()=>{$e.current&&(Math.abs(Xe)>$e.current.offsetWidth/3&&(Xe>0?Fe():_e()),Ce(void 0),Te(void 0))},children:i("div",{className:P,style:{transform:`translateX(calc(${100*-be}% - ${Xe}px))`},children:ne.map(((e,t)=>{const l=t===be,r=Math.abs(t-be)<=1||0===be&&t===ne.length-1||be===ne.length-1&&0===t;return i("div",{className:V,"data-testid":"slide-item",children:i("div",{className:_,ref:l?Ae:null,tabIndex:l?0:-1,children:re(e)?r?e.renderContent():i(C,{className:F}):i(j,{ref:e=>Se.current[t]=e,panning:{disabled:ke<=1},initialScale:1,onZoom:Ee,onZoomStop:Ee,onWheel:Ee,children:i(x,{children:i(le,{className:H,src:e.src,alt:qe(t),placeholder:i(C,{className:F}),fit:"scale-down",retrieveImageDimension:!0,setDimension:Pe})})})})},t)}))})}),!ce&&t(l,{children:[i(y,{className:u(z,X,Z),ref:De,"aria-label":`Previous ${Re}`,"data-testid":"prev-btn",onClick:_e,children:i(r,{"aria-hidden":!0})}),i(y,{className:u(z,X,O),ref:Me,"aria-label":`Next ${Re}`,"data-testid":"forward-btn",onClick:Fe,children:i(o,{"aria-hidden":!0})})]}),!me&&i("div",{className:R,"aria-hidden":"true",children:i($.BodyXS,{className:W,weight:"semibold","data-testid":"carousel-counter",children:`${be+1}/${ne.length}`})})]}),!de&&i("div",{className:G,ref:ze,"aria-hidden":"true","data-testid":"thumbnail-container",children:i("div",{className:J,children:ne.map(((e,t)=>{var l;const r=re(e)?e.thumbnailSrc:null!==(l=e.thumbnailSrc)&&void 0!==l?l:e.src;return i("div",{className:K,children:i("div",{className:Q,"data-active":t===be,"data-testid":"thumbnail-item",onClick:()=>He(t),ref:e=>Be.current[t]=e,children:r?i(le,{className:U,src:r,alt:`Thumbnail ${t+1}`,fit:"cover"}):i(C,{className:F})})},t)}))})})]}),t("div",{className:q,ref:Le,"data-has-file-info":We,children:[We&&(()=>{const{fileName:e,fileSize:l}=null!=Ze?Ze:{},r=null==e?void 0:e.trim(),o=null==l?void 0:l.trim();return t("div",{className:u(ie,!o&&te),"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[r&&i($.BodyBL,{className:Y,weight:"semibold","data-testid":"file-info-name",children:r}),o&&i($.BodyMD,{className:ee,"data-testid":"file-info-size",children:o})]})})(),!ue&&!re(Ze)&&i(y,{className:z,"aria-label":1===ke?"Zoom in":"Zoom out",onClick:()=>{var e,i,t,l;if(1===ke){const t=Ve();null===(i=null===(e=Se.current)||void 0===e?void 0:e[be])||void 0===i||i.centerView(t),ye(null!=t?t:1)}else ye(1),null===(l=null===(t=Se.current)||void 0===t?void 0:t[be])||void 0===l||l.resetTransform()},children:i(1===ke?a:n,{"aria-hidden":!0})}),he&&i(y,{className:u(z,E),"aria-label":`Delete ${re(Ze)&&(null===(ae=Ze.itemLabel)||void 0===ae?void 0:ae.trim())||"image"}`,"data-testid":"delete-btn",onClick:()=>{Ze&&he&&he(Ze,be)},children:i(d,{"aria-hidden":!0})}),i(y,{className:z,"aria-label":Oe?"Close carousel":"Close image carousel",onClick:ve,children:i(s,{"aria-hidden":!0})})]})]})}))},ae=h(oe);export{oe as Component,ae as FullscreenImageCarousel};
 //# sourceMappingURL=fullscreen-image-carousel.js.map

package/fullscreen-image-carousel/fullscreen-image-carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-image-carousel.js","sources":["../../src/fullscreen-image-carousel/fullscreen-image-carousel.tsx"],"sourcesContent":["import {\n    ChevronLeftIcon,\n    ChevronRightIcon,\n    CrossIcon,\n    MagnifierMinusIcon,\n    MagnifierPlusIcon,\n} from \"@lifesg/react-icons\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport type {\n    ReactZoomPanPinchContentRef,\n    ReactZoomPanPinchRef,\n} from \"react-zoom-pan-pinch\";\nimport { TransformComponent, TransformWrapper } from \"react-zoom-pan-pinch\";\n\nimport { ModalV2 } from \"../modal-v2\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useStateCallback } from \"../shared/hooks\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useEventListener } from \"../util\";\nimport * as styles from \"./fullscreen-image-carousel.styles\";\nimport { StatefulImage } from \"./stateful-image\";\nimport type {\n    FullscreenImageCarouselCustomItemProps,\n    FullscreenImageCarouselItemProps,\n    FullscreenImageCarouselProps,\n    FullscreenImageCarouselRef,\n    ImageDimension,\n} from \"./types\";\n\nconst isCustomItem = (\n    item: FullscreenImageCarouselItemProps | undefined\n): item is FullscreenImageCarouselCustomItemProps =>\n    !!item && item.type === \"custom\";\n\nexport const Component = (\n    {\n        items,\n        initialActiveItemIndex,\n        hideThumbnail = false,\n        hideNavigation = false,\n        hideCounter = false,\n        hideMagnifier = false,\n        onDelete,\n        onClose,\n        insets,\n        show,\n        ...otherProps\n    }: FullscreenImageCarouselProps,\n    ref: React.Ref<FullscreenImageCarouselRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentSlide, setCurrentSlide] = useStateCallback(\n        initialActiveItemIndex ?? 0\n    );\n    const [imagesDimension, setImageDimension] = useState<\n        Record<string, ImageDimension>\n    >({});\n    const [zoom, setZoom] = useState(1);\n    const [startX, setStartX] = useState<number | undefined>();\n    const [endX, setEndX] = useState<number | undefined>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const thumbnailRefs = useRef<(HTMLDivElement | null)[]>([]);\n    const zoomRefs = useRef<(ReactZoomPanPinchContentRef | null)[]>([]);\n    const imageRef = useRef<HTMLDivElement>(null);\n    const topActionButtonsRef = useRef<HTMLDivElement>(null);\n    const prevArrowButtonRef = useRef<HTMLButtonElement>(null);\n    const nextArrowButtonRef = useRef<HTMLButtonElement>(null);\n    const thumbnailContainerRef = useRef<HTMLDivElement>(null);\n    const diff = startX && endX ? startX - endX : 0;\n    const currentItem = items[currentSlide];\n    const hasAnyItemLabel = items.some(\n        (item) => isCustomItem(item) && !!item.itemLabel?.trim()\n    );\n    const carouselItemNoun = hasAnyItemLabel ? \"item\" : \"image\";\n    const hasFileInfo = useMemo(\n        () =>\n            items.some(\n                (item) => item.fileName?.trim() || item.fileSize?.trim()\n            ),\n        [items]\n    );\n\n    useApplyStyle(topActionButtonsRef, {\n        [styles.tokens.topActionButtons.insetTop]: formatUnitValue(\n            insets?.top,\n            \"px\"\n        ),\n        [styles.tokens.topActionButtons.insetLeft]: formatUnitValue(\n            insets?.left,\n            \"px\"\n        ),\n        [styles.tokens.topActionButtons.insetRight]: formatUnitValue(\n            insets?.right,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(prevArrowButtonRef, {\n        [styles.tokens.arrowButton.insetLeft]: formatUnitValue(\n            insets?.left,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(nextArrowButtonRef, {\n        [styles.tokens.arrowButton.insetRight]: formatUnitValue(\n            insets?.right,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(thumbnailContainerRef, {\n        [styles.tokens.thumbnailContainer.insetBottom]: formatUnitValue(\n            insets?.bottom,\n            \"px\"\n        ),\n    });\n\n    const getItemAriaLabel = useCallback(\n        (index: number) => {\n            const item = items[index];\n            const itemTypeLabel = hasAnyItemLabel ? \"Item\" : \"Image\";\n            const prefix = isCustomItem(item)\n                ? item.itemLabel?.trim() || \"\"\n                : item.alt?.trim() || \"\";\n            const positionLabel = `${itemTypeLabel} ${index + 1} of ${\n                items.length\n            }.`;\n\n            return prefix ? `${prefix}. ${positionLabel}` : positionLabel;\n        },\n        [items, hasAnyItemLabel]\n    );\n\n    useImperativeHandle<FullscreenImageCarouselRef, FullscreenImageCarouselRef>(\n        ref,\n        () => ({\n            currentItemIndex: currentSlide,\n            setCurrentItem: goToSlide,\n            goToPrevItem: goToPrevSlide,\n            goToNextItem: goToNextSlide,\n        })\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"keydown\", handleKeyDown, \"document\");\n\n    useEffect(() => {\n        if (show) {\n            imageRef.current?.focus();\n        }\n    }, [show]);\n\n    useEffect(() => {\n        if (items.length === 0) {\n            setCurrentSlide(0);\n            return;\n        }\n\n        if (currentSlide > items.length - 1) {\n            setCurrentSlide(items.length - 1);\n        }\n    }, [currentSlide, items.length, setCurrentSlide]);\n\n    useEffect(() => {\n        thumbnailRefs.current?.[currentSlide]?.scrollIntoView({\n            behavior: \"smooth\",\n            inline: \"center\",\n        });\n        setZoom(1);\n    }, [currentSlide]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleTouchStart = (e: React.TouchEvent) => {\n        if (zoom <= 1) setStartX(e.touches[0].clientX);\n    };\n\n    const handleTouchMove = (e: React.TouchEvent) => {\n        if (!startX || zoom > 1) return;\n        setEndX(e.touches[0].clientX);\n    };\n\n    const handleTouchEnd = () => {\n        if (!containerRef.current) return;\n        if (Math.abs(diff) > containerRef.current.offsetWidth / 3) {\n            if (diff > 0) {\n                goToNextSlide();\n            } else {\n                goToPrevSlide();\n            }\n        }\n        setStartX(undefined);\n        setEndX(undefined);\n    };\n\n    const handleZoom = (e: ReactZoomPanPinchRef) => {\n        setZoom(e.state.scale);\n    };\n\n    const handleDelete = () => {\n        if (currentItem && onDelete) {\n            onDelete(currentItem, currentSlide);\n        }\n    };\n\n    function handleKeyDown(e: KeyboardEvent) {\n        if (e.key === \"ArrowRight\") {\n            goToNextSlide();\n        } else if (e.key === \"ArrowLeft\") {\n            goToPrevSlide();\n        } else if (e.key === \"Escape\") {\n            onClose?.();\n        }\n    }\n\n    const handleMagnifier = () => {\n        if (zoom === 1) {\n            const zoomRatio = getZoomRatio();\n            zoomRefs.current?.[currentSlide]?.centerView(zoomRatio);\n            setZoom(zoomRatio ?? 1);\n        } else {\n            setZoom(1);\n            zoomRefs.current?.[currentSlide]?.resetTransform();\n        }\n    };\n\n    const setDimension = ({\n        src,\n        height,\n        width,\n    }: {\n        src: string;\n        height: number;\n        width: number;\n    }) => {\n        setImageDimension((oldState) => {\n            return { ...oldState, [src]: { height, width } };\n        });\n    };\n\n    const getZoomRatio = () => {\n        if (!currentItem || isCustomItem(currentItem)) {\n            return;\n        }\n\n        const imageDimension = imagesDimension[currentItem.src];\n\n        if (containerRef.current && !!imageDimension) {\n            const { clientHeight, clientWidth } = containerRef.current;\n            const { width, height } = imageDimension;\n            const isSmallImg = width < clientWidth && height < clientHeight;\n\n            const isImgLandscapeRelativeToDevice =\n                height / width < clientHeight / clientWidth;\n\n            if (isSmallImg) {\n                return isImgLandscapeRelativeToDevice\n                    ? clientWidth / width\n                    : clientHeight / height;\n            }\n\n            return isImgLandscapeRelativeToDevice\n                ? clientHeight / (height / (width / clientWidth))\n                : clientWidth / (width / (height / clientHeight));\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const goToPrevSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === 0 ? items.length - 1 : prev - 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToNextSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === items.length - 1 ? 0 : prev + 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToSlide = (index: number) => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(index);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSlides = () => {\n        return (\n            <div\n                className={styles.imageGallerySlides}\n                style={{\n                    transform: `translateX(calc(${\n                        -currentSlide * 100\n                    }% - ${diff}px))`,\n                }}\n            >\n                {items.map((item, index) => {\n                    const isActive = index === currentSlide;\n                    const isActiveOrAdjacent =\n                        Math.abs(index - currentSlide) <= 1 ||\n                        (currentSlide === 0 && index === items.length - 1) ||\n                        (currentSlide === items.length - 1 && index === 0);\n\n                    return (\n                        <div\n                            className={styles.imageGallerySlide}\n                            key={index}\n                            data-testid=\"slide-item\"\n                        >\n                            <div\n                                className={styles.focusableImageRegion}\n                                ref={isActive ? imageRef : null}\n                                tabIndex={isActive ? 0 : -1}\n                            >\n                                {isCustomItem(item) ? (\n                                    isActiveOrAdjacent ? (\n                                        item.renderContent()\n                                    ) : (\n                                        <ImagePlaceholder\n                                            className={\n                                                styles.slidePlaceholderImage\n                                            }\n                                        />\n                                    )\n                                ) : (\n                                    <TransformWrapper\n                                        ref={(el) =>\n                                            (zoomRefs.current[index] = el)\n                                        }\n                                        panning={{\n                                            disabled: zoom <= 1,\n                                        }}\n                                        initialScale={1}\n                                        onZoom={handleZoom}\n                                        onZoomStop={handleZoom}\n                                        onWheel={handleZoom}\n                                    >\n                                        <TransformComponent>\n                                            <StatefulImage\n                                                className={styles.slideImage}\n                                                src={item.src}\n                                                alt={getItemAriaLabel(index)}\n                                                placeholder={\n                                                    <ImagePlaceholder\n                                                        className={\n                                                            styles.slidePlaceholderImage\n                                                        }\n                                                    />\n                                                }\n                                                fit=\"scale-down\"\n                                                retrieveImageDimension\n                                                setDimension={setDimension}\n                                            />\n                                        </TransformComponent>\n                                    </TransformWrapper>\n                                )}\n                            </div>\n                        </div>\n                    );\n                })}\n            </div>\n        );\n    };\n\n    const renderFileInfo = () => {\n        const { fileName, fileSize } = currentItem ?? {};\n        const trimmedName = fileName?.trim();\n        const trimmedSize = fileSize?.trim();\n\n        return (\n            <div\n                className={clsx(\n                    styles.fileInfoTextWrapper,\n                    !trimmedSize && styles.fileInfoTextWrapperCentered\n                )}\n                aria-live=\"polite\"\n                aria-atomic=\"true\"\n                data-testid=\"file-info-bar\"\n            >\n                {trimmedName && (\n                    <Typography.BodyBL\n                        className={styles.fileInfoFileName}\n                        weight=\"semibold\"\n                        data-testid=\"file-info-name\"\n                    >\n                        {trimmedName}\n                    </Typography.BodyBL>\n                )}\n                {trimmedSize && (\n                    <Typography.BodyMD\n                        className={styles.fileInfoFileSize}\n                        data-testid=\"file-info-size\"\n                    >\n                        {trimmedSize}\n                    </Typography.BodyMD>\n                )}\n            </div>\n        );\n    };\n\n    const renderThumbnails = () => {\n        return (\n            <div\n                className={styles.thumbnailContainer}\n                ref={thumbnailContainerRef}\n                aria-hidden=\"true\"\n                data-testid=\"thumbnail-container\"\n            >\n                <div className={styles.thumbnailWrapper}>\n                    {items.map((item, index) => {\n                        const src = isCustomItem(item)\n                            ? item.thumbnailSrc\n                            : item.thumbnailSrc ?? item.src;\n                        return (\n                            <div\n                                className={styles.thumbnailItemContainer}\n                                key={index}\n                            >\n                                <div\n                                    className={styles.thumbnailItem}\n                                    data-active={index === currentSlide}\n                                    data-testid=\"thumbnail-item\"\n                                    onClick={() => goToSlide(index)}\n                                    ref={(el) =>\n                                        (thumbnailRefs.current[index] = el)\n                                    }\n                                >\n                                    {src ? (\n                                        <StatefulImage\n                                            className={styles.thumbnailImage}\n                                            src={src}\n                                            alt={`Thumbnail ${index + 1}`}\n                                            fit=\"cover\"\n                                        />\n                                    ) : (\n                                        <ImagePlaceholder\n                                            className={\n                                                styles.slidePlaceholderImage\n                                            }\n                                        />\n                                    )}\n                                </div>\n                            </div>\n                        );\n                    })}\n                </div>\n            </div>\n        );\n    };\n\n    return (\n        <ModalV2\n            {...otherProps}\n            data-testid=\"image-carousel-modal\"\n            aria-label={hasAnyItemLabel ? \"Carousel\" : \"Image carousel\"}\n            show={show}\n            disableInitialFocus\n        >\n            <div className={styles.carouselModalContent}>\n                <div className={styles.imageGalleryContainer}>\n                    <div className={styles.imageGalleryWrapper}>\n                        <div\n                            className={styles.imageGallerySwipe}\n                            ref={containerRef}\n                            onTouchStart={handleTouchStart}\n                            onTouchMove={handleTouchMove}\n                            onTouchEnd={handleTouchEnd}\n                        >\n                            {renderSlides()}\n                        </div>\n\n                        {!hideNavigation && (\n                            <>\n                                <ClickableIcon\n                                    className={clsx(\n                                        styles.iconButton,\n                                        styles.arrowButton,\n                                        styles.arrowButtonLeft\n                                    )}\n                                    ref={prevArrowButtonRef}\n                                    aria-label={`Previous ${carouselItemNoun}`}\n                                    data-testid=\"prev-btn\"\n                                    onClick={goToPrevSlide}\n                                >\n                                    <ChevronLeftIcon aria-hidden />\n                                </ClickableIcon>\n                                <ClickableIcon\n                                    className={clsx(\n                                        styles.iconButton,\n                                        styles.arrowButton,\n                                        styles.arrowButtonRight\n                                    )}\n                                    ref={nextArrowButtonRef}\n                                    aria-label={`Next ${carouselItemNoun}`}\n                                    data-testid=\"forward-btn\"\n                                    onClick={goToNextSlide}\n                                >\n                                    <ChevronRightIcon aria-hidden />\n                                </ClickableIcon>\n                            </>\n                        )}\n\n                        {!hideCounter && (\n                            <div className={styles.boxChip} aria-hidden=\"true\">\n                                <Typography.BodyXS\n                                    className={styles.chip}\n                                    weight=\"semibold\"\n                                    data-testid=\"carousel-counter\"\n                                >{`${currentSlide + 1}/${\n                                    items.length\n                                }`}</Typography.BodyXS>\n                            </div>\n                        )}\n                    </div>\n\n                    {!hideThumbnail && renderThumbnails()}\n                </div>\n                <div\n                    className={styles.topActionButtons}\n                    ref={topActionButtonsRef}\n                    data-has-file-info={hasFileInfo}\n                >\n                    {hasFileInfo && renderFileInfo()}\n                    {!hideMagnifier && !isCustomItem(currentItem) && (\n                        <ClickableIcon\n                            className={styles.iconButton}\n                            aria-label={zoom === 1 ? \"Zoom in\" : \"Zoom out\"}\n                            onClick={handleMagnifier}\n                        >\n                            {zoom === 1 ? (\n                                <MagnifierPlusIcon aria-hidden />\n                            ) : (\n                                <MagnifierMinusIcon aria-hidden />\n                            )}\n                        </ClickableIcon>\n                    )}\n\n                    {onDelete && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonError\n                            )}\n                            aria-label={`Delete ${\n                                (isCustomItem(currentItem) &&\n                                    currentItem.itemLabel?.trim()) ||\n                                \"image\"\n                            }`}\n                            data-testid=\"delete-btn\"\n                            onClick={handleDelete}\n                        >\n                            <BinIcon aria-hidden />\n                        </ClickableIcon>\n                    )}\n\n                    <ClickableIcon\n                        className={styles.iconButton}\n                        aria-label={\n                            hasAnyItemLabel\n                                ? \"Close carousel\"\n                                : \"Close image carousel\"\n                        }\n                        onClick={onClose}\n                    >\n                        <CrossIcon aria-hidden />\n                    </ClickableIcon>\n                </div>\n            </div>\n        </ModalV2>\n    );\n};\n\nexport const FullscreenImageCarousel = forwardRef<\n    FullscreenImageCarouselRef,\n    FullscreenImageCarouselProps\n>(Component);\n"],"names":["isCustomItem","item","type","Component","_a","ref","items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show","otherProps","__rest","currentSlide","setCurrentSlide","useStateCallback","imagesDimension","setImageDimension","useState","zoom","setZoom","startX","setStartX","endX","setEndX","containerRef","useRef","thumbnailRefs","zoomRefs","imageRef","topActionButtonsRef","prevArrowButtonRef","nextArrowButtonRef","thumbnailContainerRef","diff","currentItem","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","_b","useApplyStyle","styles.tokens","topActionButtons","insetTop","formatUnitValue","top","insetLeft","left","insetRight","right","arrowButton","thumbnailContainer","insetBottom","bottom","getItemAriaLabel","useCallback","index","itemTypeLabel","prefix","alt","positionLabel","length","useImperativeHandle","currentItemIndex","setCurrentItem","goToSlide","goToPrevItem","goToPrevSlide","goToNextItem","goToNextSlide","useEventListener","e","key","useEffect","current","focus","scrollIntoView","behavior","inline","handleZoom","state","scale","setDimension","src","height","width","oldState","Object","assign","getZoomRatio","imageDimension","clientHeight","clientWidth","isImgLandscapeRelativeToDevice","resetTransform","prev","slide","clearAnnouncer","announce","_jsx","ModalV2","disableInitialFocus","_jsxs","className","styles.carouselModalContent","children","styles.imageGalleryContainer","styles.imageGalleryWrapper","styles.imageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","styles.imageGallerySlides","style","transform","map","isActive","isActiveOrAdjacent","styles.imageGallerySlide","styles.focusableImageRegion","tabIndex","renderContent","ImagePlaceholder","styles.slidePlaceholderImage","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","StatefulImage","styles.slideImage","placeholder","fit","retrieveImageDimension","_Fragment","ClickableIcon","clsx","styles.iconButton","styles.arrowButton","styles.arrowButtonLeft","onClick","ChevronLeftIcon","styles.arrowButtonRight","ChevronRightIcon","styles.boxChip","Typography","BodyXS","styles.chip","weight","styles.thumbnailContainer","styles.thumbnailWrapper","thumbnailSrc","styles.thumbnailItemContainer","styles.thumbnailItem","styles.thumbnailImage","styles.topActionButtons","trimmedName","trimmedSize","styles.fileInfoTextWrapper","styles.fileInfoTextWrapperCentered","BodyBL","styles.fileInfoFileName","BodyMD","styles.fileInfoFileSize","renderFileInfo","zoomRatio","centerView","_d","_c","MagnifierPlusIcon","MagnifierMinusIcon","styles.iconButtonError","BinIcon","CrossIcon","FullscreenImageCarousel","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fullscreen-image-carousel.js","sources":["../../src/fullscreen-image-carousel/fullscreen-image-carousel.tsx"],"sourcesContent":["import {\n    ChevronLeftIcon,\n    ChevronRightIcon,\n    CrossIcon,\n    MagnifierMinusIcon,\n    MagnifierPlusIcon,\n} from \"@lifesg/react-icons\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport type {\n    ReactZoomPanPinchContentRef,\n    ReactZoomPanPinchRef,\n} from \"react-zoom-pan-pinch\";\nimport { TransformComponent, TransformWrapper } from \"react-zoom-pan-pinch\";\n\nimport { ModalV2 } from \"../modal-v2\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useStateCallback } from \"../shared/hooks\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useEventListener } from \"../util\";\nimport * as styles from \"./fullscreen-image-carousel.styles\";\nimport { StatefulImage } from \"./stateful-image\";\nimport type {\n    FullscreenImageCarouselCustomItemProps,\n    FullscreenImageCarouselItemProps,\n    FullscreenImageCarouselProps,\n    FullscreenImageCarouselRef,\n    ImageDimension,\n} from \"./types\";\n\nconst isCustomItem = (\n    item: FullscreenImageCarouselItemProps | undefined\n): item is FullscreenImageCarouselCustomItemProps =>\n    !!item && item.type === \"custom\";\n\nexport const Component = (\n    {\n        items,\n        initialActiveItemIndex,\n        hideThumbnail = false,\n        hideNavigation = false,\n        hideCounter = false,\n        hideMagnifier = false,\n        onDelete,\n        onClose,\n        insets,\n        show,\n        ...otherProps\n    }: FullscreenImageCarouselProps,\n    ref: React.Ref<FullscreenImageCarouselRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentSlide, setCurrentSlide] = useStateCallback(\n        initialActiveItemIndex ?? 0\n    );\n    const [imagesDimension, setImageDimension] = useState<\n        Record<string, ImageDimension>\n    >({});\n    const [zoom, setZoom] = useState(1);\n    const [startX, setStartX] = useState<number | undefined>();\n    const [endX, setEndX] = useState<number | undefined>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const thumbnailRefs = useRef<(HTMLDivElement | null)[]>([]);\n    const zoomRefs = useRef<(ReactZoomPanPinchContentRef | null)[]>([]);\n    const imageRef = useRef<HTMLDivElement>(null);\n    const topActionButtonsRef = useRef<HTMLDivElement>(null);\n    const prevArrowButtonRef = useRef<HTMLButtonElement>(null);\n    const nextArrowButtonRef = useRef<HTMLButtonElement>(null);\n    const thumbnailContainerRef = useRef<HTMLDivElement>(null);\n    const diff = startX && endX ? startX - endX : 0;\n    const currentItem = items[currentSlide];\n    const hasAnyItemLabel = items.some(\n        (item) => isCustomItem(item) && !!item.itemLabel?.trim()\n    );\n    const carouselItemNoun = hasAnyItemLabel ? \"item\" : \"image\";\n    const hasFileInfo = useMemo(\n        () =>\n            items.some(\n                (item) => item.fileName?.trim() || item.fileSize?.trim()\n            ),\n        [items]\n    );\n\n    useApplyStyle(topActionButtonsRef, {\n        [styles.tokens.topActionButtons.insetTop]: formatUnitValue(\n            insets?.top,\n            \"px\"\n        ),\n        [styles.tokens.topActionButtons.insetLeft]: formatUnitValue(\n            insets?.left,\n            \"px\"\n        ),\n        [styles.tokens.topActionButtons.insetRight]: formatUnitValue(\n            insets?.right,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(prevArrowButtonRef, {\n        [styles.tokens.arrowButton.insetLeft]: formatUnitValue(\n            insets?.left,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(nextArrowButtonRef, {\n        [styles.tokens.arrowButton.insetRight]: formatUnitValue(\n            insets?.right,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(thumbnailContainerRef, {\n        [styles.tokens.thumbnailContainer.insetBottom]: formatUnitValue(\n            insets?.bottom,\n            \"px\"\n        ),\n    });\n\n    const getItemAriaLabel = useCallback(\n        (index: number) => {\n            const item = items[index];\n            const itemTypeLabel = hasAnyItemLabel ? \"Item\" : \"Image\";\n            const prefix = isCustomItem(item)\n                ? item.itemLabel?.trim() || \"\"\n                : item.alt?.trim() || \"\";\n            const positionLabel = `${itemTypeLabel} ${index + 1} of ${\n                items.length\n            }.`;\n\n            return prefix ? `${prefix}. ${positionLabel}` : positionLabel;\n        },\n        [items, hasAnyItemLabel]\n    );\n\n    useImperativeHandle<FullscreenImageCarouselRef, FullscreenImageCarouselRef>(\n        ref,\n        () => ({\n            currentItemIndex: currentSlide,\n            setCurrentItem: goToSlide,\n            goToPrevItem: goToPrevSlide,\n            goToNextItem: goToNextSlide,\n        })\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"keydown\", handleKeyDown, \"document\");\n\n    useEffect(() => {\n        if (show) {\n            imageRef.current?.focus();\n        }\n    }, [show]);\n\n    useEffect(() => {\n        if (items.length === 0) {\n            setCurrentSlide(0);\n            return;\n        }\n\n        if (currentSlide > items.length - 1) {\n            setCurrentSlide(items.length - 1);\n        }\n    }, [currentSlide, items.length, setCurrentSlide]);\n\n    useEffect(() => {\n        thumbnailRefs.current?.[currentSlide]?.scrollIntoView({\n            behavior: \"smooth\",\n            inline: \"center\",\n        });\n        setZoom(1);\n    }, [currentSlide]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleTouchStart = (e: React.TouchEvent) => {\n        if (zoom <= 1) setStartX(e.touches[0].clientX);\n    };\n\n    const handleTouchMove = (e: React.TouchEvent) => {\n        if (!startX || zoom > 1) return;\n        setEndX(e.touches[0].clientX);\n    };\n\n    const handleTouchEnd = () => {\n        if (!containerRef.current) return;\n        if (Math.abs(diff) > containerRef.current.offsetWidth / 3) {\n            if (diff > 0) {\n                goToNextSlide();\n            } else {\n                goToPrevSlide();\n            }\n        }\n        setStartX(undefined);\n        setEndX(undefined);\n    };\n\n    const handleZoom = (e: ReactZoomPanPinchRef) => {\n        setZoom(e.state.scale);\n    };\n\n    const handleDelete = () => {\n        if (currentItem && onDelete) {\n            onDelete(currentItem, currentSlide);\n        }\n    };\n\n    function handleKeyDown(e: KeyboardEvent) {\n        if (e.key === \"ArrowRight\") {\n            goToNextSlide();\n        } else if (e.key === \"ArrowLeft\") {\n            goToPrevSlide();\n        } else if (e.key === \"Escape\") {\n            onClose?.();\n        }\n    }\n\n    const handleMagnifier = () => {\n        if (zoom === 1) {\n            const zoomRatio = getZoomRatio();\n            zoomRefs.current?.[currentSlide]?.centerView(zoomRatio);\n            setZoom(zoomRatio ?? 1);\n        } else {\n            setZoom(1);\n            zoomRefs.current?.[currentSlide]?.resetTransform();\n        }\n    };\n\n    const setDimension = ({\n        src,\n        height,\n        width,\n    }: {\n        src: string;\n        height: number;\n        width: number;\n    }) => {\n        setImageDimension((oldState) => {\n            return { ...oldState, [src]: { height, width } };\n        });\n    };\n\n    const getZoomRatio = () => {\n        if (!currentItem || isCustomItem(currentItem)) {\n            return;\n        }\n\n        const imageDimension = imagesDimension[currentItem.src];\n\n        if (containerRef.current && !!imageDimension) {\n            const { clientHeight, clientWidth } = containerRef.current;\n            const { width, height } = imageDimension;\n            const isSmallImg = width < clientWidth && height < clientHeight;\n\n            const isImgLandscapeRelativeToDevice =\n                height / width < clientHeight / clientWidth;\n\n            if (isSmallImg) {\n                return isImgLandscapeRelativeToDevice\n                    ? clientWidth / width\n                    : clientHeight / height;\n            }\n\n            return isImgLandscapeRelativeToDevice\n                ? clientHeight / (height / (width / clientWidth))\n                : clientWidth / (width / (height / clientHeight));\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const goToPrevSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === 0 ? items.length - 1 : prev - 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToNextSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === items.length - 1 ? 0 : prev + 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToSlide = (index: number) => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(index);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSlides = () => {\n        return (\n            <div\n                className={styles.imageGallerySlides}\n                style={{\n                    transform: `translateX(calc(${\n                        -currentSlide * 100\n                    }% - ${diff}px))`,\n                }}\n            >\n                {items.map((item, index) => {\n                    const isActive = index === currentSlide;\n                    const isActiveOrAdjacent =\n                        Math.abs(index - currentSlide) <= 1 ||\n                        (currentSlide === 0 && index === items.length - 1) ||\n                        (currentSlide === items.length - 1 && index === 0);\n\n                    return (\n                        <div\n                            className={styles.imageGallerySlide}\n                            key={index}\n                            data-testid=\"slide-item\"\n                        >\n                            <div\n                                className={styles.focusableImageRegion}\n                                ref={isActive ? imageRef : null}\n                                tabIndex={isActive ? 0 : -1}\n                            >\n                                {isCustomItem(item) ? (\n                                    isActiveOrAdjacent ? (\n                                        item.renderContent()\n                                    ) : (\n                                        <ImagePlaceholder\n                                            className={\n                                                styles.slidePlaceholderImage\n                                            }\n                                        />\n                                    )\n                                ) : (\n                                    <TransformWrapper\n                                        ref={(el) =>\n                                            (zoomRefs.current[index] = el)\n                                        }\n                                        panning={{\n                                            disabled: zoom <= 1,\n                                        }}\n                                        initialScale={1}\n                                        onZoom={handleZoom}\n                                        onZoomStop={handleZoom}\n                                        onWheel={handleZoom}\n                                    >\n                                        <TransformComponent>\n                                            <StatefulImage\n                                                className={styles.slideImage}\n                                                src={item.src}\n                                                alt={getItemAriaLabel(index)}\n                                                placeholder={\n                                                    <ImagePlaceholder\n                                                        className={\n                                                            styles.slidePlaceholderImage\n                                                        }\n                                                    />\n                                                }\n                                                fit=\"scale-down\"\n                                                retrieveImageDimension\n                                                setDimension={setDimension}\n                                            />\n                                        </TransformComponent>\n                                    </TransformWrapper>\n                                )}\n                            </div>\n                        </div>\n                    );\n                })}\n            </div>\n        );\n    };\n\n    const renderFileInfo = () => {\n        const { fileName, fileSize } = currentItem ?? {};\n        const trimmedName = fileName?.trim();\n        const trimmedSize = fileSize?.trim();\n\n        return (\n            <div\n                className={clsx(\n                    styles.fileInfoTextWrapper,\n                    !trimmedSize && styles.fileInfoTextWrapperCentered\n                )}\n                aria-live=\"polite\"\n                aria-atomic=\"true\"\n                data-testid=\"file-info-bar\"\n            >\n                {trimmedName && (\n                    <Typography.BodyBL\n                        className={styles.fileInfoFileName}\n                        weight=\"semibold\"\n                        data-testid=\"file-info-name\"\n                    >\n                        {trimmedName}\n                    </Typography.BodyBL>\n                )}\n                {trimmedSize && (\n                    <Typography.BodyMD\n                        className={styles.fileInfoFileSize}\n                        data-testid=\"file-info-size\"\n                    >\n                        {trimmedSize}\n                    </Typography.BodyMD>\n                )}\n            </div>\n        );\n    };\n\n    const renderThumbnails = () => {\n        return (\n            <div\n                className={styles.thumbnailContainer}\n                ref={thumbnailContainerRef}\n                aria-hidden=\"true\"\n                data-testid=\"thumbnail-container\"\n            >\n                <div className={styles.thumbnailWrapper}>\n                    {items.map((item, index) => {\n                        const src = isCustomItem(item)\n                            ? item.thumbnailSrc\n                            : item.thumbnailSrc ?? item.src;\n                        return (\n                            <div\n                                className={styles.thumbnailItemContainer}\n                                key={index}\n                            >\n                                <div\n                                    className={styles.thumbnailItem}\n                                    data-active={index === currentSlide}\n                                    data-testid=\"thumbnail-item\"\n                                    onClick={() => goToSlide(index)}\n                                    ref={(el) =>\n                                        (thumbnailRefs.current[index] = el)\n                                    }\n                                >\n                                    {src ? (\n                                        <StatefulImage\n                                            className={styles.thumbnailImage}\n                                            src={src}\n                                            alt={`Thumbnail ${index + 1}`}\n                                            fit=\"cover\"\n                                        />\n                                    ) : (\n                                        <ImagePlaceholder\n                                            className={\n                                                styles.slidePlaceholderImage\n                                            }\n                                        />\n                                    )}\n                                </div>\n                            </div>\n                        );\n                    })}\n                </div>\n            </div>\n        );\n    };\n\n    return (\n        <ModalV2\n            {...otherProps}\n            data-testid=\"image-carousel-modal\"\n            aria-label={hasAnyItemLabel ? \"Carousel\" : \"Image carousel\"}\n            show={show}\n            disableInitialFocus\n        >\n            <div className={styles.carouselModalContent}>\n                <div className={styles.imageGalleryContainer}>\n                    <div className={styles.imageGalleryWrapper}>\n                        <div\n                            className={styles.imageGallerySwipe}\n                            ref={containerRef}\n                            onTouchStart={handleTouchStart}\n                            onTouchMove={handleTouchMove}\n                            onTouchEnd={handleTouchEnd}\n                        >\n                            {renderSlides()}\n                        </div>\n\n                        {!hideNavigation && (\n                            <>\n                                <ClickableIcon\n                                    className={clsx(\n                                        styles.iconButton,\n                                        styles.arrowButton,\n                                        styles.arrowButtonLeft\n                                    )}\n                                    ref={prevArrowButtonRef}\n                                    aria-label={`Previous ${carouselItemNoun}`}\n                                    data-testid=\"prev-btn\"\n                                    onClick={goToPrevSlide}\n                                >\n                                    <ChevronLeftIcon aria-hidden />\n                                </ClickableIcon>\n                                <ClickableIcon\n                                    className={clsx(\n                                        styles.iconButton,\n                                        styles.arrowButton,\n                                        styles.arrowButtonRight\n                                    )}\n                                    ref={nextArrowButtonRef}\n                                    aria-label={`Next ${carouselItemNoun}`}\n                                    data-testid=\"forward-btn\"\n                                    onClick={goToNextSlide}\n                                >\n                                    <ChevronRightIcon aria-hidden />\n                                </ClickableIcon>\n                            </>\n                        )}\n\n                        {!hideCounter && (\n                            <div className={styles.boxChip} aria-hidden=\"true\">\n                                <Typography.BodyXS\n                                    className={styles.chip}\n                                    weight=\"semibold\"\n                                    data-testid=\"carousel-counter\"\n                                >{`${currentSlide + 1}/${\n                                    items.length\n                                }`}</Typography.BodyXS>\n                            </div>\n                        )}\n                    </div>\n\n                    {!hideThumbnail && renderThumbnails()}\n                </div>\n                <div\n                    className={styles.topActionButtons}\n                    ref={topActionButtonsRef}\n                    data-has-file-info={hasFileInfo}\n                >\n                    {hasFileInfo && renderFileInfo()}\n                    {!hideMagnifier && !isCustomItem(currentItem) && (\n                        <ClickableIcon\n                            className={styles.iconButton}\n                            aria-label={zoom === 1 ? \"Zoom in\" : \"Zoom out\"}\n                            onClick={handleMagnifier}\n                        >\n                            {zoom === 1 ? (\n                                <MagnifierPlusIcon aria-hidden />\n                            ) : (\n                                <MagnifierMinusIcon aria-hidden />\n                            )}\n                        </ClickableIcon>\n                    )}\n\n                    {onDelete && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonError\n                            )}\n                            aria-label={`Delete ${\n                                (isCustomItem(currentItem) &&\n                                    currentItem.itemLabel?.trim()) ||\n                                \"image\"\n                            }`}\n                            data-testid=\"delete-btn\"\n                            onClick={handleDelete}\n                        >\n                            <BinIcon aria-hidden />\n                        </ClickableIcon>\n                    )}\n\n                    <ClickableIcon\n                        className={styles.iconButton}\n                        aria-label={\n                            hasAnyItemLabel\n                                ? \"Close carousel\"\n                                : \"Close image carousel\"\n                        }\n                        onClick={onClose}\n                    >\n                        <CrossIcon aria-hidden />\n                    </ClickableIcon>\n                </div>\n            </div>\n        </ModalV2>\n    );\n};\n\n// @catalog\n/**\n * A fullscreen modal carousel for browsing images and custom media items.\n *\n * Use to present a collection of images or custom content in an overlay with\n * navigation controls, zoom support, and an optional thumbnail strip.\n * The top info bar is rendered only when at least one item provides some file metadata.\n */\nexport const FullscreenImageCarousel = forwardRef<\n    FullscreenImageCarouselRef,\n    FullscreenImageCarouselProps\n>(Component);\n"],"names":["isCustomItem","item","type","Component","_a","ref","items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show","otherProps","__rest","currentSlide","setCurrentSlide","useStateCallback","imagesDimension","setImageDimension","useState","zoom","setZoom","startX","setStartX","endX","setEndX","containerRef","useRef","thumbnailRefs","zoomRefs","imageRef","topActionButtonsRef","prevArrowButtonRef","nextArrowButtonRef","thumbnailContainerRef","diff","currentItem","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","_b","useApplyStyle","styles.tokens","topActionButtons","insetTop","formatUnitValue","top","insetLeft","left","insetRight","right","arrowButton","thumbnailContainer","insetBottom","bottom","getItemAriaLabel","useCallback","index","itemTypeLabel","prefix","alt","positionLabel","length","useImperativeHandle","currentItemIndex","setCurrentItem","goToSlide","goToPrevItem","goToPrevSlide","goToNextItem","goToNextSlide","useEventListener","e","key","useEffect","current","focus","scrollIntoView","behavior","inline","handleZoom","state","scale","setDimension","src","height","width","oldState","Object","assign","getZoomRatio","imageDimension","clientHeight","clientWidth","isImgLandscapeRelativeToDevice","resetTransform","prev","slide","clearAnnouncer","announce","_jsx","ModalV2","disableInitialFocus","_jsxs","className","styles.carouselModalContent","children","styles.imageGalleryContainer","styles.imageGalleryWrapper","styles.imageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","styles.imageGallerySlides","style","transform","map","isActive","isActiveOrAdjacent","styles.imageGallerySlide","styles.focusableImageRegion","tabIndex","renderContent","ImagePlaceholder","styles.slidePlaceholderImage","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","StatefulImage","styles.slideImage","placeholder","fit","retrieveImageDimension","_Fragment","ClickableIcon","clsx","styles.iconButton","styles.arrowButton","styles.arrowButtonLeft","onClick","ChevronLeftIcon","styles.arrowButtonRight","ChevronRightIcon","styles.boxChip","Typography","BodyXS","styles.chip","weight","styles.thumbnailContainer","styles.thumbnailWrapper","thumbnailSrc","styles.thumbnailItemContainer","styles.thumbnailItem","styles.thumbnailImage","styles.topActionButtons","trimmedName","trimmedSize","styles.fileInfoTextWrapper","styles.fileInfoTextWrapperCentered","BodyBL","styles.fileInfoFileName","BodyMD","styles.fileInfoFileSize","renderFileInfo","zoomRatio","centerView","_d","_c","MagnifierPlusIcon","MagnifierMinusIcon","styles.iconButtonError","BinIcon","CrossIcon","FullscreenImageCarousel","forwardRef"],"mappings":"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"}

package/fullscreen-image-carousel/types.d.ts

@@ -1,46 +1,134 @@
 import type { ModalProps } from "../modal";
 import type { Insets } from "../shared/types";
+/**
+ * Imperative handle to read or change the active item programmatically.
+ */
 export interface FullscreenImageCarouselRef {
+    /** Zero-based index of the currently visible item. */
     currentItemIndex: number;
+    /**
+     * Navigates directly to the item at the given zero-based index.
+     *
+     * @param currentItemIndex Zero-based index of the target item.
+     */
     setCurrentItem: (currentItemIndex: number) => void;
+    /** Navigates to the previous item, wrapping from the first item to the last. */
     goToPrevItem: () => void;
+    /** Navigates to the next item, wrapping from the last item to the first. */
     goToNextItem: () => void;
 }
+/**
+ * Props for the `FullscreenImageCarousel`component.
+ */
 export interface FullscreenImageCarouselProps extends Pick<ModalProps, "show" | "rootComponentId" | "animationFrom" | "zIndex"> {
+    /** The list of items to display. Each item is either an image or a custom content item. */
     items: FullscreenImageCarouselItemProps[];
-    /** The index of the visible item, starts from 0 */
+    /**
+     * Zero-based index of the item that is active when the carousel first opens.
+     *
+     * @default 0
+     */
     initialActiveItemIndex?: number | undefined;
+    /**
+     * Hides the thumbnail strip below the main slide.
+     *
+     * @default false
+     */
     hideThumbnail?: boolean | undefined;
+    /**
+     * Hides the previous and next arrow navigation buttons.
+     *
+     * @default false
+     */
     hideNavigation?: boolean | undefined;
+    /**
+     * Hides the slide position counter chip (e.g. "2/5").
+     *
+     * @default false
+     */
     hideCounter?: boolean | undefined;
+    /**
+     * Hides the zoom in/out magnifier button. Has no effect on custom items, which
+     * never show the magnifier regardless of this prop.
+     *
+     * @default false
+     */
     hideMagnifier?: boolean | undefined;
+    /**
+     * Called when the delete button is activated for the current item.
+     *
+     * @param item The item that was deleted.
+     * @param index Zero-based index of the deleted item in the `items` array.
+     */
     onDelete?: ((item: FullscreenImageCarouselItemProps, index: number) => void) | undefined;
+    /** Called when the close button is activated or the Escape key is pressed. */
     onClose?: (() => void) | undefined;
+    /**
+     * Additional pixel insets applied to keep content within a safe area
+     * of the viewport and avoid overlap with device UI elements.
+     */
     insets?: Insets | undefined;
 }
 interface FullscreenImageCarouselBaseItemProps {
+    /**
+     * Display name of the file shown in the top info bar.
+     */
     fileName?: string | undefined;
+    /**
+     * Human-readable file size shown alongside `fileName` in the top
+     * info bar (e.g. "2.4 MB").
+     */
     fileSize?: string | undefined;
 }
+/**
+ * A standard image item rendered inside the carousel slide.
+ */
 export interface FullscreenImageCarouselImageItemProps extends FullscreenImageCarouselBaseItemProps {
     type?: "image" | undefined;
+    /** URL of the full-resolution image shown in the slide. */
     src: string;
+    /** Accessible label for the image. */
     alt?: string | undefined;
+    /**
+     * URL of the image shown in the thumbnail strip.
+     * Falls back to `src` when omitted.
+     */
     thumbnailSrc?: string | undefined;
     renderContent?: never;
 }
 /** @deprecated Use FullscreenImageCarouselImageItemProps instead */
 export type FullscreenCarouselItemProps = FullscreenImageCarouselImageItemProps;
+/**
+ * A custom-content item for the carousel slide.
+ *
+ * Use when the slide content is not a plain image — for example an iframe,
+ * PDF embed, or any arbitrary React element. The zoom magnifier is not shown
+ * for custom items regardless of the `hideMagnifier` prop.
+ */
 export interface FullscreenImageCarouselCustomItemProps extends FullscreenImageCarouselBaseItemProps {
     type: "custom";
     /** The thumbnail image src. If omitted, a placeholder is shown in the thumbnail strip. */
     thumbnailSrc?: string | undefined;
-    /** Label for this item used in aria-labels (e.g. "PDF"). Defaults to "image". When any item sets this, carousel-level aria-labels use generic "item" wording. */
+    /**
+     * Label for this item used in aria-labels (e.g. "PDF").
+     *
+     * @default "image"
+     */
     itemLabel?: string | undefined;
-    /** Render prop for the full slide area. Consumer is responsible for the entire slide content (e.g. an iframe, embed, or custom viewer). */
+    /**
+     * Render prop for the full slide area. Consumer is responsible
+     * for the entire slide content (e.g. an iframe, embed, or custom viewer).
+     */
     renderContent: () => React.ReactNode;
 }
+/**
+ * A single item in the carousel.
+ *
+ * `type` discriminates between a standard image item (`"image"`)
+ * and a custom-content item (`"custom"`).
+ */
 export type FullscreenImageCarouselItemProps = FullscreenImageCarouselImageItemProps | FullscreenImageCarouselCustomItemProps;
+/** Natural pixel dimensions of a carousel image, used for zoom calculations. */
 export interface ImageDimension {
     width: number;
     height: number;

package/histogram-slider/histogram-slider.d.ts

@@ -1,2 +1,8 @@
 import type { HistogramSliderProps } from "./types";
+/**
+ * A histogram with an overlaid two-thumb range slider for numeric filtering.
+ *
+ * Use `HistogramSlider` to let users narrow a dataset by selecting a numeric
+ * range while seeing how values are distributed across bins.
+ */
 export declare const HistogramSlider: ({ bins, interval, disabled, readOnly, value, showRangeLabels, rangeLabelPrefix, rangeLabelSuffix, ariaLabels, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onChange, onChangeEnd, renderEmptyView, renderRangeLabel, className, ...otherProps }: HistogramSliderProps) => import("react/jsx-runtime").JSX.Element;