@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/color-picker/Swatch.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Swatch = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var helpers_1 = require("../helpers");
+var base_button_1 = require("../base-button");
+var tick_1 = (0, tslib_1.__importDefault)(require("../icon/components/tick"));
+var getContrastRatio_1 = require("./getContrastRatio");
+var theme_1 = require("../theme");
+var react_1 = require("react");
+var overrides_1 = require("../overrides");
+exports.Swatch = (0, react_1.memo)(function (_a) {
+    var color = _a.color, isSelected = _a.isSelected, onChange = _a.onChange, className = _a.className, overrides = _a.overrides, props = (0, tslib_1.__rest)(_a, ["color", "isSelected", "onChange", "className", "overrides"]);
+    var theme = (0, theme_1.useTheme)().theme;
+    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.TickIcon, tick_1.default), 2), TickIcon = _b[0], tickIconProps = _b[1];
+    var contrastRatioWithTickIcon = (0, react_1.useMemo)(function () { return (isSelected ? (0, getContrastRatio_1.getContrastRatio)(color, (0, helpers_1.themeTokenToHex)(theme.spr.icon05)) : 0); }, [theme, isSelected, color]);
+    var contrastRatioWithBgColor = (0, react_1.useMemo)(function () { return (0, getContrastRatio_1.getContrastRatio)(color, (0, helpers_1.themeTokenToHex)(theme.spr.popup)); }, [theme, color]);
+    var handleChange = (0, react_1.useCallback)(function () { return onChange(color); }, [color, onChange]);
+    return ((0, jsx_runtime_1.jsx)(base_button_1.BaseButton, (0, tslib_1.__assign)({ onClick: handleChange, className: [
+            'cursor-pointer h-5 w-5 rounded-full flex justify-center items-center',
+            contrastRatioWithBgColor < 1.1 ? 'border-1 border-solid spr-border-03' : '',
+            {
+                backgroundColor: color,
+                transition: '0.15s ease-in-out',
+                ':hover': {
+                    transform: 'scale(1.2)',
+                },
+                ':focus': {
+                    transform: 'scale(1.2)',
+                },
+                ':focus-visible': {
+                    transform: 'scale(1.2)',
+                    outlineWidth: '1px',
+                    outlineOffset: '1px',
+                },
+            },
+            className,
+        ], tabIndex: 0 }, props, { children: isSelected ? ((0, jsx_runtime_1.jsx)(TickIcon, (0, tslib_1.__assign)({ className: contrastRatioWithTickIcon < 4.5 ? 'spr-icon-01' : 'spr-icon-05', size: 10 }, tickIconProps), void 0)) : null }), void 0));
+});

package/color-picker/colors.d.ts

@@ -0,0 +1 @@
+export declare const COLOR_PALETTE: string[][];

package/color-picker/colors.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLOR_PALETTE = void 0;
+var SLATE_COLORS = [
+    '#FFFFFE',
+    '#F3F3F3',
+    '#EFEFEF',
+    '#DADAD9',
+    '#CCCCCC',
+    '#B7B7B7',
+    '#999999',
+    '#676666',
+    '#444343',
+    '#000000',
+];
+var RED_COLORS = [
+    '#fef2f2',
+    '#fee2e2',
+    '#fecaca',
+    '#fca5a5',
+    '#f87171',
+    '#dc2626',
+    '#b91c1c',
+    '#991b1b',
+    '#7f1d1d',
+    '#450a0a',
+];
+var AMBER_COLORS = [
+    '#fffbeb',
+    '#fef3c7',
+    '#fde68a',
+    '#fcd34d',
+    '#fbbf24',
+    '#d97706',
+    '#b45309',
+    '#92400e',
+    '#78350f',
+    '#451a03',
+];
+var GREEN_COLORS = [
+    '#f0fdf4',
+    '#dcfce7',
+    '#bbf7d0',
+    '#86efac',
+    '#4ade80',
+    '#16a34a',
+    '#15803d',
+    '#166534',
+    '#14532d',
+    '#052e16',
+];
+var BLUE_COLORS = [
+    '#eff6ff',
+    '#dbeafe',
+    '#bfdbfe',
+    '#93c5fd',
+    '#60a5fa',
+    '#2563eb',
+    '#1d4ed8',
+    '#1e40af',
+    '#1e3a8a',
+    '#172554',
+];
+var VIOLET_COLORS = [
+    '#f5f3ff',
+    '#ede9fe',
+    '#ddd6fe',
+    '#c4b5fd',
+    '#a78bfa',
+    '#7c3aed',
+    '#6d28d9',
+    '#5b21b6',
+    '#4c1d95',
+    '#2e1065',
+];
+var FUCHSIA_COLORS = [
+    '#fdf4ff',
+    '#fae8ff',
+    '#f5d0fe',
+    '#f0abfc',
+    '#e879f9',
+    '#c026d3',
+    '#a21caf',
+    '#86198f',
+    '#701a75',
+    '#4a044e',
+];
+var ROSE_COLORS = [
+    '#fff1f2',
+    '#ffe4e6',
+    '#fecdd3',
+    '#fda4af',
+    '#fb7185',
+    '#e11d48',
+    '#be123c',
+    '#9f1239',
+    '#881337',
+    '#4c0519',
+];
+exports.COLOR_PALETTE = [
+    SLATE_COLORS,
+    RED_COLORS,
+    AMBER_COLORS,
+    GREEN_COLORS,
+    BLUE_COLORS,
+    VIOLET_COLORS,
+    FUCHSIA_COLORS,
+    ROSE_COLORS,
+];

