@coopdigital/react 0.49.0 → 0.50.0

package/dist/components/Pill/Pill.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React from 'react';
+import React__default from 'react';
 import { useSlots } from '../../hooks/useSlots.js';
 import { hasUserBg } from '../../utils/index.js';
 
@@ -19,7 +19,7 @@ const Pill = ({ as, children, className, href, ref, size = "md", ...props }) =>
     };
     // https://github.com/facebook/react/issues/34775
     // eslint-disable-next-line react-hooks/refs
-    return React.createElement(element, { ...componentProps, ref }, slots.PillBadge, slots.Children);
+    return React__default.createElement(element, { ...componentProps, ref }, slots.PillBadge, slots.Children);
 };
 const PillBadge = ({ children, className }) => {
     return (jsx("span", { className: clsx("coop-pill--badge", !hasUserBg(className) && "bg-offer-red", className), children: children }));

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,74 @@
+import type { PopoverAnchorProps as RadixPopoverAnchorProps, PopoverCloseProps as RadixPopoverCloseProps, PopoverContentProps as RadixPopoverContentProps, PopoverProps as RadixPopoverProps, PopoverTriggerProps as RadixPopoverTriggerProps } from "@radix-ui/react-popover";
+import type { JSX, ReactNode, Ref } from "react";
+export interface PopoverProps extends RadixPopoverProps {
+    /** Content inside the Popover.
+     *
+     * This should be a `Popover.Trigger` and `Popover.Content`, with an optional `Popover.Close`. Other children will be ignored. */
+    children: string | ReactNode;
+    /** **(Optional)** Callback to run when the Popover is opened or closed. */
+    onOpenChange?: RadixPopoverProps["onOpenChange"];
+    /** **(Optional)** Force the Popover state. Must be used together with `onOpenChange`. */
+    open?: RadixPopoverProps["open"];
+}
+interface PopoverTriggerProps extends RadixPopoverTriggerProps {
+    /** **(Optional)** When true, the element passed as a child becomes the trigger root element. */
+    asChild?: RadixPopoverTriggerProps["asChild"];
+    /** **(Optional)** Content inside the Popover Trigger. */
+    children?: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+}
+interface PopoverContentProps extends RadixPopoverContentProps {
+    /** **(Optional)** Specify horizontal alignment of the Popover against the trigger. May change when collisions occur. */
+    align?: RadixPopoverContentProps["align"];
+    /** **(Optional)** Specify pixel offset from the "start" or "end" alignment. */
+    alignOffset?: RadixPopoverContentProps["alignOffset"];
+    /** **(Optional)** Specify whether the Popover should reposition itself if it falls out of the viewport. */
+    avoidCollisions?: RadixPopoverContentProps["avoidCollisions"];
+    /** **(Optional)** Content inside the Popover window. */
+    children?: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify pixel boundary for collision safe area. */
+    collisionPadding?: RadixPopoverContentProps["collisionPadding"];
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLDivElement>;
+    /** **(Optional)** Specify placement of the Popover against the trigger. Will change when collisions occur. */
+    side?: RadixPopoverContentProps["side"];
+    /** **(Optional)** Specify pixel offset from the trigger element. */
+    sideOffset?: RadixPopoverContentProps["sideOffset"];
+}
+interface PopoverCloseProps extends RadixPopoverCloseProps {
+    /** **(Optional)** When true, the element passed as a child becomes the close button root element. */
+    asChild?: RadixPopoverCloseProps["asChild"];
+    /** **(Optional)** Content inside the Popover Close element. */
+    children?: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+}
+interface PopoverAnchorProps extends RadixPopoverAnchorProps {
+    /** **(Optional)** When true, the element passed as a child becomes the anchor root element. */
+    asChild?: RadixPopoverAnchorProps["asChild"];
+    /** **(Optional)** Content inside the Popover Anchor element. */
+    children?: React.ReactNode;
+}
+export declare const Popover: {
+    ({ children, ...props }: PopoverProps): JSX.Element;
+    Trigger: {
+        ({ asChild, children, className, ...props }: PopoverTriggerProps): JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ align, alignOffset, asChild, avoidCollisions, children, className, collisionPadding, ref, side, sideOffset, style, ...props }: PopoverContentProps): JSX.Element;
+        displayName: string;
+    };
+    Close: {
+        ({ asChild, children, className, ...props }: PopoverCloseProps): JSX.Element;
+        displayName: string;
+    };
+    Anchor: {
+        ({ asChild, children, ...props }: PopoverAnchorProps): JSX.Element;
+        displayName: string;
+    };
+};
+export default Popover;

