mautourco-components 0.2.5 → 0.2.7

package/dist/components/atoms/Tab/Tab.js

@@ -1,54 +1,54 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { Text } from '../Typography/Typography';
-import './Tab.css';
-var Tab = React.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.variant, variant = _e === void 0 ? 'inline' : _e, _f = _a.size, size = _f === void 0 ? 'lg' : _f, activeTextVariant = _a.activeTextVariant, inactiveTextVariant = _a.inactiveTextVariant, textSize = _a.textSize, rest = __rest(_a, ["children", "isActive", "disabled", "className", "variant", "size", "activeTextVariant", "inactiveTextVariant", "textSize"]);
-    var roleProp = rest.role, typeProp = rest.type, buttonRest = __rest(rest, ["role", "type"]);
-    var tabClasses = [
-        'tab',
-        "tab--variant-".concat(variant),
-        "tab--size-".concat(size),
-        isActive ? 'tab--active' : '',
-        disabled ? 'tab--disabled' : '',
-        className,
-    ]
-        .filter(Boolean)
-        .join(' ');
-    var defaultTypographyVariant = variant === 'outline' ? 'bold' : 'regular';
-    var resolvedActiveTextVariant = activeTextVariant !== null && activeTextVariant !== void 0 ? activeTextVariant : defaultTypographyVariant;
-    var resolvedInactiveTextVariant = inactiveTextVariant !== null && inactiveTextVariant !== void 0 ? inactiveTextVariant : defaultTypographyVariant;
-    var resolvedVariant = isActive
-        ? resolvedActiveTextVariant
-        : resolvedInactiveTextVariant;
-    var resolvedTextSize = textSize !== null && textSize !== void 0 ? textSize : (variant === 'outline'
-        ? 'base'
-        : size === 'lg'
-            ? 'lg'
-            : 'base');
-    return (_jsx("button", __assign({}, buttonRest, { ref: ref, type: typeProp !== null && typeProp !== void 0 ? typeProp : 'button', role: roleProp !== null && roleProp !== void 0 ? roleProp : 'tab', "aria-selected": isActive, "aria-disabled": disabled || undefined, disabled: disabled, className: tabClasses }, { children: _jsx(Text, __assign({ as: "span", size: resolvedTextSize, variant: resolvedVariant, className: "tab__label" }, { children: children })) })));
-});
-Tab.displayName = 'Tab';
-export default Tab;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Text } from '../Typography/Typography';
+import './Tab.css';
+var Tab = React.forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.variant, variant = _e === void 0 ? 'inline' : _e, _f = _a.size, size = _f === void 0 ? 'lg' : _f, activeTextVariant = _a.activeTextVariant, inactiveTextVariant = _a.inactiveTextVariant, textSize = _a.textSize, rest = __rest(_a, ["children", "isActive", "disabled", "className", "variant", "size", "activeTextVariant", "inactiveTextVariant", "textSize"]);
+    var roleProp = rest.role, typeProp = rest.type, buttonRest = __rest(rest, ["role", "type"]);
+    var tabClasses = [
+        'tab',
+        "tab--variant-".concat(variant),
+        "tab--size-".concat(size),
+        isActive ? 'tab--active' : '',
+        disabled ? 'tab--disabled' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var defaultTypographyVariant = variant === 'outline' ? 'bold' : 'regular';
+    var resolvedActiveTextVariant = activeTextVariant !== null && activeTextVariant !== void 0 ? activeTextVariant : defaultTypographyVariant;
+    var resolvedInactiveTextVariant = inactiveTextVariant !== null && inactiveTextVariant !== void 0 ? inactiveTextVariant : defaultTypographyVariant;
+    var resolvedVariant = isActive
+        ? resolvedActiveTextVariant
+        : resolvedInactiveTextVariant;
+    var resolvedTextSize = textSize !== null && textSize !== void 0 ? textSize : (variant === 'outline'
+        ? 'base'
+        : size === 'lg'
+            ? 'lg'
+            : 'base');
+    return (_jsx("button", __assign({}, buttonRest, { ref: ref, type: typeProp !== null && typeProp !== void 0 ? typeProp : 'button', role: roleProp !== null && roleProp !== void 0 ? roleProp : 'tab', "aria-selected": isActive, "aria-disabled": disabled || undefined, disabled: disabled, className: tabClasses }, { children: _jsx(Text, __assign({ as: "span", size: resolvedTextSize, variant: resolvedVariant, className: "tab__label" }, { children: children })) })));
+});
+Tab.displayName = 'Tab';
+export default Tab;