package/color-picker/getContrastRatio.d.ts

@@ -0,0 +1 @@
+export declare const getContrastRatio: (color1: string, color2: string) => number;

package/color-picker/getContrastRatio.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContrastRatio = void 0;
+var tslib_1 = require("tslib");
+// https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
+var hexToRgb = function (hex) {
+    var r = parseInt(hex.substring(1, 3), 16);
+    var g = parseInt(hex.substring(3, 5), 16);
+    var b = parseInt(hex.substring(5, 7), 16);
+    return [r, g, b];
+};
+var getRelativeLuminance = function (rgb) {
+    var _a = (0, tslib_1.__read)(rgb.map(function (c) { return c / 255; }), 3), r = _a[0], g = _a[1], b = _a[2];
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+var getContrastRatio = function (color1, color2) {
+    var rgb1 = hexToRgb(color1);
+    var rgb2 = hexToRgb(color2);
+    var l1 = getRelativeLuminance(rgb1);
+    var l2 = getRelativeLuminance(rgb2);
+    return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+};
+exports.getContrastRatio = getContrastRatio;

package/color-picker/index.d.ts

@@ -0,0 +1,3 @@
+export { ColorPicker } from './ColorPicker';
+export type { ColorPickerProps, ColorPickerOverrides } from './types';
+export { COLOR_PALETTE } from './colors';

package/color-picker/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLOR_PALETTE = exports.ColorPicker = void 0;
+var ColorPicker_1 = require("./ColorPicker");
+Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return ColorPicker_1.ColorPicker; } });
+var colors_1 = require("./colors");
+Object.defineProperty(exports, "COLOR_PALETTE", { enumerable: true, get: function () { return colors_1.COLOR_PALETTE; } });

package/color-picker/locale.d.ts

@@ -0,0 +1,3 @@
+export declare type ColorPickerLocale = {
+    resetButtonLabel: string;
+};

package/color-picker/locale.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/color-picker/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/color-picker/index.js"
+}

package/color-picker/styled-component.d.ts

@@ -0,0 +1 @@
+export declare const StyledRoot: import("../style/styled").StyledComponent;

package/color-picker/styled-component.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledRoot = void 0;
+var style_1 = require("../style");
+exports.StyledRoot = (0, style_1.styled)('div', 'flex flex-col gap-3');

package/color-picker/types.d.ts

@@ -0,0 +1,15 @@
+import { Override } from '../overrides';
+export declare type ColorPickerOverrides = {
+    Root?: Override<Record<string, any>>;
+    Heading?: Override<Record<string, any>>;
+    Swatches?: Override<Record<string, any>>;
+    Swatch?: Override<Record<string, any>>;
+    TickIcon?: Override<Record<string, any>>;
+};
+export declare type ColorPickerProps = {
+    overrides?: ColorPickerOverrides;
+    value?: string;
+    onChange: (value?: string) => void;
+    heading?: string;
+    resetButtonLabel?: string;
+};

package/color-picker/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/currency/Currency.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CurrencyProps } from './types';
+export declare const Currency: ({ value, variant, currency, currencyOptions, }: CurrencyProps) => JSX.Element;

