@selfdecode/sd-component-library 2.45.0 → 2.45.1

package/lib/components/custom-scrollbar-box/interfaces.d.ts

@@ -49,4 +49,8 @@ export interface CustomScrollbarBoxProps {
      * Whether scrollbar should appear only on hover.
      */
     makeVisibleOnHoverOnly?: boolean;
+    /**
+     * Hover with of the scroll bar.
+     */
+    hoverScrollbarWidth?: string | string[];
 }

package/lib/components/dividers/divider/interfaces.d.ts

@@ -1,4 +1,5 @@
 import { BaseComponentProps } from "../../interfaces";
+import { SxProps } from "rebass";
 export interface DividerProps extends BaseComponentProps {
     /**
      * The divider's width
@@ -16,4 +17,8 @@ export interface DividerProps extends BaseComponentProps {
      * The opacity of the divider
      */
     opacity?: string;
+    /**
+     * Prop to customize divider.
+     */
+    sx?: SxProps["sx"];
 }

package/lib/components/dividers/horizontal-divider/interfaces.d.ts

@@ -1,2 +1,2 @@
 import { DividerProps } from "../divider";
-export declare type HorizontalDividerProps = Pick<DividerProps, "height" | "width" | "color" | "m" | "mt" | "mr" | "mb" | "ml" | "opacity">;
+export declare type HorizontalDividerProps = Omit<DividerProps, "variant">;

package/lib/components/dividers/vertical-divider/interfaces.d.ts

@@ -1,2 +1,2 @@
 import { DividerProps } from "../divider";
-export declare type VerticalDividerProps = Pick<DividerProps, "height" | "width" | "color" | "m" | "mt" | "mr" | "mb" | "ml">;
+export declare type VerticalDividerProps = Omit<DividerProps, "variant">;

package/lib/components/inputs/multi-row-secondary-text-input/interfaces.d.ts

@@ -2,6 +2,9 @@ import { SecondaryTextInputProps } from "../secondary-text-input";
 export interface MultiRowSecondaryTextInputProps extends Omit<SecondaryTextInputProps, "value" | "onChange"> {
     value: string;
     onChange: (value: string) => void;
+    fontSize?: number;
+    fontWeight?: number;
     rows?: number;
     lineHeight?: number;
+    underlineColor?: string;
 }

package/lib/components/inputs/search-autocomplete-input/index.d.ts

@@ -0,0 +1 @@
+export { SearchAutocompleteInput } from "./search-autocomplete-input";

package/lib/components/inputs/search-autocomplete-input/interfaces.d.ts

@@ -0,0 +1,26 @@
+import { SxProps } from "rebass";
+import { SecondaryTextInputProps } from "../secondary-text-input";
+export interface SearchAutocompleteInputProps<T extends {
+    id: string;
+} = {
+    id: string;
+}> extends Omit<SecondaryTextInputProps, "sx"> {
+    searchValue: string;
+    onSearch: (newSearchValue: string) => void;
+    onSelect: (newValue: SearchAutocompleteOption<T>) => void;
+    hasSelection: boolean;
+    results: SearchAutocompleteOption<T>[];
+    rowsDisplayed?: number;
+    rowHeight?: number;
+    containerSx?: SxProps["sx"];
+    inputSx?: SxProps["sx"];
+}
+export interface SearchAutocompleteOption<T extends {
+    id: string;
+} = {
+    id: string;
+}> {
+    id: string;
+    title: string;
+    value: T;
+}

package/lib/components/inputs/search-autocomplete-input/partials/search-autocomplete-results-box/index.d.ts

@@ -0,0 +1 @@
+export { SearchAutocompleteResultsBox } from "./search-autocomplete-results-box";

package/lib/components/inputs/search-autocomplete-input/partials/search-autocomplete-results-box/interfaces.d.ts

@@ -0,0 +1,11 @@
+import { SearchAutocompleteOption } from "../../interfaces";
+export interface SearchAutocompleteResultsBoxProps<T extends {
+    id: string;
+} = {
+    id: string;
+}> {
+    results: SearchAutocompleteOption<T>[];
+    onSelect: (newValue: SearchAutocompleteOption<T>) => void;
+    rowsDisplayed: number;
+    rowHeight: number;
+}