package/dist/components/atoms/Typography/Typography.d.ts

@@ -1,24 +1,24 @@
-import React from 'react';
-type BodyTokenSize = 'xs' | 'sm' | 'md' | 'lg';
-type BodySizeInput = BodyTokenSize | 'base' | 'xl';
-type Variant = 'light' | 'regular' | 'medium' | 'bold' | 'black';
-type Leading = 'none' | '4' | '5' | '6' | '7';
-type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-interface BaseProps {
-    variant?: Variant;
-    leading?: Leading;
-    className?: string;
-    children: React.ReactNode;
-    onClick?: React.MouseEventHandler<Element>;
-}
-interface HeadingProps extends BaseProps {
-    level?: HeadingLevel;
-    as?: keyof React.JSX.IntrinsicElements;
-}
-interface TextProps extends BaseProps {
-    size?: BodySizeInput;
-    as?: keyof React.JSX.IntrinsicElements;
-}
-export declare const Heading: React.FC<HeadingProps>;
-export declare const Text: React.FC<TextProps>;
-export {};
+import React from 'react';
+type BodyTokenSize = 'xs' | 'sm' | 'md' | 'lg';
+type BodySizeInput = BodyTokenSize | 'base' | 'xl';
+type Variant = 'light' | 'regular' | 'medium' | 'bold' | 'black';
+type Leading = 'none' | '4' | '5' | '6' | '7';
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+interface BaseProps {
+    variant?: Variant;
+    leading?: Leading;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: React.MouseEventHandler<Element>;
+}
+interface HeadingProps extends BaseProps {
+    level?: HeadingLevel;
+    as?: keyof React.JSX.IntrinsicElements;
+}
+interface TextProps extends BaseProps {
+    size?: BodySizeInput;
+    as?: keyof React.JSX.IntrinsicElements;
+}
+export declare const Heading: React.FC<HeadingProps>;
+export declare const Text: React.FC<TextProps>;
+export {};

package/dist/components/atoms/Typography/Typography.js