package/currency/Currency.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Currency = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+//hooks
+var useCurrency_1 = require("./useCurrency");
+//constants
+var constants_1 = require("./constants");
+var Currency = function (_a) {
+    var value = _a.value, _b = _a.variant, variant = _b === void 0 ? constants_1.DEFAULT_VARIANT : _b, _c = _a.currency, currency = _c === void 0 ? constants_1.DEFAULT_CURRENCY : _c, currencyOptions = _a.currencyOptions;
+    var formattedCurrency = (0, useCurrency_1.useCurrency)({ value: value, variant: variant, currency: currency, currencyOptions: currencyOptions });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedCurrency }, void 0);
+};
+exports.Currency = Currency;

package/currency/constants.d.ts

@@ -0,0 +1,3 @@
+import { CompactAutoFormat } from '../utils/intlNumberFormatUtils/types';
+export declare const DEFAULT_VARIANT: CompactAutoFormat;
+export declare const DEFAULT_CURRENCY = "USD";

package/currency/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_CURRENCY = exports.DEFAULT_VARIANT = void 0;
+var types_1 = require("../utils/intlNumberFormatUtils/types");
+exports.DEFAULT_VARIANT = {
+    type: types_1.NUMBER_VARIANTS.COMPACT_AUTO_FORMAT,
+};
+exports.DEFAULT_CURRENCY = 'USD';

package/currency/index.d.ts

@@ -0,0 +1,5 @@
+export { Currency } from './Currency';
+export { useCurrency } from './useCurrency';
+export { getFormattedCurrency } from './utils';
+export * from './types';
+export * from '../utils/intlNumberFormatUtils/types';

