@selfdecode/sd-component-library 2.42.23 → 2.42.27

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

@@ -0,0 +1,31 @@
+import { OutlineMeterRangeConfig } from "../../interfaces";
+import { OutlineMeterRangeProps } from "../outline-meter-range/interfaces";
+export interface OutlineMeterNeedleProps extends Pick<OutlineMeterRangeProps, "arc" | "diameter" | "distanceBetweenRanges" | "gaugeWidth" | "value"> {
+    ranges: OutlineMeterRangeConfig[];
+    value: number;
+    /**
+     * If true, needle will point onto the range middle point.
+     * Otherwise needle will point exactly on the value point.
+     */
+    useSegmentedBehavior?: boolean;
+    /**
+     * Needle circle stroke width.
+     */
+    innerCircleStrokeWidth: number;
+    /**
+     * Needle circle radius.
+     */
+    innerCircleRadius: number;
+    /**
+     * Distance from range edge to needle.
+     */
+    distanceFromRange: number;
+    /**
+     * Thickness of the needle pointer.
+     */
+    needleWidth: number;
+    /**
+     * Needle color.
+     */
+    needleColor?: string;
+}

package/lib/components/meters/outline-meter/partials/outline-meter-needle/outline-meter-needle.d.ts

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

package/lib/components/meters/outline-meter/partials/outline-meter-range/index.d.ts

@@ -0,0 +1 @@
+export { OutlineMeterRange } from "./outline-meter-range";

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

@@ -0,0 +1,21 @@
+import { OutlineMeterLabelPosition, OutlineMeterProps, OutlineMeterRangeConfig } from "../../interfaces";
+import { OutlineMeterLabelPointerProps } from "../outline-meter-label-pointer/interfaces";
+export interface OutlineMeterRangeProps extends Required<Pick<OutlineMeterProps, "value" | "arc" | "distanceBetweenRanges" | "gaugeWidth" | "innerPointRadius" | "pointStrokeWidth" | "hideLabels" | "counterClockWise">>, OutlineMeterRangeConfig, Pick<OutlineMeterLabelPointerProps, "distanceFromRanges"> {
+    segmented?: boolean;
+    /**
+     * Meter diameter.
+     */
+    diameter: number;
+    /**
+     * Total number of ranges.
+     */
+    totalRanges: number;
+    /**
+     * Index of the current range.
+     */
+    idx: number;
+    /**
+     * Force position of the label for range.
+     */
+    labelPosition?: OutlineMeterLabelPosition;
+}

package/lib/components/meters/outline-meter/partials/outline-meter-range/outline-meter-range.d.ts

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

package/lib/components/meters/outline-meter/partials/outline-meter-scale/index.d.ts

@@ -0,0 +1 @@
+export { OutlineMeterScale } from "./outline-meter-scale";

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

@@ -0,0 +1,8 @@
+import { OutlineMeterRangeProps } from "../outline-meter-range/interfaces";
+import { OutlineMeterProps } from "../../interfaces";
+export interface OutlineMeterScaleProps extends Pick<OutlineMeterRangeProps, "diameter">, Required<Pick<OutlineMeterProps, "arc" | "dashHeight" | "dashWidth" | "numberOfDashes" | "gaugeWidth" | "distanceFromRangesToScale">> {
+    /**
+     * Dash color.
+     */
+    color?: string;
+}

package/lib/components/meters/outline-meter/partials/outline-meter-scale/outline-meter-scale.d.ts

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

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

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

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

@@ -0,0 +1,27 @@
+import { Bounds } from "./interfaces";
+export declare const degToRad: (deg: number) => number;
+/**
+ * Returns coordinates of the point on the arc
+ * @param r Circle radius.
+ * @param alpha Angle between horizontal axis and radius to the point on the arc.
+ */
+export declare const getCoordinateForArc: (r: number, alpha: number) => {
+    x: number;
+    y: number;
+};
+/**
+ * Returns x coordinate for the point located on the radius to the initial point on the arc.
+ * @param x X coordinate of the point on the arc.
+ * @param alpha Angle between horizontal axis and radius to the point on the arc.
+ * @param delta Distance between points
+ */
+export declare const getInnerX: (x: number, alpha: number, delta: number) => number;
+/**
+ * Returns y coordinate for the point located on the radius to the initial point on the arc.
+ * @param y Y coordinate of the point on the arc.
+ * @param alpha Angle between horizontal axis and radius to the point on the arc.
+ * @param delta Distance between points
+ */
+export declare const getInnerY: (y: number, alpha: number, delta: number) => number;
+export declare const isValueInRange: (value: number, start: number, end: number, bounds: Bounds, ccw?: boolean | undefined) => boolean;
+export declare const flipBounds: (bounds: Bounds) => Bounds;

package/lib/components/meters/smiley-meter-v2/assets/happy-smiley.svg

