@tap-payments/os-micro-frontend-shared 0.1.31 → 0.1.32

package/build/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { RadioButtonProps } from './type';
+declare function RadioButton({ size, customCheckedIcon, checkedColor, disabledColor, hoverColor, iconSize, showRipple, sx, ...props }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof RadioButton>;
+export default _default;

package/build/components/RadioButton/RadioButton.js

@@ -0,0 +1,19 @@
+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 { memo } from 'react';
+import { StyledRadio, StyledRadioCheckedIcon } from './style';
+function RadioButton(_a) {
+    var { size = 'small', customCheckedIcon, checkedColor, disabledColor, hoverColor, iconSize, showRipple = false, sx } = _a, props = __rest(_a, ["size", "customCheckedIcon", "checkedColor", "disabledColor", "hoverColor", "iconSize", "showRipple", "sx"]);
+    return (_jsx(StyledRadio, Object.assign({ size: size === 'large' ? 'medium' : size, disableRipple: !showRipple, checkedIcon: customCheckedIcon || _jsx(StyledRadioCheckedIcon, {}), iconSize: iconSize, checkedColor: checkedColor, disabledColor: disabledColor, hoverColor: hoverColor, sx: sx }, props)));
+}
+export default memo(RadioButton);

package/build/components/RadioButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RadioButton } from './RadioButton';
+export type { RadioButtonProps } from './type';

package/build/components/RadioButton/index.js

@@ -0,0 +1 @@
+export { default as RadioButton } from './RadioButton';

package/build/components/RadioButton/style.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export declare const DEFAULT_COLORS: {
+    readonly color: "#8C9196";
+    readonly checkedColor: "#1F88D0";
+    readonly disabledColor: "#C7C7CC";
+};
+export declare const SIZE_CONFIG: {
+    readonly small: {
+        readonly iconSize: 15;
+        readonly maxWidth: "24px";
+    };
+    readonly medium: {
+        readonly iconSize: 18;
+        readonly maxWidth: "28px";
+    };
+    readonly large: {
+        readonly iconSize: 20;
+        readonly maxWidth: "32px";
+    };
+};
+export declare const StyledRadioCheckedIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, {}, {}>;
+export declare const StyledRadio: import("@emotion/styled").StyledComponent<import("@mui/material/Radio").RadioProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    iconSize?: number | undefined;
+    checkedColor?: string | undefined;
+    disabledColor?: string | undefined;
+    hoverColor?: string | undefined;
+}, {}, {}>;

package/build/components/RadioButton/style.js

@@ -0,0 +1,64 @@
+import { styled } from '@mui/material/styles';
+import Radio from '@mui/material/Radio';
+export const DEFAULT_COLORS = {
+    color: '#8C9196',
+    checkedColor: '#1F88D0',
+    disabledColor: '#C7C7CC',
+};
+export const SIZE_CONFIG = {
+    small: {
+        iconSize: 15,
+        maxWidth: '24px',
+    },
+    medium: {
+        iconSize: 18,
+        maxWidth: '28px',
+    },
+    large: {
+        iconSize: 20,
+        maxWidth: '32px',
+    },
+};
+const StyledRadioIcon = styled('span')(() => ({
+    borderRadius: '50%',
+    width: '12px',
+    height: '12px',
+    boxSizing: 'border-box',
+    boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
+}));
+export const StyledRadioCheckedIcon = styled(StyledRadioIcon)({
+    backgroundColor: DEFAULT_COLORS.checkedColor,
+    '&::before': {
+        display: 'block',
+        width: '12px',
+        height: '12px',
+        backgroundColor: DEFAULT_COLORS.checkedColor,
+        borderRadius: '50%',
+        backgroundImage: 'radial-gradient(#fff,#fff 28%,transparent 32%)',
+        content: '""',
+    },
+});
+export const StyledRadio = styled(Radio, {
+    shouldForwardProp: (prop) => !['iconSize', 'checkedColor', 'disabledColor', 'hoverColor'].includes(prop),
+})(({ iconSize, checkedColor, disabledColor, hoverColor }) => {
+    return {
+        '& .MuiSvgIcon-root': {
+            fontSize: iconSize || SIZE_CONFIG.small.iconSize,
+        },
+        maxWidth: SIZE_CONFIG.small.maxWidth,
+        cursor: 'pointer',
+        color: DEFAULT_COLORS.color,
+        '&.Mui-checked': {
+            color: checkedColor || DEFAULT_COLORS.checkedColor,
+        },
+        '&:hover': hoverColor
+            ? {
+                backgroundColor: 'transparent',
+                color: hoverColor,
+            }
+            : undefined,
+        '&.Mui-disabled': {
+            color: disabledColor || DEFAULT_COLORS.disabledColor,
+        },
+    };
+});