package/currency/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFormattedCurrency = exports.useCurrency = exports.Currency = void 0;
+var tslib_1 = require("tslib");
+var Currency_1 = require("./Currency");
+Object.defineProperty(exports, "Currency", { enumerable: true, get: function () { return Currency_1.Currency; } });
+var useCurrency_1 = require("./useCurrency");
+Object.defineProperty(exports, "useCurrency", { enumerable: true, get: function () { return useCurrency_1.useCurrency; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getFormattedCurrency", { enumerable: true, get: function () { return utils_1.getFormattedCurrency; } });
+(0, tslib_1.__exportStar)(require("./types"), exports);
+(0, tslib_1.__exportStar)(require("../utils/intlNumberFormatUtils/types"), exports);

package/currency/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/currency/index.js"
+}

package/currency/types.d.ts

@@ -0,0 +1,7 @@
+import { NumberVariant } from '../utils/intlNumberFormatUtils/types';
+export declare type CurrencyProps = {
+    value: number;
+    variant?: NumberVariant;
+    currency?: string;
+    currencyOptions?: Intl.NumberFormatOptions;
+};

package/currency/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/currency/useCurrency.d.ts

@@ -0,0 +1,2 @@
+import { CurrencyProps } from './types';
+export declare const useCurrency: ({ value, currency, variant, currencyOptions, }: CurrencyProps) => string;

package/currency/useCurrency.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCurrency = void 0;
+var locale_1 = require("../locale");
+var utils_1 = require("./utils");
+var constants_1 = require("./constants");
+var useCurrency = function (_a) {
+    var value = _a.value, _b = _a.currency, currency = _b === void 0 ? constants_1.DEFAULT_CURRENCY : _b, _c = _a.variant, variant = _c === void 0 ? constants_1.DEFAULT_VARIANT : _c, currencyOptions = _a.currencyOptions;
+    var langCode = (0, locale_1.useLocale)().langCode;
+    return (0, utils_1.getFormattedCurrency)({ value: value, locale: langCode, variant: variant, currencyOptions: currencyOptions, currency: currency });
+};
+exports.useCurrency = useCurrency;

package/currency/utils.d.ts

@@ -0,0 +1,8 @@
+import { NumberVariant } from '../utils/intlNumberFormatUtils/types';
+export declare const getFormattedCurrency: ({ value, locale, variant, currencyOptions, currency, }: {
+    value: number;
+    locale: string;
+    variant: NumberVariant;
+    currency: string;
+    currencyOptions?: Intl.NumberFormatOptions | undefined;
+}) => string;

package/currency/utils.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFormattedCurrency = void 0;
+var tslib_1 = require("tslib");
+var intlNumberFormatUtils_1 = require("../utils/intlNumberFormatUtils");
+var getFormattedCurrency = function (_a) {
+    var value = _a.value, locale = _a.locale, variant = _a.variant, currencyOptions = _a.currencyOptions, currency = _a.currency;
+    var intlNumberFormatterOptions = (0, tslib_1.__assign)({ style: 'currency', currency: currency }, currencyOptions);
+    return (0, intlNumberFormatUtils_1.getFormattedNumber)({ value: value, locale: locale, variant: variant, numberOptions: intlNumberFormatterOptions });
+};
+exports.getFormattedCurrency = getFormattedCurrency;

package/date-input/Before.d.ts

@@ -2,16 +2,18 @@ import { ReactElement } from 'react';
 import { SharedProps } from 'baseui/input';
 import { WeekStartsOn } from '../date-picker';
 import { Override } from '../overrides';
-export declare const Before: ({ weekStartsOn, adapter, locale, overrides, onChange: _onChange, minDate, maxDate, value, timeSelect, ...props }: SharedProps & {
+export declare const Before: ({ weekStartsOn, adapter, locale, overrides, onChange: _onChange, minDate, maxDate, value, timeSelect, showTimezone, timezone, ...props }: SharedProps & {
     adapter?: any;
     locale?: any;
     overrides?: {
         DatePicker?: Override<Record<string, any>> | undefined;
     } | undefined;
-    onChange: (value?: Date | undefined) => void;
+    onChange: (value?: Date | undefined, timezone?: string | undefined) => void;
     weekStartsOn?: WeekStartsOn | undefined;
     minDate?: Date | undefined;
     maxDate?: Date | undefined;
     value?: Date | undefined;
     timeSelect?: boolean | undefined;
+    showTimezone?: boolean | undefined;
+    timezone?: string | undefined;
 }) => ReactElement;

package/date-input/Before.js

@@ -8,11 +8,11 @@ var date_picker_1 = require("../date-picker");
 var CalendarIconButton_1 = require("./CalendarIconButton");
 var overrides_1 = require("../overrides");
 var Before = function (_a) {
-    var weekStartsOn = _a.weekStartsOn, adapter = _a.adapter, locale = _a.locale, overrides = _a.overrides, _onChange = _a.onChange, minDate = _a.minDate, maxDate = _a.maxDate, value = _a.value, timeSelect = _a.timeSelect, props = (0, tslib_1.__rest)(_a, ["weekStartsOn", "adapter", "locale", "overrides", "onChange", "minDate", "maxDate", "value", "timeSelect"]);
+    var weekStartsOn = _a.weekStartsOn, adapter = _a.adapter, locale = _a.locale, overrides = _a.overrides, _onChange = _a.onChange, minDate = _a.minDate, maxDate = _a.maxDate, value = _a.value, timeSelect = _a.timeSelect, _b = _a.showTimezone, showTimezone = _b === void 0 ? false : _b, timezone = _a.timezone, props = (0, tslib_1.__rest)(_a, ["weekStartsOn", "adapter", "locale", "overrides", "onChange", "minDate", "maxDate", "value", "timeSelect", "showTimezone", "timezone"]);
     var onChange = (0, react_1.useCallback)(function (data) {
-        _onChange(data.value);
+        _onChange(data.value, data.timezone);
     }, [_onChange]);
-    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.DatePicker, date_picker_1.DatePicker), 2), DatePicker = _b[0], datePickerProps = _b[1];
+    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.DatePicker, date_picker_1.DatePicker), 2), DatePicker = _c[0], datePickerProps = _c[1];
     var mergedOverrides = (0, react_1.useMemo)(function () {
         var _a;
         return (0, overrides_1.mergeOverrides)({
@@ -22,6 +22,6 @@ var Before = function (_a) {
             },
         }, (_a = datePickerProps) === null || _a === void 0 ? void 0 : _a.overrides);
     }, [datePickerProps, props]);
-    return ((0, jsx_runtime_1.jsx)(DatePicker, (0, tslib_1.__assign)({ weekStartsOn: weekStartsOn, adapter: adapter, locale: locale, onChange: onChange, disabled: props.$disabled, timeSelect: timeSelect, minDate: minDate, maxDate: maxDate, value: value }, datePickerProps, { overrides: mergedOverrides }), void 0));
+    return ((0, jsx_runtime_1.jsx)(DatePicker, (0, tslib_1.__assign)({ weekStartsOn: weekStartsOn, adapter: adapter, locale: locale, onChange: onChange, disabled: props.$disabled, timeSelect: timeSelect, minDate: minDate, maxDate: maxDate, value: value, showTimezone: showTimezone, timezone: timezone }, datePickerProps, { overrides: mergedOverrides }), void 0));
 };
 exports.Before = Before;

