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

package/file-upload/types.d.ts

@@ -136,7 +136,6 @@ export interface FileUploadProps extends FileInputProps {
     readOnly?: boolean | undefined;
     /**
      * Overrides default label text for elements within the component.
-     * Currently supports `uploadButtonLabel` to replace the "Upload files" button text.
      */
     customLabels?: {
         uploadButtonLabel?: string | undefined;

package/filter/types.d.ts

@@ -60,14 +60,14 @@ export interface FilterBaseProps {
     doneButtonLabel?: string | undefined;
 }
 /**
- * Props for the desktop sidebar variant of the filter panel.
+ * Props for the `Filter.Sidebar` sub-component.
  */
 export interface FilterSidebarProps extends FilterBaseProps {
     /** Overrides default labels used by the sidebar variant. */
     customLabels?: FilterSidebarCustomLabelProps | undefined;
 }
 /**
- * Props for the mobile modal variant of the filter panel.
+ * Props for the `Filter.Modal` sub-component.
  */
 export interface FilterModalProps extends FilterBaseProps {
     /** Called when the dismiss (close) button is pressed in the modal overlay. */
@@ -91,7 +91,7 @@ export interface FilterModalProps extends FilterBaseProps {
     insets?: Insets | undefined;
 }
 /**
- * Props for the `Filter` component, combining both sidebar and modal variants.
+ * Props for the `Filter` component.
  */
 export interface FilterProps extends Omit<FilterSidebarProps, "customLabels">, Omit<FilterModalProps, "customLabels"> {
     /**
@@ -102,7 +102,7 @@ export interface FilterProps extends Omit<FilterSidebarProps, "customLabels">, O
     customLabels?: FilterModalCustomLabelProps | FilterSidebarCustomLabelProps | undefined;
 }
 /**
- * Props for a single collapsible filter section within a filter panel.
+ * Props for the `Filter.Item` sub-component.
  */
 export interface FilterItemProps {
     /**
@@ -171,10 +171,7 @@ export interface FilterItemProps {
     style?: React.CSSProperties | undefined;
 }
 /**
- * Props for a full-screen sub-page overlay within the mobile filter modal.
- *
- * `Filter.Page` provides a back-navigation header and a done button,
- * intended for drill-down selection flows inside a filter item.
+ * Props for the `Filter.Page` sub-component.
  */
 export interface FilterPageProps {
     "data-testid"?: string | undefined;
@@ -197,8 +194,7 @@ export interface FilterItemCheckboxOptionProps {
     options?: FilterItemCheckboxOptionProps[] | undefined;
 }
 /**
- * Props for `Filter.Checkbox`, a filter item that renders a list of selectable
- * checkboxes (desktop) or toggle chips (mobile).
+ * Props for the `Filter.Checkbox` sub-component.
  *
  * Supply a generic type `T` to use a custom option shape together with
  * `labelExtractor` and `valueExtractor`.

package/form/form-label-addon.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{ICircleFillIcon as e}from"@lifesg/react-icons/i-circle-fill";import"../_virtual/_tslib.js";import"clsx";import"react";import"../theme/theme-provider/context.js";import"../typography/typography.js";import"../card/card.styles_1gh9gs3.css";import"../markup/markup.js";import"../modal-v2/index.js";import"../theme/theme-provider/index.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../popover/popover.styles_ujnf0h.css";import{PopoverInline as o}from"../popover/popover-inline/popover-inline.js";import"@floating-ui/react";import"../overlay/use-floating-context.js";import"../popover/popover-trigger.styles_8zokig.css";import{addonWrapper as r}from"./form-label-addon.styles.js";const i=({addon:i,rootNode:p})=>{const{content:s,type:m,icon:n,id:a,zIndex:l,"data-testid":d}=i;return t("div",{className:r,children:t(o,{trigger:"click",id:a,"data-testid":d,popoverContent:s,rootNode:p,zIndex:l,icon:null!=n?n:t(e,{"data-testid":`${m}-icon`}),ariaLabel:"More info"})})};export{i as PopoverAddon};
+import{jsx as t}from"react/jsx-runtime";import{ICircleFillIcon as o}from"@lifesg/react-icons/i-circle-fill";import"../_virtual/_tslib.js";import"clsx";import"react";import"../theme/theme-provider/context.js";import"../typography/typography.js";import"../card/card.styles_1gh9gs3.css";import"../markup/markup.js";import"../modal-v2/modal-v2.js";import"../theme/theme-provider/index.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../popover/popover.styles_ujnf0h.css";import{PopoverInline as e}from"../popover/popover-inline/popover-inline.js";import"@floating-ui/react";import"../overlay/use-floating-context.js";import"../popover/popover-trigger.styles_8zokig.css";import{addonWrapper as r}from"./form-label-addon.styles.js";const i=({addon:i,rootNode:p})=>{const{content:s,type:m,icon:a,id:n,zIndex:l,"data-testid":d}=i;return t("div",{className:r,children:t(e,{trigger:"click",id:n,"data-testid":d,popoverContent:s,rootNode:p,zIndex:l,icon:null!=a?a:t(o,{"data-testid":`${m}-icon`}),ariaLabel:"More info"})})};export{i as PopoverAddon};
 //# sourceMappingURL=form-label-addon.js.map

package/form/form-label-addon.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-label-addon.js","sources":["../../src/form/form-label-addon.tsx"],"sourcesContent":["import { ICircleFillIcon } from \"@lifesg/react-icons/i-circle-fill\";\nimport type { RefObject } from \"react\";\n\nimport { PopoverInline } from \"../popover\";\nimport * as styles from \"./form-label-addon.styles\";\nimport type { FormLabelAddonProps } from \"./types\";\n\n// =============================================================================\n// POPOVER ADDON COMPONENT\n// Note: We need to re-construct as using with the HOC causes some rendering\n// issues\n// =============================================================================\ninterface PopoverAddonProps {\n    addon: FormLabelAddonProps;\n    rootNode?: RefObject<HTMLElement>;\n}\n\nexport const PopoverAddon = ({\n    addon,\n    rootNode,\n}: PopoverAddonProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { content, type, icon, id, zIndex, \"data-testid\": testId } = addon;\n\n    // =========================================================================\n    // RENDER FUNCTION\n    // =========================================================================\n    return (\n        <div className={styles.addonWrapper}>\n            <PopoverInline\n                trigger=\"click\"\n                id={id}\n                data-testid={testId}\n                popoverContent={content}\n                rootNode={rootNode}\n                zIndex={zIndex}\n                icon={icon ?? <ICircleFillIcon data-testid={`${type}-icon`} />}\n                ariaLabel=\"More info\"\n            />\n        </div>\n    );\n};\n"],"names":["PopoverAddon","addon","rootNode","content","type","icon","id","zIndex","testId","_jsx","className","styles.addonWrapper","children","PopoverInline","trigger","popoverContent","ICircleFillIcon","ariaLabel"],"mappings":"kkCAiBO,MAAMA,EAAe,EACxBC,QACAC,eAKA,MAAMC,QAAEA,EAAOC,KAAEA,EAAIC,KAAEA,EAAIC,GAAEA,EAAEC,OAAEA,EAAQ,cAAeC,GAAWP,EAKnE,OACIQ,EAAA,MAAA,CAAKC,UAAWC,EAAmBC,SAC/BH,EAACI,EAAa,CACVC,QAAQ,QACRR,GAAIA,EAAE,cACOE,EACbO,eAAgBZ,EAChBD,SAAUA,EACVK,OAAQA,EACRF,KAAMA,QAAAA,EAAQI,EAACO,EAAe,CAAA,cAAc,GAAGZ,WAC/Ca,UAAU,eAEZ"}
+{"version":3,"file":"form-label-addon.js","sources":["../../src/form/form-label-addon.tsx"],"sourcesContent":["import { ICircleFillIcon } from \"@lifesg/react-icons/i-circle-fill\";\nimport type { RefObject } from \"react\";\n\nimport { PopoverInline } from \"../popover\";\nimport * as styles from \"./form-label-addon.styles\";\nimport type { FormLabelAddonProps } from \"./types\";\n\n// =============================================================================\n// POPOVER ADDON COMPONENT\n// Note: We need to re-construct as using with the HOC causes some rendering\n// issues\n// =============================================================================\ninterface PopoverAddonProps {\n    addon: FormLabelAddonProps;\n    rootNode?: RefObject<HTMLElement>;\n}\n\nexport const PopoverAddon = ({\n    addon,\n    rootNode,\n}: PopoverAddonProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { content, type, icon, id, zIndex, \"data-testid\": testId } = addon;\n\n    // =========================================================================\n    // RENDER FUNCTION\n    // =========================================================================\n    return (\n        <div className={styles.addonWrapper}>\n            <PopoverInline\n                trigger=\"click\"\n                id={id}\n                data-testid={testId}\n                popoverContent={content}\n                rootNode={rootNode}\n                zIndex={zIndex}\n                icon={icon ?? <ICircleFillIcon data-testid={`${type}-icon`} />}\n                ariaLabel=\"More info\"\n            />\n        </div>\n    );\n};\n"],"names":["PopoverAddon","addon","rootNode","content","type","icon","id","zIndex","testId","_jsx","className","styles.addonWrapper","children","PopoverInline","trigger","popoverContent","ICircleFillIcon","ariaLabel"],"mappings":"qkCAiBO,MAAMA,EAAe,EACxBC,QACAC,eAKA,MAAMC,QAAEA,EAAOC,KAAEA,EAAIC,KAAEA,EAAIC,GAAEA,EAAEC,OAAEA,EAAQ,cAAeC,GAAWP,EAKnE,OACIQ,EAAA,MAAA,CAAKC,UAAWC,EAAmBC,SAC/BH,EAACI,EAAa,CACVC,QAAQ,QACRR,GAAIA,EAAE,cACOE,EACbO,eAAgBZ,EAChBD,SAAUA,EACVK,OAAQA,EACRF,KAAMA,QAAAA,EAAQI,EAACO,EAAe,CAAA,cAAc,GAAGZ,WAC/Ca,UAAU,eAEZ"}

package/form/index.d.ts

@@ -1,27 +1,84 @@
 export * from "./types";
+/**
+ * A collection of form field components that each combine a label, input
+ * control, and inline error message with consistent ARIA wiring.
+ *
+ * Use `Form.*` sub-components to build accessible forms. Use `Form.CustomField` to wrap any
+ * bespoke input element in the same layout.
+ *
+ * Sub-components:
+ * - `Form.CustomField` — layout shell for wrapping custom input elements.
+ * - `Form.DateInput` — single date picker.
+ * - `Form.DateRangeInput` — date range picker.
+ * - `Form.ESignature` — e-signature capture field.
+ * - `Form.HistogramSlider` — range slider with histogram overlay.
+ * - `Form.Input` — single-line text input field.
+ * - `Form.InputGroup` — grouped inputs with shared label and error state.
+ * - `Form.Label` — standalone label for use outside a `Form.*` field.
+ * - `Form.MaskedInput` — text input with a character-level input mask.
+ * - `Form.MultiSelect` — multi-value dropdown select.
+ * - `Form.NestedMultiSelect` — hierarchical multi-value select.
+ * - `Form.NestedSelect` — hierarchical single-value select.
+ * - `Form.OtpVerification` — OTP send-and-verify flow.
+ * - `Form.PhoneNumberInput` — phone number input with country code selection.
+ * - `Form.PredictiveTextInput` — text input with predictive suggestions.
+ * - `Form.RangeSelect` — dual-value range dropdown select.
+ * - `Form.RangeSlider` — dual-handle range slider.
+ * - `Form.Select` — single-value dropdown select.
+ * - `Form.SelectHistogram` — select control with histogram.
+ * - `Form.Slider` — single-value range slider.
+ * - `Form.Textarea` — multi-line text area.
+ * - `Form.Timepicker` — time picker.
+ * - `Form.TimeRangePicker` — time range picker.
+ * - `Form.UnitNumberInput` — structured unit number input.
+ */
 export declare const Form: {
+    /** Layout shell that wraps any custom input element with label, subtitle, and error message. */
+    CustomField: ({ id, "data-error-testid": errorTestId, "data-testid": testId, children, ...otherProps }: import("./types").FormCustomFieldProps) => JSX.Element;
+    /** Single date picker with form layout. */
     DateInput: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormDateInputProps) => JSX.Element;
+    /** Date range picker with form layout. */
     DateRangeInput: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormDateRangeInputProps) => JSX.Element;
+    /** E-signature capture field with form layout. */
     ESignature: (props: import("./types").FormESignatureProps) => import("react/jsx-runtime").JSX.Element;
+    /** Range slider with histogram overlay and form layout. */
     HistogramSlider: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormHistogramSliderProps) => JSX.Element;
+    /** Single-line text input field with form layout. */
     Input: (props: import("./types").FormInputProps & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null;
+    /** Grouped inputs with shared label, error state, and form layout. */
     InputGroup: <T, V>(props: import("./types").FormInputGroupProps<T, V> & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null;
-    MaskedInput: (props: import("./types").FormMaskedInputProps & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null;
+    /** Standalone label element for use outside a `Form.*` field with optional subtitle and addon icon. */
     Label: ({ id, children, addon, subtitle, "data-testid": testId, className, style, ...otherProps }: import("./types").FormLabelProps) => JSX.Element;
+    /** Text input with a character-level input mask and form layout. */
+    MaskedInput: (props: import("./types").FormMaskedInputProps & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null;
+    /** Multi-value dropdown select with form layout. */
     MultiSelect: <T, V>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, enableSearch, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, variant, ...otherProps }: import("./types").FormMultiSelectProps<T, V>) => JSX.Element;
-    NestedSelect: <V1, V2, V3>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormNestedSelectProps<V1, V2, V3>) => JSX.Element;
+    /** Hierarchical multi-value select with form layout. */
     NestedMultiSelect: <V1, V2, V3>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormNestedMultiSelectProps<V1, V2, V3>) => JSX.Element;
+    /** Hierarchical single-value select with form layout. */
+    NestedSelect: <V1, V2, V3>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormNestedSelectProps<V1, V2, V3>) => JSX.Element;
+    /** OTP send-and-verify flow with form layout. */
+    OtpVerification: ({ label, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("../otp-verification").FormOtpVerificationProps) => JSX.Element;
+    /** Phone number input with country code selection and form layout. */
+    PhoneNumberInput: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormPhoneNumberInputProps) => JSX.Element;
+    /** Text input with predictive suggestions and form layout. */
+    PredictiveTextInput: <T, V>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormPredictiveTextInputProps<T, V>) => JSX.Element;
+    /** Dual-value range dropdown select with form layout. */
+    RangeSelect: <T, V>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, enableSearch, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormInputRangeSelectProps<T, V>) => JSX.Element;
+    /** Dual-handle range slider with form layout. */
+    RangeSlider: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormRangeSliderProps) => JSX.Element;
+    /** Single-value dropdown select with form layout. */
     Select: <T, V>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, enableSearch, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, variant, ...otherProps }: import("./types").FormInputSelectProps<T, V>) => JSX.Element;
