@xfers/design-system 5.0.0-dev.528a2fe19f → 5.0.0-dev.66861fe8a7

package/dist/types/components/Input/index.d.ts

@@ -1,22 +1,39 @@
 import React from 'react';
 import { InputProps } from 'antd';
-type Props = {
-    addonBefore?: string;
-    placeholder?: string;
-    disabled?: boolean;
-    className?: string;
+import { InputSize } from './inputStyles';
+type BaseInputProps = {
     label?: string;
     required?: boolean;
     optional?: boolean;
-} & Omit<InputProps, 'addonBefore' | 'placeholder' | 'disabled' | 'className'>;
+    size?: InputSize;
+    helperText?: string;
+    error?: boolean;
+    showInfoIcon?: boolean;
+    infoText?: string;
+    onInfoClick?: () => void;
+};
+type Props = BaseInputProps & {
+    addonBefore?: string | React.ReactNode;
+    addonAfter?: string | React.ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    disabledAddon?: boolean;
+    className?: string;
+} & Omit<InputProps, 'addonBefore' | 'addonAfter' | 'placeholder' | 'disabled' | 'className' | 'size'>;
 declare const MainInput: {
-    ({ addonBefore, placeholder, disabled, className, label, required, optional, ...rest }: Props): React.JSX.Element;
-    Password({ addonBefore, placeholder, disabled, className, label, required, ...rest }: Props): React.JSX.Element;
-    Search({ addonBefore, placeholder, className, onChange, onSearch, ...rest }: SearchProps): React.JSX.Element;
-    TextArea({ className, label, required, optional, ...rest }: TextAreaProps): React.JSX.Element;
+    ({ addonBefore, addonAfter, placeholder, disabled, disabledAddon, className, label, required, optional, size, helperText, error, showInfoIcon, infoText, onInfoClick, ...rest }: Props): React.JSX.Element;
+    Password({ addonBefore, placeholder, disabled, className, label, required, optional, size, helperText, error, showInfoIcon, infoText, onInfoClick, ...rest }: PasswordProps): React.JSX.Element;
+    Search({ addonBefore, placeholder, className, onChange, onSearch, size, helperText, error, ...rest }: SearchProps): React.JSX.Element;
+    TextArea({ className, label, required, optional, size, helperText, error, showInfoIcon, infoText, onInfoClick, ...rest }: TextAreaProps): React.JSX.Element;
     Group: import("react").FC<import("antd/es/input").GroupProps>;
 };