package/date-input/CalendarIconButton.js

@@ -6,5 +6,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var calendar_solid_1 = (0, tslib_1.__importDefault)(require("../icon/components/calendar-solid"));
 var button_1 = require("../button");
 var box_1 = require("../box");
-var CalendarIconButton = function (props) { return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: "flex items-center h-full pl-1" }, { children: (0, jsx_runtime_1.jsx)(button_1.IconButton, (0, tslib_1.__assign)({ size: "xs", className: "flex items-center", disabled: props.$disabled, type: "button" }, { children: (0, jsx_runtime_1.jsx)(calendar_solid_1.default, {}, void 0) }), void 0) }), void 0)); };
+var locale_1 = require("../locale");
+var style_1 = require("../style");
+var CalendarIconButton = function (props) {
+    var locale = (0, locale_1.useLocale)();
+    var theme = (0, style_1.useStyle)().theme;
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: "flex items-center h-full pl-1" }, { children: (0, jsx_runtime_1.jsx)(button_1.IconButton, (0, tslib_1.__assign)({ size: theme.density === 'COMPACT' ? 'xxxs' : 'xxs', className: "flex items-center", disabled: props.$disabled, type: "button", "aria-label": locale.calendar.calendarButtonAriaLabel }, { children: (0, jsx_runtime_1.jsx)(calendar_solid_1.default, {}, void 0) }), void 0) }), void 0));
+};
 exports.CalendarIconButton = CalendarIconButton;

package/date-input/DateInput.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { DateInputProps } from './types';
-export declare const DateInput: ({ adapter, formatString, mask, onChange, value, locale, weekStartsOn, maskChar, overrides, minDate, maxDate, timeSelect, ...restProps }: DateInputProps) => ReactElement;
+export declare const DateInput: ({ adapter, formatString, mask, onChange, value, locale, weekStartsOn, maskChar, overrides, minDate, maxDate, timeSelect, showTimezone, timezone, ...restProps }: DateInputProps) => ReactElement;

package/date-input/DateInput.js

@@ -13,24 +13,18 @@ var overrides_1 = require("../overrides");
 var constants_1 = require("../date-picker/constants");
 var utils_1 = require("../date-picker/utils");
 var styled_components_1 = require("./styled-components");