@@ -1,100 +1,100 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-var headingTokenClass = {
-    1: 'heading-3xl',
-    2: 'heading-2xl',
-    3: 'heading-xl',
-    4: 'heading-lg',
-    5: 'heading-md',
-    6: 'heading-sm',
-};
-var leadingFallback = {
-    none: 'leading-none',
-    '4': 'leading-4',
-    '5': 'leading-5',
-    '6': 'leading-6',
-    '7': 'leading-7',
-};
-var bodySizeAlias = {
-    xs: 'xs',
-    sm: 'sm',
-    md: 'md',
-    lg: 'lg',
-    base: 'md',
-    xl: 'lg',
-};
-var defaultBodyLeading = {
-    xs: '5',
-    sm: '6',
-    md: '6',
-    lg: '7',
-};
-var tokenBodyLeadings = {
-    xs: ['leading-5', 'leading-4', 'leading-none'],
-    sm: ['leading-6', 'leading-5', 'leading-none'],
-    md: ['leading-6', 'leading-7', 'leading-none'],
-    lg: ['leading-7', 'leading-6', 'leading-none'],
-};
-var mapLeadingToToken = function (leading) {
-    if (leading === 'none')
-        return 'leading-none';
-    return "leading-".concat(leading);
-};
-var getBodyClass = function (size, leading) {
-    var availableLeadings = tokenBodyLeadings[size];
-    var desiredLeading = leading ? mapLeadingToToken(leading) : mapLeadingToToken(defaultBodyLeading[size]);
-    var resolvedLeading = availableLeadings.includes(desiredLeading)
-        ? desiredLeading
-        : availableLeadings[0];
-    return {
-        className: "body-".concat(size, "-").concat(resolvedLeading),
-        lineHeightHandled: desiredLeading === resolvedLeading,
-    };
-};
-var buildVariantClass = function (base, variant) {
-    if (!base)
-        return undefined;
-    return "".concat(base, "--").concat(variant);
-};
-export var Heading = function (_a) {
-    var _b;
-    var _c = _a.level, level = _c === void 0 ? 2 : _c, _d = _a.variant, variant = _d === void 0 ? 'bold' : _d, leading = _a.leading, as = _a.as, _e = _a.className, className = _e === void 0 ? '' : _e, children = _a.children, onClick = _a.onClick;
-    var Tag = as || "h".concat(level);
-    var baseClass = (_b = headingTokenClass[level]) !== null && _b !== void 0 ? _b : headingTokenClass[2];
-    var variantClass = buildVariantClass(baseClass, variant);
-    var classes = [
-        baseClass,
-        variantClass,
-        leading ? leadingFallback[leading] : '',
-        className,
-    ]
-        .filter(Boolean)
-        .join(' ');
-    return (_jsx(Tag, __assign({ className: classes, onClick: onClick }, { children: children })));
-};
-export var Text = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.variant, variant = _c === void 0 ? 'regular' : _c, leading = _a.leading, as = _a.as, _d = _a.className, className = _d === void 0 ? '' : _d, children = _a.children, onClick = _a.onClick;
-    var Tag = as || 'p';
-    var normalizedSize = bodySizeAlias[size];
-    var _e = getBodyClass(normalizedSize, leading), baseClass = _e.className, lineHeightHandled = _e.lineHeightHandled;
-    var variantClass = buildVariantClass(baseClass, variant);
-    var classes = [
-        baseClass,
-        variantClass,
-        leading && !lineHeightHandled ? leadingFallback[leading] : '',
-        className,
-    ]
-        .filter(Boolean)
-        .join(' ');
-    return (_jsx(Tag, __assign({ className: classes, onClick: onClick }, { children: children })));
-};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+var headingTokenClass = {
+    1: 'heading-3xl',
+    2: 'heading-2xl',
+    3: 'heading-xl',
+    4: 'heading-lg',
+    5: 'heading-md',
+    6: 'heading-sm',
+};
+var leadingFallback = {
+    none: 'leading-none',
+    '4': 'leading-4',
+    '5': 'leading-5',
+    '6': 'leading-6',
+    '7': 'leading-7',
+};
+var bodySizeAlias = {
+    xs: 'xs',
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+    base: 'md',
+    xl: 'lg',
+};
+var defaultBodyLeading = {
+    xs: '5',
+    sm: '6',
+    md: '6',
+    lg: '7',
+};
+var tokenBodyLeadings = {
+    xs: ['leading-5', 'leading-4', 'leading-none'],
+    sm: ['leading-6', 'leading-5', 'leading-none'],
+    md: ['leading-6', 'leading-7', 'leading-none'],
+    lg: ['leading-7', 'leading-6', 'leading-none'],
+};
+var mapLeadingToToken = function (leading) {
+    if (leading === 'none')
+        return 'leading-none';
+    return "leading-".concat(leading);
+};
+var getBodyClass = function (size, leading) {
+    var availableLeadings = tokenBodyLeadings[size];
+    var desiredLeading = leading ? mapLeadingToToken(leading) : mapLeadingToToken(defaultBodyLeading[size]);
+    var resolvedLeading = availableLeadings.includes(desiredLeading)
+        ? desiredLeading
+        : availableLeadings[0];
+    return {
+        className: "body-".concat(size, "-").concat(resolvedLeading),
+        lineHeightHandled: desiredLeading === resolvedLeading,
+    };
+};
+var buildVariantClass = function (base, variant) {
+    if (!base)
+        return undefined;
+    return "".concat(base, "--").concat(variant);
+};
+export var Heading = function (_a) {
+    var _b;
+    var _c = _a.level, level = _c === void 0 ? 2 : _c, _d = _a.variant, variant = _d === void 0 ? 'bold' : _d, leading = _a.leading, as = _a.as, _e = _a.className, className = _e === void 0 ? '' : _e, children = _a.children, onClick = _a.onClick;
+    var Tag = as || "h".concat(level);
+    var baseClass = (_b = headingTokenClass[level]) !== null && _b !== void 0 ? _b : headingTokenClass[2];
+    var variantClass = buildVariantClass(baseClass, variant);
+    var classes = [
+        baseClass,
+        variantClass,
+        leading ? leadingFallback[leading] : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx(Tag, __assign({ className: classes, onClick: onClick }, { children: children })));
+};
+export var Text = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.variant, variant = _c === void 0 ? 'regular' : _c, leading = _a.leading, as = _a.as, _d = _a.className, className = _d === void 0 ? '' : _d, children = _a.children, onClick = _a.onClick;
+    var Tag = as || 'p';
+    var normalizedSize = bodySizeAlias[size];
+    var _e = getBodyClass(normalizedSize, leading), baseClass = _e.className, lineHeightHandled = _e.lineHeightHandled;
+    var variantClass = buildVariantClass(baseClass, variant);
+    var classes = [
+        baseClass,
+        variantClass,
+        leading && !lineHeightHandled ? leadingFallback[leading] : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx(Tag, __assign({ className: classes, onClick: onClick }, { children: children })));
+};