-type SearchProps = {
+type PasswordProps = BaseInputProps & {
+    addonBefore?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+} & Omit<InputProps, 'addonBefore' | 'placeholder' | 'disabled' | 'className' | 'size'>;
+type SearchProps = Pick<BaseInputProps, 'size' | 'helperText' | 'error'> & {
     addonBefore?: string | React.ReactNode;
     placeholder?: string;
     className?: string;
@@ -25,15 +42,12 @@ type SearchProps = {
     onSearch?: () => void;
     value?: string;
 };
-type TextAreaProps = {
+type TextAreaProps = BaseInputProps & {
     placeholder?: string;
     className?: string;
     style?: Record<string, unknown>;
     onChange?: (e: any) => void;
     onFocus?: any;
-    label?: string;
-    required?: boolean;
-    optional?: boolean;
     disabled?: boolean;
     value?: string;
     rows?: number;

package/dist/types/components/Input/inputStyles.d.ts

@@ -0,0 +1,4 @@
+import { SIZE_CONFIG, InputSize } from 'src/shared/TypographyStyles';
+import { straitsXTheme } from 'src/theme/theme';
+export { SIZE_CONFIG, InputSize };
+export declare function getBaseInputStyle(theme: typeof straitsXTheme, size?: InputSize, error?: boolean, disabledAddon?: boolean): string;

package/dist/types/components/InputWithButton/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+type Props = {
+    buttonText: string;
+    onButtonClick?: () => void;
+    prefix?: React.ReactNode;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    disabledInput?: boolean;
+    disabledPrefix?: boolean;
+    staticPrefix?: boolean;
+    error?: boolean;
+    className?: string;
+};
+declare const InputWithButton: React.FC<Props>;
+export default InputWithButton;

package/dist/types/components/RangePicker/index.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+import type { Moment } from 'moment';
+import { InputSize } from '../Input/inputStyles';
 type Props = {
     format?: string;
     style?: Record<string, unknown>;
@@ -6,8 +8,9 @@ type Props = {
     onChange?: any;
     ranges?: any;
     disabledDate?: any;
-    value?: [any, any];
+    value?: [Moment | null, Moment | null];
     picker?: any;
+    size?: InputSize;
 };
-export default function ({ format, ...rest }: Props): React.JSX.Element;
+export default function ({ format, size, ...rest }: Props): React.JSX.Element;
 export {};

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

@@ -0,0 +1,8 @@
+export declare const PLACEHOLDER_TEXT_SIZE: {
+    readonly sm: "md";
+    readonly lg: "lg";
+};
+export declare const OPTIONS_TEXT_SIZE: {
+    readonly sm: "md";
+    readonly lg: "lg";
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare const getSuffixIcon: (secondaryText?: string) => React.JSX.Element;
+export declare const renderLabel: (label: string, tooltip?: React.ReactElement) => React.JSX.Element | null;
+export declare const getPlaceholder: (size: "sm" | "lg", placeholder?: string) => React.JSX.Element | null;
+export declare const renderOptions: (options: Array<{
+    value: string;
+    label: string;
+    disabled?: boolean;
+    icon?: React.ComponentType<{
+        style?: React.CSSProperties;
+    }>;
+}>, size: "sm" | "lg") => React.JSX.Element[];
+export declare const renderHelperText: (helperText?: string) => React.JSX.Element | null;
+export declare const getCustomSelectTag: (mode: string | undefined, disabled: boolean, size: "sm" | "lg") => (({ label, onClose }: {
+    label: React.ReactNode;
+    onClose: () => void;
+}) => React.JSX.Element) | undefined;

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

@@ -1,27 +1,30 @@
 import React, { RefObject } from 'react';
 import { SelectProps } from 'antd';
+import type { BaseSelectRef } from 'rc-select';
+import type { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select';
 export type Props = {
     disabled?: boolean;
     children?: React.ReactNode;
-    className?: string;
-    type?: 'dropdown' | 'filter';
     placeholder?: string;
-    style?: Record<string, unknown>;
-    dropdownstyle?: Record<string, unknown>;
-    open?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    mode?: 'multiple' | 'tags';
+    mode?: 'multiple';
     label?: string;
-    dropdownAlign?: object;
-    selectRef?: RefObject<any>;
-} & Omit<SelectProps<any>, 'disabled' | 'mode' | 'className'>;
+    size?: 'sm' | 'lg';
+    error?: boolean;
+    labelTooltip?: React.ReactElement;
+    secondaryText?: string;
+    helperText?: string;
+    options?: Array<{
+        value: string;
+        label: string;
+        disabled?: boolean;
+        icon?: React.ComponentType<{
+            style?: React.CSSProperties;
+        }>;
+    }>;
+    selectRef?: RefObject<BaseSelectRef>;
+} & Omit<SelectProps<unknown, DefaultOptionType | BaseOptionType>, 'disabled' | 'size'>;
 declare const Select: {
-    ({ className, children, disabled, type, mode, label, selectRef, ...rest }: Props): React.JSX.Element;
-    Tag({ className, ...props }: {
-        className?: string;
-        [key: string]: unknown;
-    }): React.JSX.Element;
-    OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
+    ({ children, disabled, size, mode, label, labelTooltip, selectRef, placeholder, error, secondaryText, helperText, options, ...rest }: Props): React.JSX.Element;
     Option: import("rc-select/lib/Option").OptionFC;
 };
 export default Select;

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

@@ -1,2 +1,19 @@
-import { Props } from './index';
-export default function ({ mode, disabled, type }: Pick<Props, 'mode' | 'disabled' | 'type'>): string;
+export declare const LabelContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const OptionContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const SelectContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const StyledAntSelect: import("@emotion/styled-base").StyledComponent<import("antd").SelectProps<unknown, import("rc-select/lib/Select").DefaultOptionType | import("rc-select/lib/Select").BaseOptionType> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<import("antd").RefSelectProps>, {
+    $size: "sm" | "lg";
+    $mode?: "multiple";
+    disabled: boolean;
+    error: boolean;
+}, object>;
+export declare const StyledDropdown: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $size: "sm" | "lg";
+}, object>;
+export declare const dropdownStyle: {
+    padding: number;
+    paddingBottom: string;
+    borderRadius: string;
+};

package/dist/types/icons/Coins.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function Coins(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export default Coins;

package/dist/types/icons/MintSetupWallet.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function MintSetupWallet(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export default MintSetupWallet;

package/dist/types/icons/StraitsXDecoVertical.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function Coins(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export default Coins;

package/dist/types/icons/SwitchAccount.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function SvgSwitchAccount(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export default SvgSwitchAccount;

package/dist/types/icons/index.d.ts

@@ -80,6 +80,7 @@ export { default as Settings } from 'src/icons/Settings';
 export { default as SignUpTwoTone } from 'src/icons/SignUpTwoTone';
 export { default as StateSuccessV2 } from 'src/icons/StateSuccess';
 export { default as Switch } from 'src/icons/Switch';
+export { default as SwitchAccount } from 'src/icons/SwitchAccount';
 export { default as Thumbnail } from 'src/icons/Thumbnail';
 export { default as ThumbnailTwoTone } from 'src/icons/ThumbnailTwoTone';
 export { default as Tick } from 'src/icons/Tick';
@@ -129,3 +130,6 @@ export { default as VerifyPhone } from './VerifyPhone';
 export { default as TwoFA } from './TwoFA';
 export { default as GenerateVA } from './GenerateVA';
 export { default as Time } from './Time';
+export { default as MintSetupWallet } from './MintSetupWallet';
+export { default as Coins } from './Coins';
+export { default as StraitsXDecoVertical } from './StraitsXDecoVertical';

package/dist/types/index.d.ts

@@ -12,6 +12,7 @@ export { default as Dropdown } from './components/Dropdown';
 export { default as DynamicSelect } from './components/DynamicSelect';
 export { default as Form } from './components/Form';
 export { default as Input } from './components/Input';
+export { default as InputWithButton } from './components/InputWithButton';
 export { default as Tag } from './components/Tag';
 export { default as Modal } from './components/Modal';
 export { default as DeprecatedModal } from './components/DeprecatedModal';

package/dist/types/logos/Base.d.ts

@@ -0,0 +1,3 @@
+import React, { SVGProps } from 'react';
+declare const Base: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default Base;

package/dist/types/logos/index.d.ts

@@ -107,6 +107,7 @@ export { default as Tron } from 'src/logos/Tron';
 export { default as Bnbsmart } from './BnbSmart';
 export { default as Ripple } from './Ripple';
 export { default as Solana } from './Solana';
+export { default as Base } from './Base';
 export { default as Alfamart } from 'src/logos/convenienceStore/Alfamart';
 export { default as Alfamidi } from 'src/logos/convenienceStore/Alfamidi';
 export { default as DanPlusDan } from 'src/logos/convenienceStore/DanPlusDan';

package/dist/types/shared/TypographyStyles.d.ts

@@ -19,6 +19,19 @@ export declare enum FONT_SIZE {
     SMALL = "12px",
     SMALL_MOBILE = "14px"
 }
+export type InputSize = 'large' | 'small';
+export declare const SIZE_CONFIG: {
+    large: {
+        height: string;
+        borderRadius: string;
+        padding: string;
+    };
+    small: {
+        height: string;
+        borderRadius: string;
+        padding: string;
+    };
+};
 export declare enum LINE_HEIGHT {
     H1 = "29px",
     H1_MOBILE = "28px",

package/dist/types/shared/momentDatePicker.d.ts

@@ -0,0 +1,34 @@
+import type { Moment } from 'moment';
+declare const MomentDatePicker: (<ValueType = Moment>(props: import("antd/es/date-picker/generatePicker/interface").PickerPropsWithMultiple<Moment, import("antd/es/date-picker/generatePicker").PickerProps<Moment>, ValueType>) => React.ReactElement) & {
+    displayName?: string;
+} & {
+    displayName?: string;
+    WeekPicker: (<ValueType = Moment>(props: import("antd/es/date-picker/generatePicker/interface").PickerPropsWithMultiple<Moment, Omit<import("antd/es/date-picker/generatePicker").PickerProps<Moment>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    MonthPicker: (<ValueType = Moment>(props: import("antd/es/date-picker/generatePicker/interface").PickerPropsWithMultiple<Moment, Omit<import("antd/es/date-picker/generatePicker").PickerProps<Moment>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    YearPicker: (<ValueType = Moment>(props: import("antd/es/date-picker/generatePicker/interface").PickerPropsWithMultiple<Moment, Omit<import("antd/es/date-picker/generatePicker").PickerProps<Moment>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    RangePicker: import("react").ForwardRefExoticComponent<Omit<import("rc-picker").RangePickerProps<Moment>, "locale" | "generateConfig" | "hideHeader"> & {
+        locale?: import("antd/es/date-picker/generatePicker").PickerLocale;
+        size?: import("antd/es/button").ButtonSize;
+        placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
+        bordered?: boolean;
+        status?: import("antd/es/_util/statusUtils").InputStatus;
+        variant?: import("antd/es/config-provider").Variant;
+        dropdownClassName?: string;
+        popupClassName?: string;
+        rootClassName?: string;
+        popupStyle?: React.CSSProperties;
+    } & import("react").RefAttributes<import("rc-picker").PickerRef>>;
+    TimePicker: (<ValueType = Moment>(props: import("antd/es/date-picker/generatePicker/interface").PickerPropsWithMultiple<Moment, Omit<import("antd/es/date-picker/generatePicker/interface").GenericTimePickerProps<Moment>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    QuarterPicker: (<ValueType = Moment>(props: import("antd/es/date-picker/generatePicker/interface").PickerPropsWithMultiple<Moment, Omit<import("antd/es/date-picker/generatePicker").PickerProps<Moment>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+};
+export default MomentDatePicker;