+var utils_2 = require("../time-range-picker/utils");
+var context_1 = require("../form-control/context");
 var DateInput = function (_a) {
-    var _b = _a.adapter, adapter = _b === void 0 ? date_fns_adapter_1.default : _b, _c = _a.formatString, formatString = _c === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _c, mask = _a.mask, onChange = _a.onChange, value = _a.value, locale = _a.locale, weekStartsOn = _a.weekStartsOn, _d = _a.maskChar, maskChar = _d === void 0 ? '_' : _d, overrides = _a.overrides, minDate = _a.minDate, maxDate = _a.maxDate, timeSelect = _a.timeSelect, restProps = (0, tslib_1.__rest)(_a, ["adapter", "formatString", "mask", "onChange", "value", "locale", "weekStartsOn", "maskChar", "overrides", "minDate", "maxDate", "timeSelect"]);
+    var _b = _a.adapter, adapter = _b === void 0 ? date_fns_adapter_1.default : _b, _c = _a.formatString, formatString = _c === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _c, mask = _a.mask, onChange = _a.onChange, value = _a.value, locale = _a.locale, weekStartsOn = _a.weekStartsOn, _d = _a.maskChar, maskChar = _d === void 0 ? '_' : _d, overrides = _a.overrides, minDate = _a.minDate, maxDate = _a.maxDate, timeSelect = _a.timeSelect, _e = _a.showTimezone, showTimezone = _e === void 0 ? false : _e, _f = _a.timezone, timezone = _f === void 0 ? (0, utils_2.getSystemTzName)() : _f, restProps = (0, tslib_1.__rest)(_a, ["adapter", "formatString", "mask", "onChange", "value", "locale", "weekStartsOn", "maskChar", "overrides", "minDate", "maxDate", "timeSelect", "showTimezone", "timezone"]);
+    var intent = (0, context_1.useContextualFormProps)(restProps).intent;
     var dateFnsLocale = (0, react_1.useMemo)(function () { return (0, utils_1.prepareLocale)(locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, locale]);
     var dateHelpers = (0, react_1.useMemo)(function () { return new date_helpers_1.default(adapter); }, [adapter]);
-    var _e = (0, tslib_1.__read)((0, react_1.useState)(function () { return (0, utils_1.formatDate)({ date: value, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString }); }), 2), date = _e[0], setDate = _e[1];
-    var _f = (0, tslib_1.__read)((0, react_1.useState)(false), 2), error = _f[0], setError = _f[1];
-    (0, react_1.useEffect)(function () {
-        if ((0, utils_1.isDayInRange)(value, {
-            minDate: minDate,
-            maxDate: maxDate,
-            dateHelpers: dateHelpers,
-        })) {
-            setError(false);
-        }
-        else {
-            setError(true);
-        }
-    }, [dateHelpers, maxDate, minDate, value]);
+    var timezoneAdaptedValue = (0, react_1.useMemo)(function () { return (value ? new Date((0, utils_2.convertDateFromSystemTzToTargetTz)(value, timezone)) : undefined); }, [value, timezone]);
+    var _g = (0, tslib_1.__read)((0, react_1.useState)(function () {
+        return (0, utils_1.formatDate)({ date: timezoneAdaptedValue, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString });
+    }), 2), date = _g[0], setDate = _g[1];
+    var _h = (0, tslib_1.__read)((0, react_1.useState)(function () { return !(0, utils_1.isDayInRange)(timezoneAdaptedValue, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers }); }), 2), error = _h[0], setError = _h[1];
     var getMask = (0, react_1.useCallback)(function () {
         if (!mask && formatString !== constants_1.DEFAULT_FORMAT_STRING) {
             return null;
@@ -47,7 +41,10 @@ var DateInput = function (_a) {
         var _mask = getMask();
         var _date = dateHelpers.date(dateString);
         // to check the clearable cases
-        if ((typeof _mask === 'string' && inputValue === _mask.replace(/[9|a|*]/g, ' ')) || inputValue.length === 0) {
+        if ((typeof _mask === 'string' &&
+            inputValue.replace(new RegExp(maskChar, 'g'), ' ') === _mask.replace(/[9|a|*]/g, ' ')) ||
+            inputValue.length === 0) {
+            setError(false);
             onChange(null);
             return;
         }
@@ -58,19 +55,28 @@ var DateInput = function (_a) {
             _date = dateHelpers.parseString(dateString, formatString, dateFnsLocale);
         }
         var isValidDate = _date && dateHelpers.isValid(_date);
-        if (isValidDate) {
-            setError(false);
+        if (isValidDate && _date) {
+            setError(!(0, utils_1.isDayInRange)(_date, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers }));
             setDate((0, utils_1.formatDate)({ date: _date, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString }));
-            onChange === null || onChange === void 0 ? void 0 : onChange(_date);
+            onChange === null || onChange === void 0 ? void 0 : onChange(new Date((0, utils_2.convertDateFromTargetTzToSystemTz)(_date, timezone)), timezone);
         }
         else {
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
             setError(true);
         }
-    }, [onChange, dateFnsLocale, dateHelpers, formatString, getMask]);
-    var onCalendarDateChange = (0, react_1.useCallback)(function (_date) {
-        setDate((0, utils_1.formatDate)({ date: _date, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString }));
-        onChange(_date);
-    }, [onChange, dateFnsLocale, dateHelpers, formatString]);
+    }, [onChange, dateFnsLocale, dateHelpers, formatString, getMask, timezone, maskChar, maxDate, minDate]);
+    var onCalendarDateChange = (0, react_1.useCallback)(function (_date, _timezone) {
+        // _date is timezone adapted date, original date is what user actually selected from calendar
+        var originalDate = new Date((0, utils_2.convertDateFromSystemTzToTargetTz)(_date, _timezone));
+        setDate((0, utils_1.formatDate)({
+            date: originalDate,
+            locale: dateFnsLocale,
+            dateHelpers: dateHelpers,
+            formatString: formatString,
+        }));
+        setError(!(0, utils_1.isDayInRange)(originalDate, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers }));
+        onChange(_date, _timezone);
+    }, [onChange, dateFnsLocale, dateHelpers, formatString, minDate, maxDate]);
     var mergedOverrides = (0, react_1.useMemo)(function () {
         return (0, overrides_1.mergeOverrides)({
             Before: {
@@ -80,17 +86,32 @@ var DateInput = function (_a) {
                     locale: locale,
                     onChange: onCalendarDateChange,
                     weekStartsOn: weekStartsOn,
+                    // passing value as it is as date picker will adapt this with timezone
                     value: value,
                     minDate: minDate,
                     maxDate: maxDate,
                     timeSelect: timeSelect,
+                    showTimezone: showTimezone,
+                    timezone: timezone,
                 },
             },
             Input: {
                 style: styled_components_1.inputStyles,
             },
         }, overrides);
-    }, [adapter, onCalendarDateChange, locale, overrides, value, weekStartsOn, minDate, maxDate, timeSelect]);
-    return ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ mask: getMask(), value: date, maskChar: maskChar, onChange: handleInputChange, disabled: restProps.disabled }, { children: function (props) { return (0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, props, restProps, { intent: error ? 'error' : 'default', overrides: mergedOverrides }), void 0); } }), void 0));
+    }, [
+        adapter,
+        onCalendarDateChange,
+        locale,
+        overrides,
+        value,
+        weekStartsOn,
+        minDate,
+        maxDate,
+        timeSelect,
+        showTimezone,
+        timezone,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, (0, tslib_1.__assign)({ mask: getMask(), value: date, maskChar: maskChar, onChange: handleInputChange, disabled: restProps.disabled, onBlur: restProps.onBlur }, { children: function (props) { return (0, jsx_runtime_1.jsx)(input_1.Input, (0, tslib_1.__assign)({}, restProps, props, { intent: error ? 'error' : intent, overrides: mergedOverrides }), void 0); } }), void 0));
 };
 exports.DateInput = DateInput;

