@selfdecode/sd-component-library 3.1.0 → 4.0.0

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

@@ -1,3 +1,4 @@
+import { SxProps } from "rebass";
 import { TabProps } from "./partials/tab/interfaces";
 /**
  * Configuration describing each tab
@@ -6,7 +7,7 @@ export declare type TabConfig<T> = Pick<TabProps<T>, "id" | "label" | "secondary
 /**
  * Props for TabBar
  */
-export interface TabBarProps<T> {
+export interface TabBarProps<T> extends Pick<TabProps<T>, "labelSx" | "secondaryTextSx"> {
     /**
      * Array containing configuration for each tab.
      */
@@ -49,4 +50,10 @@ export interface TabBarProps<T> {
      * Max width of each tab.
      */
     tabMaxWidth?: string | string[];
+    /**
+     * Whether component should be scrollable.
+     * Otherwise, buttons for the manual scrolling will appear .
+     */
+    scrollable?: boolean;
+    containerSx?: SxProps["sx"];
 }

package/lib/components/tabs/tab-bar/partials/arrow-button/arrow-button.d.ts

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

package/lib/components/tabs/tab-bar/partials/arrow-button/index.d.ts

@@ -0,0 +1 @@
+export { ArrowButton } from "./arrow-button";

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

@@ -0,0 +1,5 @@
+export interface ArrowButtonProps {
+    width: number | string | string[];
+    onClick: () => void;
+    direction: "left" | "right";
+}

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

@@ -0,0 +1,3 @@
+export * from "./arrow-button";
+export * from "./mask";
+export * from "./tab";

package/lib/components/tabs/tab-bar/partials/mask/index.d.ts

@@ -0,0 +1 @@
+export { Mask } from "./mask";

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

@@ -0,0 +1,5 @@
+export interface MaskProps {
+    width: number | string | string[];
+    offset: number | string | string[];
+    direction: "left" | "right";
+}

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

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

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { SxProps } from "rebass";
 export interface TabProps<T> {
     /**
      * Tab width.
@@ -12,10 +13,12 @@ export interface TabProps<T> {
      * This is the text to be displayed on the tab
      */
     label: string | React.ReactNode;
+    labelSx?: SxProps["sx"];
     /**
      * Secondary text to be displayed right after label.
      */
     secondaryText?: string;
+    secondaryTextSx?: SxProps["sx"];
     /**
      * Icon to be displayed right after label.
      */

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

@@ -5,4 +5,4 @@ export declare const Ribbon: ({ active, activeColor, color, }: {
     activeColor?: string | undefined;
     color?: string | undefined;
 }) => JSX.Element;
-export declare function Tab<T>({ width, height, label, secondaryText, icon, id, onClick, selected, activeColor, color, tabPadding, bg, activeBg, activeRibbonColor, borderRadius, tabHeaderComponent, elementId, maxWidth, }: TabProps<T>): JSX.Element;
+export declare function Tab<T>({ width, height, label, secondaryText, icon, id, onClick, selected, activeColor, color, tabPadding, bg, activeBg, activeRibbonColor, borderRadius, tabHeaderComponent, elementId, maxWidth, labelSx, secondaryTextSx, }: TabProps<T>): JSX.Element;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { TabBarProps } from "./interfaces";
-export declare function TabBar<T>({ tabs, selectedTabId, onTabSelect, activeColor, color, displayBorder, tabPadding, tabWidth, tabHeight, tabMaxWidth, }: TabBarProps<T>): JSX.Element;
+export declare function TabBar<T>({ tabs, selectedTabId, onTabSelect, activeColor, color, displayBorder, tabPadding, tabWidth, tabHeight, tabMaxWidth, labelSx, secondaryTextSx, scrollable, containerSx, }: TabBarProps<T>): JSX.Element;

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { TextProps } from "rebass";
-export interface BaseTextV2Props extends Omit<TextProps, "color"> {
+import { SDWeight } from "../responsive-text/interfaces";
+export interface BaseTextV2Props extends Omit<TextProps, "color" | "fontWeight"> {
     color?: string | string[];
     textTransform?: React.CSSProperties["textTransform"];
+    fontWeight?: TextProps["fontWeight"] | SDWeight;
     /**
      * Whether to apply "no-translate" class to text block.
      */

package/lib/components/texts/responsive-text/index.d.ts

@@ -1,2 +1,2 @@
-export type { ResponsiveTextProps, SDFontSizeWeight } from "./interfaces";
+export * from "./interfaces";
 export { ResponsiveText } from "./responsive-text";

package/lib/components/texts/responsive-text/interfaces.d.ts

@@ -3,10 +3,15 @@ import { BaseTextProps } from "../base-text";
  * Props we want from the base text.
  */
 declare type PropsFromBaseText = Pick<BaseTextProps, "children" | "color" | "display" | "cursor" | "textAlign" | "textDecoration" | "textTransform" | "letterSpacing" | "lineHeight" | "backgroundColor" | "width" | "height" | "onClick" | "m" | "mt" | "mr" | "mb" | "ml" | "dontTranslate">;
+export declare const fontWeights: readonly ["semi-bold", "regular", "bold"];
+export declare type SDWeight = typeof fontWeights[number];
+export declare const SD_WEIGHT_TO_WEIGHT_MAP: {
+    [key in SDWeight]: number;
+};
 /**
  * SelfDecode's combinations of fontSize and fontWeight.
  */
-export declare type SDFontSizeWeight = [number, "semi-bold" | "regular" | "bold"];
+export declare type SDFontSizeWeight = [number, SDWeight];
 export interface ResponsiveTextProps extends PropsFromBaseText {
     fontSizeWeight: SDFontSizeWeight[] | SDFontSizeWeight;
     /**

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

@@ -1,5 +1,5 @@
 import { BaseTextV2Props } from "../base-text-v2";
-import { SDFontSizeWeight } from "../responsive-text/interfaces";
+import { SDFontSizeWeight } from "../responsive-text";
 export interface ResponsiveTextV2Props extends Omit<BaseTextV2Props, "variant"> {
     fontSizeWeight: SDFontSizeWeight[] | SDFontSizeWeight;
 }

package/lib/components/tooltips/tooltip-with-pointer/interfaces.d.ts

@@ -26,4 +26,9 @@ export interface TooltipWithPointerProps {
      * Whether to show mobile version of the tooltip.
      */
     showMobileVersion?: boolean;
+    /**
+     * Whether to prevent default behavior on tooltip click.
+     */
+    stopPropagation?: boolean;
+    zIndex?: number;
 }

package/lib/core/custom-hooks.d.ts

@@ -81,4 +81,4 @@ export declare function useBoundingClientRect<T extends Element = HTMLElement>(s
     ref: RefObject<T>;
     rect: DOMRect | undefined;
 };
-export declare const useBodyScrollLock: (target: HTMLElement | null, shouldEnable?: boolean) => void;
+export declare const useBodyScrollLock: <T extends HTMLElement = HTMLElement>(target: T | null, shouldEnable?: boolean) => void;

package/lib/core/functions.d.ts

@@ -0,0 +1,7 @@
+export declare const isIOS: () => boolean;
+export declare const isTouchScreen: () => boolean;
+export declare const getResponsiveClick: (callback: () => void) => {
+    shouldUseTouch: boolean;
+    onClick: (() => void) | undefined;
+    onTouchStart: (() => void) | undefined;
+};

package/lib/core/theme.d.ts

@@ -247,6 +247,27 @@ declare const _default: {
                         fontWeight: string;
                     };
                 };
+                clientPortal: {
+                    fontFamily: string;
+                    color: string;
+                    fontSize: number;
+                    borderStyle: string;
+                    outline: string;
+                    borderBottomStyle: string;
+                    borderBottomWidth: string;
+                    borderBottomColor: string;
+                    py: string;
+                    px: number;
+                    ":focus": {
+                        outline: string;
+                        borderStyle: string;
+                        borderBottomStyle: string;
+                        borderColor: string;
+                    };
+                    "::placeholder": {
+                        color: string;
+                    };
+                };
             };
         };
         _labels: {
@@ -271,6 +292,12 @@ declare const _default: {
                     marginBottom: string[];
                     color: string;
                 };
+                clientPortal: {
+                    fontSize: number;
+                    fontWeight: number;
+                    textTransform: string;
+                    letterSpacing: string;
+                };
             };
             selectors: {
                 secondary: {

package/lib/e986409f719ff9bf4d159ad2929c4590.svg

@@ -0,0 +1,13 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="15"
+  height="16.243"
+  viewBox="0 0 15 16.243"
+>
+  <g id="arrow_right" transform="translate(0.5 -9.879)">
+    <path id="Path_86" data-name="Path 86" d="M18,24l6-6-6-6" transform="translate(-11)" fill="none" stroke="#4568f9"
+          stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+    <path id="Path_87" data-name="Path 87" d="M12,18H24" transform="translate(-11)" fill="none" stroke="#4568f9"
+          stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  </g>
+</svg>