package/build/components/RadioButton/type.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { RadioProps, SxProps, Theme } from '@mui/material';
+export interface RadioButtonProps extends Omit<RadioProps, 'checkedIcon' | 'icon' | 'color' | 'size'> {
+    size?: 'small' | 'medium' | 'large';
+    customCheckedIcon?: React.ReactNode;
+    checkedColor?: string;
+    disabledColor?: string;
+    hoverColor?: string;
+    iconSize?: number;
+    showRipple?: boolean;
+    sx?: SxProps<Theme>;
+}

package/build/components/RadioButton/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CustomRadioGroupProps } from './type';
+declare function RadioGroup({ options, onOptionChange, size, customLabelRenderer, layout, spacing, labelPosition, showHoverEffects, customRadioProps, labelSx, onChange, sx, ...props }: CustomRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof RadioGroup>;
+export default _default;

package/build/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,31 @@
+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 { memo } from 'react';
+import MuiRadioGroup from '@mui/material/RadioGroup';
+import { StyledFormControlLabel } from './style';
+import { RadioButton } from '../RadioButton';
+function RadioItem(_a) {
+    var { option, size = 'small', customLabelRenderer, labelPosition = 'end', showHoverEffects = true, customRadioProps, labelSx } = _a, props = __rest(_a, ["option", "size", "customLabelRenderer", "labelPosition", "showHoverEffects", "customRadioProps", "labelSx"]);
+    const label = customLabelRenderer ? customLabelRenderer(option) : option.label;
+    return (_jsx(StyledFormControlLabel, Object.assign({ value: option.value, control: _jsx(RadioButton, Object.assign({ size: size }, customRadioProps, option.customProps)), label: label, disabled: option.disabled, size: size, labelPlacement: labelPosition, showHoverEffects: showHoverEffects, labelSx: labelSx }, props)));
+}
+function RadioGroup(_a) {
+    var { options, onOptionChange, size = 'small', customLabelRenderer, layout = 'vertical', spacing = 0, labelPosition = 'end', showHoverEffects = true, customRadioProps, labelSx, onChange, sx } = _a, props = __rest(_a, ["options", "onOptionChange", "size", "customLabelRenderer", "layout", "spacing", "labelPosition", "showHoverEffects", "customRadioProps", "labelSx", "onChange", "sx"]);
+    const handleChange = (event) => {
+        const value = event.target.value;
+        onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, value);
+    };
+    return (_jsx(MuiRadioGroup, Object.assign({ onChange: handleChange, sx: Object.assign({ display: 'flex', flexDirection: layout === 'horizontal' ? 'row' : 'column', gap: spacing }, sx) }, props, { children: options.map((option) => (_jsx(RadioItem, { option: option, size: size, customLabelRenderer: customLabelRenderer, labelPosition: labelPosition, showHoverEffects: showHoverEffects, customRadioProps: customRadioProps, labelSx: labelSx }, option.value))) })));
+}
+export default memo(RadioGroup);

package/build/components/RadioGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup';
+export type { CustomRadioGroupProps, RadioOption } from './type';

package/build/components/RadioGroup/index.js