package/lib/components/inputs/search-autocomplete-input/partials/search-autocomplete-results-box/search-autocomplete-results-box.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SearchAutocompleteResultsBoxProps as Props } from "./interfaces";
+export declare const SearchAutocompleteResultsBox: <T extends {
+    id: string;
+} = {
+    id: string;
+}>(props: Props<T>) => JSX.Element;

package/lib/components/inputs/search-autocomplete-input/partials/search-autocomplete-row/index.d.ts

@@ -0,0 +1 @@
+export { SearchAutocompleteRow } from "./search-autocomplete-row";

package/lib/components/inputs/search-autocomplete-input/partials/search-autocomplete-row/interfaces.d.ts

@@ -0,0 +1,9 @@
+export interface SearchAutocompleteRowProps<T extends {
+    id: string;
+} = {
+    id: string;
+}> {
+    onClick: () => void;
+    title: string;
+    height: number;
+}

package/lib/components/inputs/search-autocomplete-input/partials/search-autocomplete-row/search-autocomplete-row.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SearchAutocompleteRowProps as Props } from "./interfaces";
+export declare const SearchAutocompleteRow: <T extends {
+    id: string;
+} = {
+    id: string;
+}>(props: Props<T>) => JSX.Element;

package/lib/components/inputs/search-autocomplete-input/search-autocomplete-input.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SearchAutocompleteInputProps as Props } from "./interfaces";
+export declare const SearchAutocompleteInput: <T extends {
+    id: string;
+} = {
+    id: string;
+}>(props: Props<T>) => JSX.Element;

package/lib/components/inputs/secondary-text-input/interfaces.d.ts

@@ -1,9 +1,10 @@
 import { ResponsiveTextV2Props } from "../../texts/responsive-text-v2";
 import { PrimaryTextInputProps } from "../primary-text-input";
+import { SxProps } from "rebass";
 /**
  * Defines the SecondaryTextInput component's properties.
  */