package/dist/components/molecules/Calendar/CalendarInput.d.ts

@@ -1,34 +1,34 @@
-import React from "react";
-export interface CalendarInputProps {
-    /** Placeholder text */
-    placeholder?: string;
-    /** Selected date value (formatted as string) */
-    value?: string;
-    /** State of the input: default, active, typing, disabled, success, error */
-    state?: "default" | "active" | "typing" | "disabled" | "success" | "error";
-    /** Helper/support text below input */
-    /** Whether the input is disabled */
-    disabled?: boolean;
-    /** Callback when the input is clicked */
-    onClick?: () => void;
-    /** Callback when calendar icon is clicked */
-    onCalendarClick?: () => void;
-    /** Callback when input value changes */
-    onChange?: (value: string) => void;
-    /** Callback when input gains focus */
-    onFocus?: () => void;
-    /** Callback when input loses focus */
-    onBlur?: () => void;
-    /** Additional CSS classes */
-    className?: string;
-    /** Whether the calendar icon has full bg*/
-    iconBGFull?: boolean;
-    /** Position of the calendar icon: left or right */
-    iconPosition?: "left" | "right";
-    /** Show chevron on the right when icon is on the left */
-    showChevron?: boolean;
-    /** Whether the calendar popover is open */
-    isOpen?: boolean;
-}
-declare const CalendarInput: React.FC<CalendarInputProps>;
-export default CalendarInput;
+import React from "react";
+export interface CalendarInputProps {
+    /** Placeholder text */
+    placeholder?: string;
+    /** Selected date value (formatted as string) */
+    value?: string;
+    /** State of the input: default, active, typing, disabled, success, error */
+    state?: "default" | "active" | "typing" | "disabled" | "success" | "error";
+    /** Helper/support text below input */
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Callback when the input is clicked */
+    onClick?: () => void;
+    /** Callback when calendar icon is clicked */
+    onCalendarClick?: () => void;
+    /** Callback when input value changes */
+    onChange?: (value: string) => void;
+    /** Callback when input gains focus */
+    onFocus?: () => void;
+    /** Callback when input loses focus */
+    onBlur?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether the calendar icon has full bg*/
+    iconBGFull?: boolean;
+    /** Position of the calendar icon: left or right */
+    iconPosition?: "left" | "right";
+    /** Show chevron on the right when icon is on the left */
+    showChevron?: boolean;
+    /** Whether the calendar popover is open */
+    isOpen?: boolean;
+}
+declare const CalendarInput: React.FC<CalendarInputProps>;
+export default CalendarInput;