@@ -0,0 +1 @@
+export { default as RadioGroup } from './RadioGroup';

package/build/components/RadioGroup/style.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const StyledFormControlLabel: import("@emotion/styled").StyledComponent<import("@mui/material/FormControlLabel").FormControlLabelProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    size?: "medium" | "small" | "large" | undefined;
+    showHoverEffects?: boolean | undefined;
+    labelSx?: import("react").CSSProperties | undefined;
+}, {}, {}>;

package/build/components/RadioGroup/style.js

@@ -0,0 +1,15 @@
+import { styled } from '@mui/material/styles';
+import FormControlLabel from '@mui/material/FormControlLabel';
+export const StyledFormControlLabel = styled(FormControlLabel, {
+    shouldForwardProp: (prop) => !['size', 'showHoverEffects', 'labelSx'].includes(prop),
+})(({ size = 'small', showHoverEffects = true, labelSx }) => (Object.assign(Object.assign({ margin: '0', width: '100%', cursor: 'pointer', padding: size === 'small' ? '7.5px 16px 7.5px 8px' : size === 'medium' ? '9px 16px 9px 10px' : '11px 16px 11px 12px', maxHeight: size === 'small' ? '35px' : size === 'medium' ? '40px' : '45px' }, (showHoverEffects && {
+    '&:hover': {
+        boxShadow: '0px 0px 16px 0px #00000021',
+    },
+})), { '& .MuiFormControlLabel-label': Object.assign({ fontSize: size === 'small' ? '11px' : size === 'medium' ? '13px' : '15px', fontWeight: '500', color: '#20232B', width: '100%', cursor: 'pointer' }, labelSx), '& .MuiRadio-root': {
+        cursor: 'pointer',
+        color: '#8C9196',
+        '&.Mui-checked': {
+            color: '#1F88D0',
+        },
+    } })));

package/build/components/RadioGroup/type.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { RadioGroupProps } from '@mui/material/RadioGroup';
+import { FormControlLabelProps } from '@mui/material/FormControlLabel';
+import { RadioButtonProps } from '../RadioButton/type';
+export interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    description?: string;
+    icon?: ReactNode;
+    customProps?: Partial<RadioButtonProps>;
+}
+export interface CustomRadioGroupProps extends Omit<RadioGroupProps, 'children'> {
+    options: RadioOption[];
+    onOptionChange?: (value: string) => void;
+    size?: 'small' | 'medium' | 'large';
+    customLabelRenderer?: (option: RadioOption) => ReactNode;
+    layout?: 'vertical' | 'horizontal';
+    spacing?: number;
+    labelPosition?: 'start' | 'end' | 'top' | 'bottom';
+    showHoverEffects?: boolean;
+    customRadioProps?: Partial<RadioButtonProps>;
+    labelSx?: React.CSSProperties;
+}
+export interface RadioItemProps extends Omit<FormControlLabelProps, 'control' | 'label'> {
+    option: RadioOption;
+    size?: 'small' | 'medium' | 'large';
+    customLabelRenderer?: (option: RadioOption) => ReactNode;
+    labelPosition?: 'start' | 'end' | 'top' | 'bottom';
+    showHoverEffects?: boolean;
+    customRadioProps?: Partial<RadioButtonProps>;
+    labelSx?: React.CSSProperties;
+}

package/build/components/RadioGroup/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/RightLeftExpandingCenterChip/RightLeftExpandingCenterChip.d.ts

@@ -0,0 +1,3 @@
+import { RightLeftExpandingCenterChipProps } from './type';
+declare function RightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenter, expandedZIndex, ...props }: Readonly<RightLeftExpandingCenterChipProps>): import("react/jsx-runtime").JSX.Element;
+export default RightLeftExpandingCenterChip;

package/build/components/RightLeftExpandingCenterChip/RightLeftExpandingCenterChip.js