-export declare type SecondaryTextInputProps = Pick<PrimaryTextInputProps, "onChange" | "value" | "type" | "padding" | "placeholder" | "errorMessage" | "hideErrorText" | "focusInput" | "textAlign" | "width" | "m" | "mt" | "mr" | "mb" | "ml" | "onFocus" | "autoFocus" | "errorBackground" | "disabled"> & {
+export declare type SecondaryTextInputProps = Pick<PrimaryTextInputProps, "onChange" | "value" | "type" | "padding" | "placeholder" | "errorMessage" | "hideErrorText" | "focusInput" | "textAlign" | "width" | "m" | "mt" | "mr" | "mb" | "ml" | "onFocus" | "autoFocus" | "errorBackground" | "disabled" | "sx"> & {
     /**
      * The label for the text input
      */
@@ -36,4 +37,8 @@ export declare type SecondaryTextInputProps = Pick<PrimaryTextInputProps, "onCha
      * Default value: ["0px"].
      */
     labelMargin?: string | string[];
+    /**
+     * Padding of the input element.
+     */
+    inputSx?: SxProps["sx"];
 };

package/lib/components/meters/outline-meter/interfaces.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 export declare type OutlineMeterPosition = number;
 export interface OutlineMeterProps {
     /**
@@ -106,6 +107,10 @@ export interface OutlineMeterProps {
      * Border radius of the mask.
      */
     maskBorderRadius?: number;
+    /**
+     * Cursor for the gauge.
+     */
+    cursor?: CSSProperties["cursor"];
 }
 export declare type SmallOutlineMeterProps = OutlineMeterProps;
 export interface OutlineMeterRangeConfig {

package/lib/components/meters/smiley-meter-v2/interfaces.d.ts

@@ -1,5 +1,5 @@
 import { OutlineMeterProps } from "../outline-meter";
-export interface SmileyMeterV2Props extends Pick<OutlineMeterProps, "width" | "height" | "value" | "gaugeWidth" | "arc" | "marginTop" | "marginX" | "pointStrokeWidth" | "innerPointRadius" | "distanceBetweenRanges" | "distanceFromLabelToRanges" | "counterClockWise" | "maskBorderRadius"> {
+export interface SmileyMeterV2Props extends Pick<OutlineMeterProps, "width" | "height" | "value" | "gaugeWidth" | "arc" | "marginTop" | "marginX" | "pointStrokeWidth" | "innerPointRadius" | "distanceBetweenRanges" | "distanceFromLabelToRanges" | "counterClockWise" | "maskBorderRadius" | "cursor"> {
     /**
      * Colors for smiley corresponding to state.
      */

package/lib/components/modals/modal/interfaces.d.ts

@@ -32,7 +32,7 @@ export interface ModalProps {
     /**
      * Width property of the modal.
      */
-    width?: Array<string>;
+    width?: string | string[];
     /**
      * Boolean to open up the pop up.
      */
@@ -40,19 +40,19 @@ export interface ModalProps {
     /**
      * Optional change to the container's borderRadius. Default value: ["5px"]
      */
-    borderRadius?: Array<string>;
+    borderRadius?: string | string[];
     /**
      * Optional change for the default padding. This padding is
      * for the outer container, and not inside the popup itself.
      * Default value: ["30px", "150px"],
      */
-    outerPadding?: Array<string>;
+    outerPadding?: string | string[];
     /**
      * Optional change for the default inner padding. This adds padding
      * for the components inside the outer popup container.
      * Default value: ["40px 20px", "50px"]
      */
-    innerPadding?: Array<string>;
+    innerPadding?: string | string[];
     /**
      * Optional ability to close the modal when clicking outside the content
      * False by default
@@ -69,4 +69,8 @@ export interface ModalProps {
      * Additional props for the modal outer container.
      */
     containerSx?: SxProps["sx"];
+    /**
+     * Additional props for the modal inner container.
+     */
+    innerSx?: SxProps["sx"];
 }

package/lib/components/modals/primary-modal/interfaces.d.ts

@@ -8,8 +8,4 @@ export interface PrimaryModalProps extends ModalProps {
      * text content of the modal
      */
     text: string;
-    /**
-     * Display close button
-     */
-    showXIcon?: boolean;
 }

package/lib/components/selectors/secondary-custom-selector/index.d.ts

@@ -0,0 +1 @@
+export { SecondaryCustomSelector } from "./secondary-custom-selector";

package/lib/components/selectors/secondary-custom-selector/interfaces.d.ts

@@ -0,0 +1,6 @@
+import { SelectorV2Props } from "../selector-v2";
+import { SxProps } from "rebass";
+export interface SecondaryCustomSelectorProps<T extends string = string> extends Pick<SelectorV2Props<T>, "options" | "value" | "onChange" | "width" | "variant"> {
+    label: string;
+    containerSx?: SxProps["sx"];
+}

package/lib/components/selectors/secondary-custom-selector/partials/secondary-custom-selector-option-row/index.d.ts

@@ -0,0 +1 @@
+export { SecondaryCustomSelectorOptionRow } from "./secondary-custom-selector-option-row";

package/lib/components/selectors/secondary-custom-selector/partials/secondary-custom-selector-option-row/interfaces.d.ts

@@ -0,0 +1,5 @@
+export interface SecondaryCustomSelectorOptionRowProps {
+    title: string;
+    onClick: () => void;
+    isLast?: boolean;
+}

package/lib/components/selectors/secondary-custom-selector/partials/secondary-custom-selector-option-row/secondary-custom-selector-option-row.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SecondaryCustomSelectorOptionRowProps as Props } from "./interfaces";
+export declare const SecondaryCustomSelectorOptionRow: React.FC<Props>;

package/lib/components/selectors/secondary-custom-selector/partials/secondary-custom-selector-options-box/index.d.ts

@@ -0,0 +1 @@
+export { SecondaryCustomSelectorOptionsBox } from "./secondary-custom-selector-options-box";

package/lib/components/selectors/secondary-custom-selector/partials/secondary-custom-selector-options-box/interfaces.d.ts

@@ -0,0 +1,5 @@
+import { SelectorOptionV2 } from "../../../selector-v2";
+export interface SecondaryCustomSelectorOptionsBoxProps<T extends string = string> {
+    options: SelectorOptionV2<T>[];
+    onSelect: (option: SelectorOptionV2<T>) => void;
+}

package/lib/components/selectors/secondary-custom-selector/partials/secondary-custom-selector-options-box/secondary-custom-selector-options-box.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SecondaryCustomSelectorOptionsBoxProps as Props } from "./interfaces";
+export declare const SecondaryCustomSelectorOptionsBox: <T extends string = string>(props: Props<T>) => JSX.Element;

package/lib/components/selectors/secondary-custom-selector/secondary-custom-selector.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SecondaryCustomSelectorProps as Props } from "./interfaces";
+export declare const SecondaryCustomSelector: <T extends string = string>(props: Props<T>) => JSX.Element | null;

package/lib/components/selectors/tertiary-custom-selector/index.d.ts

@@ -0,0 +1 @@
+export { TertiaryCustomSelector } from "./tertiary-custom-selector";

package/lib/components/selectors/tertiary-custom-selector/interfaces.d.ts

@@ -0,0 +1,3 @@
+import { SecondaryCustomSelectorProps } from "../secondary-custom-selector/interfaces";
+export interface TertiaryCustomSelectorProps<T extends string = string> extends Omit<SecondaryCustomSelectorProps, "variant"> {
+}

package/lib/components/selectors/tertiary-custom-selector/tertiary-custom-selector.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { TertiaryCustomSelectorProps as Props } from "./interfaces";
+export declare const TertiaryCustomSelector: React.FC<Props>;

package/lib/components/tabs/tab-bar-v2/interfaces.d.ts

@@ -39,6 +39,11 @@ export interface TabBarV2Props {
      * Font size of the tab text.
      */
     fontSize?: number;
+    /**
+     * Tab offsets. Padding = borderRadius + offset.
+     */
+    tabTopAdditionalOffset?: number;
+    tabBottomAdditionalOffset?: number;
 }
 export interface TabV2Config {
     id: string;

package/lib/components/tabs/tab-bar-v2/partials/tab-v2/interfaces.d.ts

@@ -1,5 +1,5 @@
 import { TabBarV2Props, TabV2Config } from "../../interfaces";
-export interface TabV2Props extends TabV2Config, Required<Omit<TabBarV2Props, "tabs" | "maxWidth" | "paddingX" | "selectedTabId" | "tabPx">> {
+export interface TabV2Props extends TabV2Config, Required<Omit<TabBarV2Props, "tabs" | "maxWidth" | "paddingX" | "selectedTabId" | "tabPx" | "tabTopAdditionalOffset" | "tabBottomAdditionalOffset">> {
     /**
      * Index of the selected tab.
      */
@@ -25,4 +25,6 @@ export interface TabV2Props extends TabV2Config, Required<Omit<TabBarV2Props, "t
      */
     px?: string | string[];
     observer?: IntersectionObserver;
+    topAdditionalOffset: number;
+    bottomAdditionalOffset: number;
 }

package/lib/components/texts/base-text-v2/interfaces.d.ts

@@ -3,4 +3,8 @@ import { TextProps } from "rebass";
 export interface BaseTextV2Props extends Omit<TextProps, "color"> {
     color?: string | string[];
     textTransform?: React.CSSProperties["textTransform"];
+    /**
+     * Whether to apply "no-translate" class to text block.
+     */
+    dontTranslate?: boolean;
 }

package/lib/components/tooltips/base-tooltip/interfaces.d.ts

@@ -7,7 +7,7 @@ export interface BaseTooltipProps extends BaseComponentProps {
     /**
      * Text to be displayed in the tooltip.
      */
-    tooltipText: string;
+    tooltipText: string | React.ReactNode;
     /**
      * Color of text to be displayed in the tooltip.
      */

package/lib/components/tooltips/primary-info-tooltip/interfaces.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BaseInfoTooltipProps } from "../base-info-tooltip";
 /**
  * Additional props we want to add
@@ -7,6 +8,6 @@ export interface PrimaryInfoTooltipProps extends SameProps {
     /**
      * Only this prop is required
      */
-    tooltipText: string;
+    tooltipText: string | React.ReactNode;
 }
 export {};

package/lib/components/tooltips/star-tooltip/partials/toltip-text-modal/interfaces.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 export interface TooltipTextModalProps {
     isOpen: boolean;
     onClose: () => void;
-    text: string;
+    text: string | React.ReactNode;
 }

package/lib/core/theme.d.ts

@@ -61,6 +61,13 @@ declare const _default: {
                 combined: {
                     display: string;
                 };
+                customSecondary: {
+                    gap: string;
+                    gridTemplateColumns: string;
+                };
+                customTertiary: {
+                    gap: string;
+                };
             };
         };
         _dropdowns: {
@@ -264,7 +271,6 @@ declare const _default: {
             };
             selectors: {
                 secondary: {
-                    fontFamily: string;
                     fontSize: string[];
                     fontWeight: number;
                     letterSpacing: number;
@@ -272,7 +278,6 @@ declare const _default: {
                     color: string;
                 };
                 secondaryError: {
-                    fontFamily: string;
                     width: string;
                     fontSize: string[];
                     fontWeight: number;
@@ -282,7 +287,6 @@ declare const _default: {
                     color: string;
                 };
                 tertiary: {
-                    fontFamily: string;
                     width: string;
                     color: string;
                     fontSize: string[];
@@ -292,7 +296,6 @@ declare const _default: {
                     marginBottom: string[];
                 };
                 tertiaryError: {
-                    fontFamily: string;
                     width: string;
                     fontSize: string[];
                     fontWeight: number;
@@ -302,13 +305,11 @@ declare const _default: {
                     color: string;
                 };
                 compact: {
-                    fontFamily: string;
                     width: string;
                     color: string;
                     fontSize: string[];
                 };
                 secondaryV2: {
-                    fontFamily: string;
                     color: string;
                     fontSize: string;
                 };
@@ -317,7 +318,6 @@ declare const _default: {
                     left: string;
                     top: string;
                     height: string;
-                    fontFamily: string;
                     fontWeight: number;
                     color: string;
                     fontSize: string;
@@ -326,6 +326,19 @@ declare const _default: {
                     width: string;
                     bg: string;
                     px: string;
+                    zIndex: number;
+                };
+                customSecondary: {
+                    fontSize: string;
+                    fontWeight: number;
+                    color: string;
+                };
+                customTertiary: {
+                    fontSize: string;
+                    fontWeight: number;
+                    letterSpacing: string;
+                    textTransform: string;
+                    color: string;
                 };
             };
             iconButton: {

package/lib/index.d.ts

@@ -86,6 +86,8 @@ export declare type BoxyNumberInputProps = BaseBoxyNumberInputProps;
 export { SearchInput } from "./components/inputs/search-input";
 export { AutocompleteInput } from "./components/inputs/autocomplete-input";
 export type { AutocompleteInputProps, AutocompleteOption, } from "./components/inputs/autocomplete-input/interfaces";
+export { SearchAutocompleteInput } from "./components/inputs/search-autocomplete-input";
+export type { SearchAutocompleteOption } from "./components/inputs/search-autocomplete-input/interfaces";
 export { PrimaryDateInput } from "./components/inputs/date-inputs/primary-date-input";
 export { OutlinedDateInput } from "./components/inputs/date-inputs/outlined-date-input";
 export { BaseDateRangeInput } from "./components/inputs/date-inputs/base-date-range-input";
@@ -137,6 +139,8 @@ export { SecondarySelector } from "./components/selectors/secondary-selector";
 export { CompactPrimarySelector } from "./components/selectors/compact-primary-selector";
 export declare type CompactPrimarySelectorProps<T extends string = string> = BaseCompactSelectorProps<T>;
 export { CustomSelector } from "./components/selectors/custom-selector";
+export { SecondaryCustomSelector } from "./components/selectors/secondary-custom-selector";
+export { TertiaryCustomSelector } from "./components/selectors/tertiary-custom-selector";
 export { SelectorV2 } from "./components/selectors/selector-v2";
 export type { SelectorV2Props, SelectorOptionV2, } from "./components/selectors/selector-v2";
 export { TertiarySelectorV2 } from "./components/selectors/tertiary-selector-v2";