@@ -0,0 +1,19 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 29 29"
+>
+  <g>
+    <path
+      d="M184.613,290.162a1.819,1.819,0,0,0-2.387.95,11.709,11.709,0,0,1-21.125,0,1.817,1.817,0,0,0-3.358,1.391h-.031a15.369,15.369,0,0,0,27.85.046A1.816,1.816,0,0,0,184.613,290.162Z"
+      transform="translate(-157.237 -273.134)"
+    />
+    <path
+      d="M172.046,280.871a5.294,5.294,0,0,0-4.7,5.83,1.512,1.512,0,0,0,3.025,0,2.269,2.269,0,1,1,4.478,0,1.513,1.513,0,0,0,3.026,0,5.295,5.295,0,0,0-5.83-5.83Z"
+      transform="translate(-149.061 -280.841)"
+    />
+    <path
+      d="M158.949,288.214a1.512,1.512,0,0,0,1.512-1.512,2.269,2.269,0,1,1,4.478,0,1.513,1.513,0,0,0,3.027,0,5.545,5.545,0,0,0,0-1.131,5.3,5.3,0,0,0-10.529,1.131A1.513,1.513,0,0,0,158.949,288.214Z"
+      transform="translate(-157.406 -280.841)"
+    />
+  </g>
+</svg>

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

@@ -0,0 +1,2 @@
+export { ReactComponent as HappySmileyIcon } from "./happy-smiley.svg";
+export { ReactComponent as SadSmileyIcon } from "./sad-smiley.svg";

package/lib/components/meters/smiley-meter-v2/assets/sad-smiley.svg

@@ -0,0 +1,19 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 29 29"
+>
+  <g>
+    <path
+      d="M587.787,289.994a14.846,14.846,0,0,0-13.963,8.888h.031a1.817,1.817,0,0,0,3.358,1.391,11.709,11.709,0,0,1,21.125,0,1.816,1.816,0,1,0,3.336-1.437A14.981,14.981,0,0,0,587.787,289.994Z"
+      transform="translate(-573.349 -273.133)"
+    />
+    <path
+      d="M592.474,280.84a1.514,1.514,0,0,0-1.512,1.514,2.269,2.269,0,1,1-4.478,0,1.512,1.512,0,1,0-3.025,0,5.295,5.295,0,1,0,10.53,0A1.514,1.514,0,0,0,592.474,280.84Z"
+      transform="translate(-565.173 -280.84)"
+    />
+    <path
+      d="M578.248,288.183a5.294,5.294,0,0,0,5.83-5.828,1.513,1.513,0,1,0-3.027,0,2.269,2.269,0,1,1-4.478,0,1.512,1.512,0,1,0-3.025,0A5.293,5.293,0,0,0,578.248,288.183Z"
+      transform="translate(-573.518 -280.84)"
+    />
+  </g>
+</svg>

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

@@ -0,0 +1,16 @@
+/**
+ * Large Smiley meter v2 default values.
+ */
+export declare const defaultDistanceBetweenRanges = 10;
+export declare const defaultSmileyWidth = 80;
+export declare const defaultSmileyTopOffset = 80;
+/**
+ * Small Smiley meter v2 default values.
+ */
+export declare const smallSmileyMeterWidth = 100;
+export declare const smallSmileyMeterHeight = 87;
+export declare const smallSmileyWidth = 30;
+export declare const smallSmileyTopOffset = 35;
+export declare const smallSmileyInnerPointStrokeWidth = 3;
+export declare const smallSmileyInnerPointRadius = 2;
+export declare const smallSmileyGaugeWidth = 4;

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

@@ -0,0 +1,2 @@
+export { SmileyMeterV2 } from "./smiley-meter-v2";
+export { SmallSmileyMeterV2 } from "./small-smiley-meter-v2";

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

@@ -0,0 +1,28 @@
+import { OutlineMeterProps } from "../outline-meter";
+export interface SmileyMeterV2Props extends Pick<OutlineMeterProps, "width" | "height" | "value" | "gaugeWidth" | "arc" | "marginTop" | "marginX" | "pointStrokeWidth" | "innerPointRadius" | "distanceBetweenRanges" | "distanceFromLabelToRanges" | "counterClockWise" | "maskBorderRadius"> {
+    /**
+     * Colors for smiley corresponding to state.
+     */
+    colorsMap?: [string, string];
+    /**
+     * Colors for labels.
+     */
+    labelsMap?: [string, string];
+    /**
+     * Whether to hide labels.
+     */
+    hideLabels?: boolean;
+    /**
+     * Value that splits smiley meter outline.
+     */
+    splitValue?: number;
+    /**
+     * Smiley width.
+     */
+    smileyWidth?: number;
+    /**
+     * Distance from smiley to the top.
+     */
+    smileyTopOffset?: number;
+}
+export declare type SmallSmileyMeterV2Props = SmileyMeterV2Props;

package/lib/components/meters/smiley-meter-v2/partials/smiley-meter-ranges/index.d.ts

@@ -0,0 +1 @@
+export { SmileyMeterRanges } from "./smiley-meter-ranges";

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