@@ -0,0 +1,43 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import { AnimatePresence } from 'framer-motion';
+import { CenterIconWrapper, ExpandedSection, PeekContainer, CenterChip, LeftPeekChip, RightPeekChip, LeftExpandIcon, RightExpandIcon, ExpandChip, CenterShiftWrapper, CenterContent, ExpandableContainer, ExpandableInner, tableCellSx, CHIP_GAP, HoverBridge, } from './style';
+import { useRightLeftExpandingCenterChip, DEFAULT_CHIP_MIN_WIDTH } from './useRightLeftExpandingCenterChip';
+function RightLeftExpandingCenterChip(_a) {
+    var { leftIcons = [], rightIcons = [], centerIcon, expandableCenter, expandedZIndex = 1000 } = _a, props = __rest(_a, ["leftIcons", "rightIcons", "centerIcon", "expandableCenter", "expandedZIndex"]);
+    const { isHovering, handleMouseEnter, handleMouseLeave, centerWrapRef, centerContentRef, centerChipRef, anchors, leftChipRefs, rightChipRefs, leftOffsets, rightOffsets, expandableInnerRef, expandedMV, shiftX, rightShift, leftHoverWidth, rightHoverWidth, } = useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenter });
+    return (_jsx(Box, Object.assign({}, props, { "data-testid": "RightLeftExpandingCenterChipBox", sx: tableCellSx }, { children: _jsx(CenterShiftWrapper, Object.assign({ "data-testid": "CenterShiftWrapper", initial: false, style: { x: shiftX } }, { children: _jsxs(CenterIconWrapper, Object.assign({ "data-testid": "CenterIconWrapper", ref: centerWrapRef, onMouseLeave: handleMouseLeave }, { children: [_jsxs(PeekContainer, Object.assign({ "data-testid": "PeekContainer" }, { children: [_jsx(AnimatePresence, Object.assign({ initial: false }, { children: leftIcons.length > 0 && (_jsx(LeftPeekChip, { "data-testid": "LeftPeekChip", initial: { opacity: 0, scale: 0.95, x: -4 }, animate: isHovering ? { opacity: 0, scale: 0.9, x: -6 } : { opacity: 1, scale: 1, x: -5 }, exit: { opacity: 0, scale: 0.95, x: -4 }, transition: { duration: 0.18, ease: 'easeOut' } }, "left-peek")) })), _jsxs(CenterChip, Object.assign({ "data-testid": "CenterChip", ref: centerChipRef, layout: true, onMouseEnter: handleMouseEnter }, { children: [_jsx(CenterContent, Object.assign({ "data-testid": "CenterContent", ref: centerContentRef, layout: true }, { children: centerIcon })), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: expandableCenter && (_jsx(ExpandableContainer, Object.assign({ "data-testid": "ExpandableContainer", style: { width: expandedMV }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2, ease: 'easeOut' } }, { children: _jsx(ExpandableInner, Object.assign({ "data-testid": "ExpandableInner", ref: expandableInnerRef, layout: true }, { children: expandableCenter })) }), "expandable-center")) }))] })), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: rightIcons.length > 0 && (_jsx(RightPeekChip, { "data-testid": "RightPeekChip", initial: { opacity: 0, scale: 0.95, x: 4 }, animate: isHovering ? { opacity: 0, scale: 0.9, x: 6 } : { opacity: 1, scale: 1, x: 5 }, exit: { opacity: 0, scale: 0.95, x: 4 }, transition: { duration: 0.18, ease: 'easeOut' } }, "right-peek")) }))] })), isHovering && leftIcons.length > 0 && (_jsx(HoverBridge, { "data-testid": "LeftHoverBridge", side: "left", style: { width: leftHoverWidth, right: `calc(100% - ${anchors.left}px)`, zIndex: expandedZIndex, pointerEvents: 'auto' } })), isHovering && rightIcons.length > 0 && (_jsx(HoverBridge, { "data-testid": "RightHoverBridge", side: "right", style: { width: rightHoverWidth, left: `${anchors.right}px`, zIndex: expandedZIndex, pointerEvents: 'auto' } })), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: leftIcons.length > 0 && (_jsx(ExpandedSection, Object.assign({ "data-testid": "LeftExpandedSection", side: "left", style: {
+                                right: `calc(100% - ${anchors.left}px)`,
+                                top: '50%',
+                                position: 'absolute',
+                                pointerEvents: isHovering ? 'auto' : 'none',
+                                zIndex: expandedZIndex,
+                            }, initial: { opacity: 0, x: 0, y: '-50%' }, animate: isHovering ? { opacity: 1, x: 0, y: '-50%' } : { opacity: 0, x: 0, y: '-50%' }, exit: { opacity: 0, x: 0, y: '-50%' }, transition: { duration: 0.25, ease: 'easeOut' } }, { children: leftIcons.map((icon, index) => {
+                                var _a;
+                                const leftOffset = (_a = leftOffsets[index]) !== null && _a !== void 0 ? _a : (DEFAULT_CHIP_MIN_WIDTH + CHIP_GAP) * (index + 1);
+                                return (_jsx(LeftExpandIcon, Object.assign({ "data-testid": `LeftExpandIcon-${index}`, initial: { opacity: 0, x: 0 }, animate: isHovering ? { opacity: 1, x: -leftOffset } : { opacity: 0, x: 0 }, exit: { opacity: 0, x: 0 }, transition: { duration: 0.25 + index * 0.04, ease: 'easeOut' }, style: { zIndex: expandedZIndex + (leftIcons.length - index) } }, { children: _jsx(ExpandChip, Object.assign({ "data-testid": `LeftExpandChip-${index}`, ref: (el) => (leftChipRefs.current[index] = el) }, { children: icon })) }), `left-${index}`));
+                            }) }), "left-expanded")) })), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: rightIcons.length > 0 && (_jsx(ExpandedSection, Object.assign({ "data-testid": "RightExpandedSection", side: "right", style: {
+                                left: `${anchors.right}px`,
+                                top: '50%',
+                                position: 'absolute',
+                                pointerEvents: isHovering ? 'auto' : 'none',
+                                zIndex: expandedZIndex,
+                            }, initial: { opacity: 0, x: 0, y: '-50%' }, animate: isHovering ? { opacity: 1, x: 0, y: '-50%' } : { opacity: 0, x: 0, y: '-50%' }, exit: { opacity: 0, x: 0, y: '-50%' }, transition: { duration: 0.25, ease: 'easeOut' } }, { children: rightIcons.map((icon, index) => {
+                                var _a;
+                                const base = (_a = rightOffsets[index]) !== null && _a !== void 0 ? _a : (DEFAULT_CHIP_MIN_WIDTH + CHIP_GAP) * (index + 1);
+                                const shift = rightShift;
+                                return (_jsx(RightExpandIcon, Object.assign({ "data-testid": `RightExpandIcon-${index}`, initial: { opacity: 0, x: 0 }, animate: isHovering ? { opacity: 1, x: shift + base } : { opacity: 0, x: 0 }, exit: { opacity: 0, x: 0 }, transition: { duration: 0.25 + index * 0.04, ease: 'easeOut' }, style: { zIndex: expandedZIndex + (rightIcons.length - index) } }, { children: _jsx(ExpandChip, Object.assign({ "data-testid": `RightExpandChip-${index}`, ref: (el) => (rightChipRefs.current[index] = el) }, { children: icon })) }), `right-${index}`));
+                            }) }), "right-expanded")) }))] })) })) })));
+}
+export default RightLeftExpandingCenterChip;

package/build/components/RightLeftExpandingCenterChip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RightLeftExpandingCenterChip } from './RightLeftExpandingCenterChip';
+export * from './type';

package/build/components/RightLeftExpandingCenterChip/index.js

@@ -0,0 +1,2 @@
+export { default as RightLeftExpandingCenterChip } from './RightLeftExpandingCenterChip';
+export * from './type';