+    /** Select control with histogram and form layout. */
     SelectHistogram: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, histogramSlider, ...otherProps }: import("./types").FormSelectHistogramProps) => JSX.Element;
+    /** Single-value range slider with form layout. */
     Slider: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormSliderProps) => JSX.Element;
-    RangeSlider: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormRangeSliderProps) => JSX.Element;
-    RangeSelect: <T, V>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, enableSearch, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormInputRangeSelectProps<T, V>) => JSX.Element;
+    /** Multi-line text area with form layout. */
     Textarea: (props: import("./types").FormTextareaProps & import("react").RefAttributes<HTMLTextAreaElement>) => React.ReactElement | null;
+    /** Time picker with form layout. */
     Timepicker: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormTimepickerProps) => JSX.Element;
+    /** Time range picker with form layout. */
     TimeRangePicker: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormTimeRangePickerProps) => JSX.Element;
-    CustomField: ({ id, "data-error-testid": errorTestId, "data-testid": testId, children, ...otherProps }: import("./types").FormCustomFieldProps) => JSX.Element;
+    /** Structured unit number input with form layout. */
     UnitNumberInput: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormUnitNumberInputProps) => JSX.Element;
-    PhoneNumberInput: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormPhoneNumberInputProps) => JSX.Element;
-    PredictiveTextInput: <T, V>({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormPredictiveTextInputProps<T, V>) => JSX.Element;
-    OtpVerification: ({ label, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("../otp-verification").FormOtpVerificationProps) => JSX.Element;
 };

package/form/index.js

@@ -1,2 +1,2 @@
-import{FormCustomField as r}from"./form-custom-field.js";import{FormDateInput as t}from"./form-date-input.js";import{FormDateRangeInput as m}from"./form-date-range-input.js";import{FormESignature as o}from"./form-e-signature.js";import{FormHistogramSlider as e}from"./form-histogram.js";import{FormInput as i}from"./form-input.js";import{FormInputGroup as f}from"./form-input-group.js";import{FormLabel as p}from"./form-label.js";import{FormMaskedInput as s}from"./form-masked-input.js";import{FormMultiSelect as n}from"./form-multi-select.js";import{FormNestedMultiSelect as u}from"./form-nested-multi-select.js";import{FormNestedSelect as a}from"./form-nested-select.js";import{FormOtpVerification as l}from"./form-otp-verification.js";import{FormPhoneNumberInput as j}from"./form-phone-number-input.js";import{FormPredictiveTextInput as c}from"./form-predictive-text-input.js";import{FormRangeSelect as d}from"./form-range-select.js";import{FormRangeSlider as g}from"./form-range-slider.js";import{FormSelect as S}from"./form-select.js";import{FormSelectHistogram as I}from"./form-select-histogram.js";import{FormSlider as b}from"./form-slider.js";import{FormTextarea as k}from"./form-textarea.js";import{FormTimeRangePicker as x}from"./form-time-range-picker.js";import{FormTimepicker as h}from"./form-timepicker.js";import{FormUnitNumberInput as N}from"./form-unit-number-input.js";const R={DateInput:t,DateRangeInput:m,ESignature:o,HistogramSlider:e,Input:i,InputGroup:f,MaskedInput:s,Label:p,MultiSelect:n,NestedSelect:a,NestedMultiSelect:u,Select:S,SelectHistogram:I,Slider:b,RangeSlider:g,RangeSelect:d,Textarea:k,Timepicker:h,TimeRangePicker:x,CustomField:r,UnitNumberInput:N,PhoneNumberInput:j,PredictiveTextInput:c,OtpVerification:l};export{R as Form};
+import{FormCustomField as r}from"./form-custom-field.js";import{FormDateInput as t}from"./form-date-input.js";import{FormDateRangeInput as m}from"./form-date-range-input.js";import{FormESignature as o}from"./form-e-signature.js";import{FormHistogramSlider as e}from"./form-histogram.js";import{FormInput as i}from"./form-input.js";import{FormInputGroup as f}from"./form-input-group.js";import{FormLabel as p}from"./form-label.js";import{FormMaskedInput as s}from"./form-masked-input.js";import{FormMultiSelect as n}from"./form-multi-select.js";import{FormNestedMultiSelect as u}from"./form-nested-multi-select.js";import{FormNestedSelect as a}from"./form-nested-select.js";import{FormOtpVerification as l}from"./form-otp-verification.js";import{FormPhoneNumberInput as j}from"./form-phone-number-input.js";import{FormPredictiveTextInput as c}from"./form-predictive-text-input.js";import{FormRangeSelect as d}from"./form-range-select.js";import{FormRangeSlider as g}from"./form-range-slider.js";import{FormSelect as S}from"./form-select.js";import{FormSelectHistogram as I}from"./form-select-histogram.js";import{FormSlider as b}from"./form-slider.js";import{FormTextarea as k}from"./form-textarea.js";import{FormTimeRangePicker as x}from"./form-time-range-picker.js";import{FormTimepicker as h}from"./form-timepicker.js";import{FormUnitNumberInput as N}from"./form-unit-number-input.js";const R={CustomField:r,DateInput:t,DateRangeInput:m,ESignature:o,HistogramSlider:e,Input:i,InputGroup:f,Label:p,MaskedInput:s,MultiSelect:n,NestedMultiSelect:u,NestedSelect:a,OtpVerification:l,PhoneNumberInput:j,PredictiveTextInput:c,RangeSelect:d,RangeSlider:g,Select:S,SelectHistogram:I,Slider:b,Textarea:k,Timepicker:h,TimeRangePicker:x,UnitNumberInput:N};export{R as Form};
 //# sourceMappingURL=index.js.map

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\";\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\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":"22CA4DO,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

@@ -20,79 +20,228 @@ 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";
+/**
+ * Display mechanism for the form label addon.
+ *
+ * - `"popover"` renders an icon that triggers a popover.
+ * - `"tooltip"` is currently unsupported.
+ */
 export type FormLabelAddonType = "tooltip" | "popover";
-export interface FormLabelAddonTriggerProps {
-    addonType?: FormLabelAddonType | undefined;
-    icon?: JSX.Element | undefined;
-    "data-testid"?: string | undefined;
-}
+/**
+ * Configuration for an informational icon rendered inline with a form label.
+ */
 export interface FormLabelAddonProps {
+    /** Text or element displayed inside the popover overlay. */
     content: string | JSX.Element;
+    /**
+     * Display mechanism for the addon.
+     * Omit to render no addon icon.
+     */
     type?: FormLabelAddonType | undefined;
+    /**
+     * Custom icon element.
+     *
+     * @default <ICircleFillIcon />
+     */
     icon?: JSX.Element | undefined;
     id?: string | undefined;
+    /** Stacking order of the popover overlay. */
     zIndex?: number | undefined;
     "data-testid"?: string | undefined;
 }
+/**
+ * Props for a form field label or `Form.Label` component.
+ */
 export interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /** Informational icon and popover rendered inline with the label text. */
     addon?: FormLabelAddonProps | undefined;
+    /** Supporting description rendered below the label. */
     subtitle?: string | JSX.Element | undefined;
     "data-testid"?: string | undefined;
 }