package/date-input/styled-components.d.ts

@@ -1,4 +1,4 @@
 import { StyleObject } from '../types';
-export declare const inputStyles: (utils: any, { $size }: {
+export declare const inputStyles: (string | ((utils: any, { $size }: {
     $size: any;
-}) => StyleObject;
+}) => StyleObject))[];

package/date-input/styled-components.js

@@ -6,11 +6,13 @@ var dateInputSizeConfig = {
     md: { paddingLeft: '4px' },
     lg: { paddingLeft: '8px' },
 };
-var inputStyles = function (utils, _a) {
-    var _b;
-    var $size = _a.$size;
-    return ({
-        paddingLeft: ((_b = dateInputSizeConfig[$size]) !== null && _b !== void 0 ? _b : dateInputSizeConfig.lg).paddingLeft,
-    });
-};
-exports.inputStyles = inputStyles;
+exports.inputStyles = [
+    'tabular-nums',
+    function (utils, _a) {
+        var _b;
+        var $size = _a.$size;
+        return ({
+            paddingLeft: ((_b = dateInputSizeConfig[$size]) !== null && _b !== void 0 ? _b : dateInputSizeConfig.lg).paddingLeft,
+        });
+    },
+];

package/date-input/types.d.ts

@@ -1,15 +1,17 @@
 import { WeekStartsOn } from '../date-picker';
 import { InputProps } from '../input';
-export declare type DateInputProps = Omit<InputProps, 'value' | 'onChange' | 'intent' | 'min' | 'max' | 'debouncedOnChange' | 'debounceInterval' | 'type' | 'inputMode'> & {
+export declare type DateInputProps = Omit<InputProps, 'value' | 'onChange' | 'min' | 'max' | 'debouncedOnChange' | 'debounceInterval' | 'type' | 'inputMode'> & {
     formatString?: string;
     adapter?: any;
     mask?: string;
     locale?: any;
     value?: Date;
-    onChange: (value?: Date | null) => void;
+    onChange: (value?: Date | null, timezone?: string) => void;
     weekStartsOn?: WeekStartsOn;
     maskChar?: string;
     minDate?: Date;
     maxDate?: Date;
     timeSelect?: boolean;
+    showTimezone?: boolean;
+    timezone?: string;
 };

package/date-picker/Calendar.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SharedStyleProps } from './types';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<import("baseui/datepicker").CalendarProps, "overrides"> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<import("baseui/datepicker").CalendarProps<Date>, "overrides"> & {
     formatString?: string | undefined;
     overrides?: import("./types").DatepickerOverrides<SharedStyleProps> | undefined;
     adapter?: any;