package/dist/components/Popover/Popover.js

@@ -0,0 +1,75 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Root as Root2, Portal, Content as Content2, Arrow as Arrow2, Trigger, Close, Anchor as Anchor2 } from '../../node_modules/@radix-ui/react-popover/dist/index.js';
+import clsx from 'clsx';
+import { useSlots } from '../../hooks/useSlots.js';
+import { hasUserBg, bgClassToColor } from '../../utils/index.js';
+
+const componentSlots = {
+    PopoverAnchor: null,
+    PopoverContent: null,
+    PopoverTrigger: null,
+};
+const Popover = ({ children, ...props }) => {
+    var _a;
+    const slots = useSlots(componentSlots, children);
+    return (jsxs(Root2, { ...props, children: [(_a = slots.PopoverAnchor) !== null && _a !== void 0 ? _a : slots.PopoverTrigger, jsx(Portal, { children: slots.PopoverContent })] }));
+};
+const PopoverContent = ({ align = "center", alignOffset = 0, asChild = false, avoidCollisions = true, children, className, collisionPadding = 16, ref, side = "bottom", sideOffset = 4, style, ...props }) => {
+    const componentProps = {
+        align,
+        alignOffset,
+        asChild,
+        avoidCollisions,
+        className: clsx("coop-popover", !hasUserBg(className) && "bg-tint-grey", className),
+        collisionPadding,
+        side,
+        sideOffset,
+        style,
+        ...props,
+    };
+    componentProps.style = {
+        ...style,
+        "--popover-bg": `var(--color-${bgClassToColor(componentProps.className)})`,
+    };
+    return (jsxs(Content2, { ref: ref, ...componentProps, children: [children, jsx(Arrow2, { className: "coop-popover-arrow" })] }));
+};
+PopoverContent.displayName = "Popover.Content";
+const PopoverTrigger = ({ asChild = false, children, className, ...props }) => {
+    const componentProps = {
+        // There is a known issue with aria-controls being set to target
+        // elements that do not exist yet. This does not seem to affect
+        // screen readers or fail e2e avt tests, but may display in
+        // storybook as an "inconclusive" axe error.
+        // https://github.com/radix-ui/primitives/pull/3243
+        // https://github.com/radix-ui/primitives/issues/3242
+        // "aria-controls": undefined,
+        asChild,
+        className: clsx("coop-popover-trigger", className),
+        ...props,
+    };
+    return jsx(Trigger, { ...componentProps, children: children });
+};
+PopoverTrigger.displayName = "Popover.Trigger";
+const PopoverClose = ({ asChild = false, children, className, ...props }) => {
+    const componentProps = {
+        asChild,
+        className: clsx("coop-popover-close", className),
+        ...props,
+    };
+    return (jsx(Close, { "aria-label": "Close", ...componentProps, children: children }));
+};
+PopoverClose.displayName = "Popover.Close";
+const PopoverAnchor = ({ asChild = false, children, ...props }) => {
+    const componentProps = {
+        asChild,
+        ...props,
+    };
+    return jsx(Anchor2, { ...componentProps, children: children });
+};
+PopoverAnchor.displayName = "Popover.Anchor";
+Popover.Trigger = PopoverTrigger;
+Popover.Content = PopoverContent;
+Popover.Close = PopoverClose;
+Popover.Anchor = PopoverAnchor;
+
+export { Popover, Popover as default };

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