+/**
+ * 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;
 }
+/**
+ * Props for `Form.Input`, combining text input props with the shared form
+ * field layout.
+ */
 export interface FormInputProps extends InputPartialProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.InputGroup`, combining input group props with the shared
+ * form field layout.
+ *
+ * `T` is the option item type. `V` is the selected value type.
+ */
 export interface FormInputGroupProps<T, V> extends InputGroupPartialProps<T, V>, BaseFormElementProps {
 }
+/**
+ * Props for `Form.MaskedInput`, combining masked input props with the shared
+ * form field layout.
+ */
 export interface FormMaskedInputProps extends MaskedInputPartialProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.Textarea`, combining textarea props with the shared form
+ * field layout.
+ */
 export interface FormTextareaProps extends TextareaPartialProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.CustomField`, which wraps any custom input element with a
+ * shared label, subtitle, and inline error message layout.
+ */
 export interface FormCustomFieldProps extends FormWrapperProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.Select`, combining single-select input props with the shared
+ * form field layout.
+ *
+ * `T` is the option item type. `V` is the selected value type.
+ */
 export interface FormInputSelectProps<T, V> extends InputSelectPartialProps<T, V>, BaseFormElementProps {
 }
+/**
+ * Props for `Form.RangeSelect`, combining range-select input props with the
+ * shared form field layout.
+ *
+ * `T` is the option item type. `V` is the selected value type.
+ */
 export interface FormInputRangeSelectProps<T, V> extends InputRangeSelectPartialProps<T, V>, BaseFormElementProps {
 }