package/dist/components/molecules/Calendar/CalendarInput.js

@@ -1,49 +1,49 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from "react";
-import Icon from "../../atoms/Icon/Icon";
-var CalendarInput = function (_a) {
-    var _b = _a.placeholder, placeholder = _b === void 0 ? "Select date" : _b, _c = _a.value, value = _c === void 0 ? "" : _c, _d = _a.state, state = _d === void 0 ? "default" : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, onClick = _a.onClick, onCalendarClick = _a.onCalendarClick, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.iconBGFull, iconBGFull = _g === void 0 ? true : _g, _h = _a.iconPosition, iconPosition = _h === void 0 ? "right" : _h, _j = _a.showChevron, showChevron = _j === void 0 ? false : _j, _k = _a.isOpen, isOpen = _k === void 0 ? false : _k;
-    var _l = useState(false), isFocused = _l[0], setIsFocused = _l[1];
-    var _m = useState(value), localValue = _m[0], setLocalValue = _m[1];
-    var _o = useState(false), isTyping = _o[0], setIsTyping = _o[1];
-    var finalState = disabled ? "disabled" : state;
-    var displayState = isFocused && isTyping ? "typing" : isFocused ? "active" : finalState;
-    var handleInputChange = function (e) {
-        var newValue = e.target.value;
-        setLocalValue(newValue);
-        setIsTyping(true);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-    };
-    var handleFocus = function () {
-        setIsFocused(true);
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
-    };
-    var handleBlur = function () {
-        setIsFocused(false);
-        setIsTyping(false);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    };
-    var handleCalendarClick = function () {
-        if (!disabled) {
-            onCalendarClick === null || onCalendarClick === void 0 ? void 0 : onCalendarClick();
-        }
-    };
-    // keep localValue in sync when parent changes `value` (controlled)
-    React.useEffect(function () {
-        setLocalValue(value);
-    }, [value]);
-    var iconButton = (_jsx("button", __assign({ type: "button", className: "calendar-input__icon-button ".concat(iconBGFull ? " calendar-input__icon-button--full-bg" : "", " calendar-input__icon-button--").concat(iconPosition), onClick: handleCalendarClick, disabled: disabled, "aria-label": "Open calendar picker", title: "Select date" }, { children: _jsx(Icon, { name: "calendar", size: "sm", className: "calendar-input__icon" }) })));
-    return (_jsxs("div", __assign({ className: "calendar-input calendar-input--".concat(displayState, " calendar-input--icon-").concat(iconPosition, " ").concat(className).trim(), "data-node-id": "3425:11289", onClick: onClick }, { children: [iconPosition === "left" && iconButton, _jsxs("div", __assign({ className: "calendar-input__input-wrapper" }, { children: [_jsx("input", { type: "text", className: "calendar-input__field", placeholder: placeholder, value: localValue || placeholder, disabled: disabled, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, readOnly: true, "aria-label": "Select date" }), iconPosition === "left" && showChevron && (_jsx("div", __assign({ className: "calendar-input__chevron ".concat(isOpen ? 'calendar-input__chevron--open' : '') }, { children: _jsx(Icon, { name: "chevron-down", size: "sm" }) })))] })), iconPosition === "right" && iconButton] })));
-};
-export default CalendarInput;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import Icon from "../../atoms/Icon/Icon";
+var CalendarInput = function (_a) {
+    var _b = _a.placeholder, placeholder = _b === void 0 ? "Select date" : _b, _c = _a.value, value = _c === void 0 ? "" : _c, _d = _a.state, state = _d === void 0 ? "default" : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, onClick = _a.onClick, onCalendarClick = _a.onCalendarClick, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.iconBGFull, iconBGFull = _g === void 0 ? true : _g, _h = _a.iconPosition, iconPosition = _h === void 0 ? "right" : _h, _j = _a.showChevron, showChevron = _j === void 0 ? false : _j, _k = _a.isOpen, isOpen = _k === void 0 ? false : _k;
+    var _l = useState(false), isFocused = _l[0], setIsFocused = _l[1];
+    var _m = useState(value), localValue = _m[0], setLocalValue = _m[1];
+    var _o = useState(false), isTyping = _o[0], setIsTyping = _o[1];
+    var finalState = disabled ? "disabled" : state;
+    var displayState = isFocused && isTyping ? "typing" : isFocused ? "active" : finalState;
+    var handleInputChange = function (e) {
+        var newValue = e.target.value;
+        setLocalValue(newValue);
+        setIsTyping(true);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    };
+    var handleFocus = function () {
+        setIsFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    };
+    var handleBlur = function () {
+        setIsFocused(false);
+        setIsTyping(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    };
+    var handleCalendarClick = function () {
+        if (!disabled) {
+            onCalendarClick === null || onCalendarClick === void 0 ? void 0 : onCalendarClick();
+        }
+    };
+    // keep localValue in sync when parent changes `value` (controlled)
+    React.useEffect(function () {
+        setLocalValue(value);
+    }, [value]);
+    var iconButton = (_jsx("button", __assign({ type: "button", className: "calendar-input__icon-button ".concat(iconBGFull ? " calendar-input__icon-button--full-bg" : "", " calendar-input__icon-button--").concat(iconPosition), onClick: handleCalendarClick, disabled: disabled, "aria-label": "Open calendar picker", title: "Select date" }, { children: _jsx(Icon, { name: "calendar", size: "sm", className: "calendar-input__icon" }) })));
+    return (_jsxs("div", __assign({ className: "calendar-input calendar-input--".concat(displayState, " calendar-input--icon-").concat(iconPosition, " ").concat(className).trim(), "data-node-id": "3425:11289", onClick: onClick }, { children: [iconPosition === "left" && iconButton, _jsxs("div", __assign({ className: "calendar-input__input-wrapper" }, { children: [_jsx("input", { type: "text", className: "calendar-input__field", placeholder: placeholder, value: localValue || placeholder, disabled: disabled, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, readOnly: true, "aria-label": "Select date" }), iconPosition === "left" && showChevron && (_jsx("div", __assign({ className: "calendar-input__chevron ".concat(isOpen ? 'calendar-input__chevron--open' : '') }, { children: _jsx(Icon, { name: "chevron-down", size: "sm" }) })))] })), iconPosition === "right" && iconButton] })));
+};
+export default CalendarInput;

package/dist/components/molecules/Calendar/DateTime.d.ts

@@ -1,25 +1,25 @@
-/// <reference types="react" />
-import { DateRange } from "react-day-picker";
-export interface DateTimeProps {
-    mode?: "calendar" | "time" | "both";
-    selectionMode?: "single" | "range";
-    numberOfMonths?: 1 | 2;
-    disableBeforeToday?: boolean;
-    disableToday?: boolean;
-    defaultDateRange?: DateRange;
-    defaultTime?: {
-        hour: string;
-        minute: string;
-        meridiem: "AM" | "PM";
-    };
-    onChange?: (payload: {
-        dateRange?: DateRange;
-        time?: {
-            hour: string;
-            minute: string;
-            meridiem: "AM" | "PM";
-        };
-    }) => void;
-}
-declare const DateTime: React.FC<DateTimeProps>;
-export default DateTime;
+/// <reference types="react" />
+import { DateRange } from "react-day-picker";
+export interface DateTimeProps {
+    mode?: "calendar" | "time" | "both";
+    selectionMode?: "single" | "range";
+    numberOfMonths?: 1 | 2;
+    disableBeforeToday?: boolean;
+    disableToday?: boolean;
+    defaultDateRange?: DateRange;
+    defaultTime?: {
+        hour: string;
+        minute: string;
+        meridiem: "AM" | "PM";
+    };
+    onChange?: (payload: {
+        dateRange?: DateRange;
+        time?: {
+            hour: string;
+            minute: string;
+            meridiem: "AM" | "PM";
+        };
+    }) => void;
+}
+declare const DateTime: React.FC<DateTimeProps>;
+export default DateTime;