@@ -0,0 +1,4 @@
+import Popover from "./Popover";
+export default Popover;
+export { Popover };
+export * from "./Popover";

package/dist/components/Popover/index.js

@@ -0,0 +1,5 @@
+import { Popover } from './Popover.js';
+
+
+
+export { Popover, Popover as default };

package/dist/components/Radio/Radio.d.ts

@@ -16,5 +16,11 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     /** **(Optional)** Specify the Radio size. */
     size?: StandardSizes;
 }
-export declare const Radio: ({ className, disabled, error, id, name, ref, size, ...props }: RadioProps) => JSX.Element;
+export declare const Radio: {
+    ({ className, disabled, error, id, name, ref, size, ...props }: RadioProps): JSX.Element;
+    config: {
+        isField: true;
+        isInline: true;
+    };
+};
 export default Radio;

package/dist/components/Radio/Radio.js

@@ -17,5 +17,9 @@ const Radio = ({ className, disabled, error = false, id, name, ref, size = "md",
     //const formItemProps = { "aria-disabled": disabled ? true : undefined }
     return jsx("input", { ...componentProps, ref: ref });
 };
+Radio.config = {
+    isField: true,
+    isInline: true,
+};
 
 export { Radio, Radio as default };

package/dist/components/Searchbox/Searchbox.js

@@ -2,15 +2,16 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React, { useState, useCallback } from 'react';
+import React__default, { useState, useCallback } from 'react';
 import { useId } from '../../hooks/useId.js';
 import { Button } from '../Button/Button.js';
+import { Field } from '../Field/Field.js';
 import { Label } from '../FieldMarkers/Label.js';
 import { SearchIcon } from '../Icon/SearchIcon.js';
 import { TextInput } from '../TextInput/TextInput.js';
 
 const defaultButtonProps = {
-    label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
+    label: React__default.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
     loadingText: "",
 };
 const Searchbox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, id, label, labelVisible = false, name = "query", onSubmit, placeholder, ref, size = "md", variant = "green", ...props }) => {
@@ -59,7 +60,7 @@ const Searchbox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize
         htmlFor: uid + "--input",
         isVisible: labelVisible,
     };