+/**
+ * Props for `Form.MultiSelect`, combining multi-select input props with the
+ * shared form field layout.
+ *
+ * `T` is the option item type. `V` is the selected value type.
+ */
 export interface FormMultiSelectProps<T, V> extends InputMultiSelectPartialProps<T, V>, BaseFormElementProps {
 }
+/**
+ * Props for `Form.NestedSelect`, combining nested single-select input props
+ * with the shared form field layout.
+ *
+ * `V1`, `V2`, and `V3` are the value types for the first, second, and third
+ * nesting levels respectively.
+ */
 export interface FormNestedSelectProps<V1, V2, V3> extends InputNestedSelectPartialProps<V1, V2, V3>, BaseFormElementProps {
 }
+/**
+ * Props for `Form.NestedMultiSelect`, combining nested multi-select input
+ * props with the shared form field layout.
+ *
+ * `V1`, `V2`, and `V3` are the value types for the first, second, and third
+ * nesting levels respectively.
+ */
 export interface FormNestedMultiSelectProps<V1, V2, V3> extends InputNestedMultiSelectPartialProps<V1, V2, V3>, BaseFormElementProps {
 }
+/**
+ * Props for `Form.DateInput`, combining date input props with the shared form
+ * field layout.
+ */
 export interface FormDateInputProps extends DateInputProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.DateRangeInput`, combining date-range input props with the
+ * shared form field layout.
+ */
 export interface FormDateRangeInputProps extends DateRangeInputProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.Timepicker`, combining time picker props with the shared