@@ -0,0 +1,6 @@
+import { OutlineMeterRangeConfig } from "../../../outline-meter";
+import { OutlineMeterRangeProps } from "../../../outline-meter/partials/outline-meter-range/interfaces";
+export interface SmileyMeterRangesProps extends Pick<OutlineMeterRangeProps, "value" | "diameter" | "innerPointRadius" | "pointStrokeWidth" | "distanceFromRanges" | "arc" | "gaugeWidth" | "distanceBetweenRanges" | "hideLabels"> {
+    ranges: OutlineMeterRangeConfig[];
+    counterClockWise: boolean;
+}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+export { TabBarV2 } from "./tab-bar-v2";

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

@@ -0,0 +1,42 @@
+export interface TabBarV2Props {
+    /**
+     * List of tabs.
+     */
+    tabs: TabV2Config[];
+    /**
+     * Id of the selected tab.
+     */
+    selectedTabId: string;
+    /**
+     * Callback to select different tab.
+     */
+    onSelect: (id: string) => void;
+    /**
+     * Text color of tab text.
+     */
+    color?: string;
+    /**
+     * Text color of the active tab text.
+     */
+    activeColor?: string;
+    /**
+     * Border color of tab bar.
+     */
+    borderColor?: string;
+    /**
+     * Border width of the tab bar.
+     */
+    borderWidth?: string;
+    /**
+     * Border radius of the tab bar (in px).
+     */
+    borderRadius?: number;
+    /**
+     * Side padding of the tab bar.
+     */
+    paddingX?: string;
+}
+export interface TabV2Config {
+    id: string;
+    label: string;
+}

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

@@ -0,0 +1 @@
+export { TabV2 } from "./tab-v2";

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

@@ -0,0 +1,19 @@
+import { TabBarV2Props, TabV2Config } from "../../interfaces";
+export interface TabV2Props extends TabV2Config, Required<Omit<TabBarV2Props, "tabs" | "maxWidth" | "paddingX" | "selectedTabId">> {
+    /**
+     * Index of the selected tab.
+     */
+    selectedIndex: number;
+    /**
+     * Index of the current tab.
+     */
+    idx: number;
+    /**
+     * Width of the dash under selected tab.
+     */
+    dashWidth?: number;
+    /**
+     * Height of the dash under selected tab.
+     */
+    dashHeight?: number;
+}

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

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

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

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

package/lib/components/tabs/tabbed-view-v2/index.d.ts

@@ -0,0 +1 @@
+export { TabbedViewV2 } from "./tabbed-view-v2";

package/lib/components/tabs/tabbed-view-v2/interfaces.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TabBarV2Props, TabV2Config } from "../tab-bar-v2/interfaces";
+export interface TabbedViewV2Props extends Pick<TabBarV2Props, "color" | "activeColor" | "borderColor" | "borderWidth" | "borderRadius" | "selectedTabId" | "onSelect"> {
+    tabs: TabViewTabV2[];
+}
+export interface TabViewTabV2 extends TabV2Config {
+    component: React.ReactNode;
+}

package/lib/components/tabs/tabbed-view-v2/tabbed-view-v2.d.ts

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

package/lib/index.d.ts

@@ -64,6 +64,8 @@ export { PrimaryDropdown } from "./components/dropdowns/primary-dropdown";
 export { FeatureExplanation } from "./components/feature-explanation";
 export { ThumbsFeedback } from "./components/boolean-feedback/thumbs-feedback";
 export { YesNoFeedback } from "./components/boolean-feedback/yes-no-feedback";
+export { MultipleOptionsFeedback } from "./components/feedback/multiple-options-feedback";
+export { YesNoFeedbackBlock } from "./components/feedback/yes-no-feedback-block";
 export { Input } from "./components/inputs/input";
 export declare type InputProps = BaseInputProps;
 export { TextInput } from "./components/inputs/text-input";
@@ -102,6 +104,10 @@ export { BarsMeter } from "./components/meters/bars-meter";
 export { PeopleMeter } from "./components/meters/people-meter";
 export { SmileyMeter } from "./components/meters/smiley-meter";
 export { DashedMeter } from "./components/meters/dashed-meter";
+export { GradientOutlineMeter, SmallGradientOutlineMeter, } from "./components/meters/gradient-outline-meter";
+export { OutlineMeter, SmallOutlineMeter, } from "./components/meters/outline-meter";
+export type { OutlineMeterPosition, Bounds, OutlineMeterLabelPosition, } from "./components/meters/outline-meter";
+export { SmileyMeterV2, SmallSmileyMeterV2, } from "./components/meters/smiley-meter-v2";
 export { Modal } from "./components/modals/modal";
 export declare type ModalProps = BaseModalProps;
 export { PrimaryModal } from "./components/modals/primary-modal";
@@ -136,6 +142,8 @@ export declare type CarouselSwitchProps = BaseCarouselSwitchProps;
 export { TabsMenu } from "./components/tabs/tabs-menu";
 export { TabBar } from "./components/tabs/tab-bar";
 export { TabbedView } from "./components/tabs/tabbed-view";
+export { TabBarV2 } from "./components/tabs/tab-bar-v2";
+export { TabbedViewV2 } from "./components/tabs/tabbed-view-v2";
 export { BaseText } from "./components/texts/base-text";
 export declare type BaseTextProps = BaseTextPropsInterface;
 export { ResponsiveText } from "./components/texts/responsive-text";