-    return (jsxs("form", { ...formProps, ref: ref, children: [label && jsx(Label, { ...labelProps, children: label }), jsxs("div", { className: "coop-searchbox--inner", children: [jsx(TextInput, { ...inputProps }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
+    return (jsxs("form", { ...formProps, ref: ref, children: [label && jsx(Label, { ...labelProps, children: label }), jsxs("div", { className: "coop-searchbox--inner", children: [jsx(Field, { children: jsx(TextInput, { ...inputProps }) }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
 };
 
 export { Searchbox, Searchbox as default };

package/dist/components/Select/Select.d.ts

@@ -42,5 +42,8 @@ export declare const Select: {
         ({ children, className, ...props }: SelectOptionProps): JSX.Element;
         displayName: string;
     };
+    config: {
+        isField: true;
+    };
 };
 export default Select;

package/dist/components/Select/Select.js

@@ -18,12 +18,15 @@ const Select = ({ children, className, disabled, error, id, name, ref, size = "m
 const SelectOptionGroup = ({ children, ...props }) => {
     return jsx("optgroup", { ...props, children: children });
 };
+SelectOptionGroup.displayName = "Select.OptionGroup";
 const SelectOption = ({ children, className, ...props }) => {
     return (jsx("option", { className: clsx("coop-select--option", className), ...props, children: children }));
 };
-SelectOptionGroup.displayName = "Select.OptionGroup";
 SelectOption.displayName = "Select.Option";
 Select.OptionGroup = SelectOptionGroup;
 Select.Option = SelectOption;
+Select.config = {
+    isField: true,
+};
 
 export { Select, Select as default };

package/dist/components/Signpost/Signpost.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React from 'react';
+import React__default from 'react';
 import { ChevronRightIcon } from '../Icon/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';
 
@@ -10,7 +10,7 @@ const Signpost = ({ as, children, className, headingLevel = "h3", href, image, r
         className: clsx("coop-signpost", className),
         ...props,
     };
-    return (jsxs("div", { ...componentProps, ref: ref, children: [image && jsx(Image, { crop: "wide", ...image }), React.createElement(element, { href }, jsxs("div", { className: "coop-signpost--content", children: [React.createElement(headingLevel, { className: "coop-signpost--heading" }, children), jsx("span", { "aria-hidden": "true", className: "coop-signpost--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) })] }))] }));
+    return (jsxs("div", { ...componentProps, ref: ref, children: [image && jsx(Image, { crop: "wide", ...image }), React__default.createElement(element, { href }, jsxs("div", { className: "coop-signpost--content", children: [React__default.createElement(headingLevel, { className: "coop-signpost--heading" }, children), jsx("span", { "aria-hidden": "true", className: "coop-signpost--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) })] }))] }));
 };
 
 export { Signpost, Signpost as default };

package/dist/components/Tag/Tag.js

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React__default from 'react';
 import { hasUserBg } from '../../utils/index.js';
 
 const Tag = ({ as, children, className, href, ref, size = "md", ...props }) => {
@@ -10,7 +10,7 @@ const Tag = ({ as, children, className, href, ref, size = "md", ...props }) => {
         href,
         ...props,
     };
-    return React.createElement(element, { ...componentProps, ref }, children);
+    return React__default.createElement(element, { ...componentProps, ref }, children);
 };
 
 export { Tag, Tag as default };

package/dist/components/TextInput/TextInput.d.ts

@@ -24,5 +24,10 @@ export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     /** **(Optional)** Specify the TextInput type. */
     type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url" | "date" | "datetime-local" | "week" | "month" | "time";
 }
-export declare const TextInput: ({ "aria-placeholder": ariaPlaceholder, className, disabled, error, id, name, placeholder, prefix, ref, size, suffix, type, ...props }: TextInputProps) => JSX.Element;
+export declare const TextInput: {
+    ({ "aria-placeholder": ariaPlaceholder, className, disabled, error, id, name, placeholder, prefix, ref, size, suffix, type, ...props }: TextInputProps): JSX.Element;
+    config: {
+        isField: true;
+    };
+};
 export default TextInput;

package/dist/components/TextInput/TextInput.js

@@ -20,5 +20,8 @@ const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, e
     //const formItemProps = { "aria-disabled": disabled ? true : undefined }
     return (jsxs("div", { className: "coop-text-input-wrapper", children: [prefix && jsx("span", { className: "coop-text-input--prefix", children: prefix }), jsx("input", { ...componentProps, ref: ref }), suffix && jsx("span", { className: "coop-text-input--suffix", children: suffix })] }));
 };
+TextInput.config = {
+    isField: true,
+};
 
 export { TextInput, TextInput as default };

package/dist/components/Textarea/Textarea.d.ts

@@ -9,9 +9,7 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     counter?: boolean;
     /** **(Optional)** Specify whether the Textarea should allow more characters than its `maxLength` value.
      *
-     * Defaults to `false`, meaning users can enter more characters than the maximum but will be warned if they go over the limit. When set to `true`, users will be blocked from typing once they hit the character limit. This can be an accessiblity anti-pattern, so only use this option when absolutely necessary.
-     *
-     * Remember it is still your responsibility to handle validation on submission, this is simply a hint for the user.
+     * Defaults to `false`, meaning users can enter more characters than the maximum but will be warned if they go over the limit.
      */
     cutoff?: boolean;
     /** **(Optional)** Specify whether the Textarea should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
@@ -28,10 +26,15 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     placeholder?: string;
     /** **(Optional)** Specify a custom React ref for this component. */
     ref?: Ref<HTMLTextAreaElement>;
-    /** Specify the number of rows (lines of text) in the Textarea. Defaults to `4`. */
+    /** **(Optional)** Specify the number of rows (lines of text) in the Textarea. Defaults to `4`. */
     rows?: number;
     /** **(Optional)** Specify the Textarea size. */
     size?: StandardSizes;
 }
-export declare const Textarea: ({ "aria-placeholder": ariaPlaceholder, className, cols, counter, cutoff, disabled, error, id, maxLength, name, onChange: userOnChange, placeholder, ref, rows, size, ...props }: TextareaProps) => JSX.Element;
+export declare const Textarea: {
+    ({ "aria-placeholder": ariaPlaceholder, className, cols, counter, cutoff, disabled, error, id, maxLength, name, onChange: userOnChange, placeholder, ref, rows, size, ...props }: TextareaProps): JSX.Element;
+    config: {
+        isField: true;
+    };
+};
 export default Textarea;

package/dist/components/Textarea/Textarea.js

@@ -29,13 +29,14 @@ const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, c
     const debouncedRemaining = useDebounce(remaining, DEBOUNCE_DELAY);
     const showCounter = !disabled && counter && maxLength && remaining != null && debouncedRemaining != null;
     const handleChange = (e) => {
+        userOnChange === null || userOnChange === void 0 ? void 0 : userOnChange(e);
         maxLength && e.target && setRemaining(maxLength - e.target.value.length);
     };
     // const formItemProps = { "aria-disabled": disabled ? true : undefined }
-    return (jsxs("div", { className: "coop-textarea-wrapper", children: [jsx("textarea", { ...componentProps, onChange: (e) => {
-                    userOnChange === null || userOnChange === void 0 ? void 0 : userOnChange(e);
-                    handleChange(e);
-                }, ref: ref }), showCounter && (jsxs(Fragment, { children: [jsx("small", { "aria-hidden": "true", className: "coop-textarea-counter", ...(remaining < 0 && { "data-error": true }), children: charCountMessage(remaining) }), jsx("span", { "aria-live": "polite", className: "sr-only", children: charCountMessage(debouncedRemaining) })] }))] }));
+    return (jsxs("div", { className: "coop-textarea-wrapper", children: [jsx("textarea", { ...componentProps, onChange: handleChange, ref: ref }), showCounter && (jsxs(Fragment, { children: [jsx("small", { "aria-hidden": "true", className: "coop-textarea-counter", ...(remaining < 0 && { "data-error": true }), children: charCountMessage(remaining) }), jsx("span", { "aria-live": "polite", className: "sr-only", children: charCountMessage(debouncedRemaining) })] }))] }));
+};
+Textarea.config = {
+    isField: true,
 };
 
 export { Textarea, Textarea as default };

package/dist/hooks/useSlots.js

@@ -1,15 +1,15 @@
-import React from 'react';
+import React__default from 'react';
 
 function isKey(x, k) {
     return k in x;
 }
 function getSlotName(node) {
-    return React.isValidElement(node) && node.type && typeof node.type !== "string"
+    return React__default.isValidElement(node) && node.type && typeof node.type !== "string"
         ? node.type.name
         : false;
 }
 function useSlots(componentSlots, children, options) {
-    return React.Children.toArray(children).reduce((slots, child) => {
+    return React__default.Children.toArray(children).reduce((slots, child) => {
         var _a;
         const slotName = getSlotName(child);
         if (child && slotName && isKey(componentSlots, slotName)) {

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from "./components/Author";
 export * from "./components/Button";
 export * from "./components/Card";
 export * from "./components/Checkbox";
+export * from "./components/DatePicker";
 export * from "./components/Expandable";
 export * from "./components/Field";
 export * from "./components/Fieldset";
@@ -10,6 +11,7 @@ export * from "./components/Flourish";
 export * from "./components/Form";
 export * from "./components/Image";
 export * from "./components/Pill";
+export * from "./components/Popover";
 export * from "./components/Radio";
 export * from "./components/RootSVG";
 export * from "./components/Searchbox";

package/dist/index.js

@@ -3,6 +3,7 @@ export { Author } from './components/Author/Author.js';
 export { Button } from './components/Button/Button.js';
 export { Card } from './components/Card/Card.js';
 export { Checkbox } from './components/Checkbox/Checkbox.js';
+export { DatePicker } from './components/DatePicker/DatePicker.js';
 export { Expandable } from './components/Expandable/Expandable.js';
 export { Field, FieldControl } from './components/Field/Field.js';
 export { Fieldset, FieldsetFields } from './components/Fieldset/Fieldset.js';
@@ -10,6 +11,7 @@ export { Flourish } from './components/Flourish/Flourish.js';
 export { Form } from './components/Form/Form.js';
 export { Image } from './components/Image/Image.js';
 export { Pill } from './components/Pill/Pill.js';
+export { Popover } from './components/Popover/Popover.js';
 export { Radio } from './components/Radio/Radio.js';
 export { RootSVG } from './components/RootSVG/RootSVG.js';
 export { Searchbox } from './components/Searchbox/Searchbox.js';

package/dist/node_modules/@date-fns/tz/date/index.js

@@ -0,0 +1,83 @@
+import { tzName } from '../tzName/index.js';
+import { TZDateMini } from './mini.js';
+
+class TZDate extends TZDateMini {
+  //#region static
+
+  static tz(tz, ...args) {
+    return args.length ? new TZDate(...args, tz) : new TZDate(Date.now(), tz);
+  }
+
+  //#endregion
+
+  //#region representation
+
+  toISOString() {
+    const [sign, hours, minutes] = this.tzComponents();
+    const tz = `${sign}${hours}:${minutes}`;
+    return this.internal.toISOString().slice(0, -1) + tz;
+  }
+  toString() {
+    // "Tue Aug 13 2024 07:50:19 GMT+0800 (Singapore Standard Time)";
+    return `${this.toDateString()} ${this.toTimeString()}`;
+  }
+  toDateString() {
+    // toUTCString returns RFC 7231 ("Mon, 12 Aug 2024 23:36:08 GMT")
+    const [day, date, month, year] = this.internal.toUTCString().split(" ");
+    // "Tue Aug 13 2024"
+    return `${day?.slice(0, -1) /* Remove "," */} ${month} ${date} ${year}`;
+  }
+  toTimeString() {
+    // toUTCString returns RFC 7231 ("Mon, 12 Aug 2024 23:36:08 GMT")
+    const time = this.internal.toUTCString().split(" ")[4];
+    const [sign, hours, minutes] = this.tzComponents();
+    // "07:42:23 GMT+0800 (Singapore Standard Time)"
+    return `${time} GMT${sign}${hours}${minutes} (${tzName(this.timeZone, this)})`;
+  }
+  toLocaleString(locales, options) {
+    return Date.prototype.toLocaleString.call(this, locales, {
+      ...options,
+      timeZone: options?.timeZone || this.timeZone
+    });
+  }
+  toLocaleDateString(locales, options) {
+    return Date.prototype.toLocaleDateString.call(this, locales, {
+      ...options,
+      timeZone: options?.timeZone || this.timeZone
+    });
+  }
+  toLocaleTimeString(locales, options) {
+    return Date.prototype.toLocaleTimeString.call(this, locales, {
+      ...options,
+      timeZone: options?.timeZone || this.timeZone
+    });
+  }
+
+  //#endregion
+
+  //#region private
+
+  tzComponents() {
+    const offset = this.getTimezoneOffset();
+    const sign = offset > 0 ? "-" : "+";
+    const hours = String(Math.floor(Math.abs(offset) / 60)).padStart(2, "0");
+    const minutes = String(Math.abs(offset) % 60).padStart(2, "0");
+    return [sign, hours, minutes];
+  }
+
+  //#endregion
+
+  withTimeZone(timeZone) {
+    return new TZDate(+this, timeZone);
+  }
+
+  //#region date-fns integration
+
+  [Symbol.for("constructDateFrom")](date) {
+    return new TZDate(+new Date(date), this.timeZone);
+  }
+
+  //#endregion
+}
+
+export { TZDate };