+ * form field layout.
+ */
 export interface FormTimepickerProps extends TimepickerProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.UnitNumberInput`, combining unit-number input props with the
+ * shared form field layout.
+ */
 export interface FormUnitNumberInputProps extends UnitNumberInputProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.PhoneNumberInput`, combining phone-number input props with
+ * the shared form field layout.
+ */
 export interface FormPhoneNumberInputProps extends PhoneNumberInputProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.TimeRangePicker`, combining time-range picker props with the
+ * shared form field layout.
+ */
 export interface FormTimeRangePickerProps extends TimeRangePickerProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.PredictiveTextInput`, combining predictive text input props
+ * with the shared form field layout.
+ *
+ * `T` is the suggestion item type. `V` is the selected value type.
+ */
 export interface FormPredictiveTextInputProps<T, V> extends PredictiveTextInputProps<T, V>, BaseFormElementProps {
 }
+/**
+ * Props for `Form.Slider`, combining single-value slider props with the shared
+ * form field layout.
+ */
 export interface FormSliderProps extends InputSliderProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.RangeSlider`, combining range slider props with the shared
+ * form field layout.
+ */
 export interface FormRangeSliderProps extends InputRangeSliderProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.HistogramSlider`, combining histogram slider props with the
+ * shared form field layout.
+ */
 export interface FormHistogramSliderProps extends HistogramSliderProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.ESignature`, combining e-signature props with the shared
+ * form field layout.
+ */
 export interface FormESignatureProps extends EsignatureProps, BaseFormElementProps {
 }
+/**
+ * Props for `Form.SelectHistogram`, combining select-histogram props with the
+ * shared form field layout.
+ */
 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