@bcrumbs.net/bc-ui 0.0.12 → 0.0.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bcrumbs.net/bc-ui",
   "description": "The UI components of Bread Crumbs portals",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "keyword": [
     "bcrumbs",
     "bc-ui"

package/src/index.d.ts

@@ -2,6 +2,7 @@ export * from './lib/loading/loading';
 export * from './lib/textbox/bctextbox';
 export * from './lib/dropList/bcdrop-list';
 export * from './lib/multiSelector/MutliSelector';
+export * from './lib/multiSelect/BCMultiSelect';
 export * from './lib/checkbox/bccheckbox';
 export * from './lib/navigation/bcnavigation';
 export * from './lib/navigation/types';
@@ -33,6 +34,8 @@ export * from './lib/radioButton';
 export * from './lib/charts/pieChart';
 export * from './lib/charts/NewPieChart/NewPieChart';
 export * from './lib/charts/barLineChart';
+export * from './lib/charts/ChartLegend/ChartLegend';
+export * from './lib/charts/NewBarChart/NewBarChart';
 export * from './lib/charts/HorizontalStatisticCard/HorizontalStatisticCard';
 export * from './lib/dateRangePicker';
 export * from './lib/InputWithSuggestions';
@@ -55,6 +58,7 @@ export * from './lib/baseComponents/radio-group';
 export * from './lib/baseComponents/checkbox';
 export * from './lib/baseComponents/switch';
 export * from './lib/newComponents/BCNewCheckBox/BCNewCheckBox';
+export * from './lib/cards/SectionDetailsCard';
 export * from './lib/button/bcbutton';
 export * from './lib/button/types';
 export * from './lib/block/bcblock';

package/src/lib/baseComponents/radio-group.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { SerializedStyles } from '@emotion/react';
 interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
     css?: SerializedStyles;

package/src/lib/baseComponents/switch.d.ts

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { SerializedStyles } from '@emotion/react';
+type SwitchSize = 'S' | 'M';
 interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
     css?: SerializedStyles;
     rtl?: boolean;
+    size?: SwitchSize;
 }
 declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
 export { Switch };
+export type { SwitchSize };

package/src/lib/cards/SectionDetailsCard.d.ts

@@ -0,0 +1,16 @@
+import { SerializedStyles } from '@emotion/react';
+import React from 'react';
+interface SectionDetailsCardProps {
+    title?: string;
+    subtitle?: string;
+    titleComponent?: React.ReactNode;
+    columns?: number;
+    gap?: number;
+    containerCss?: SerializedStyles;
+    titleCss?: SerializedStyles;
+    subTitleCss?: SerializedStyles;
+    noContentContainer?: boolean;
+    children: React.ReactNode;
+}
+export declare const SectionDetailsCard: ({ title, subtitle, titleComponent, columns, gap, containerCss, titleCss, subTitleCss, noContentContainer, children, }: SectionDetailsCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/charts/ChartLegend/ChartLegend.d.ts

@@ -0,0 +1,12 @@
+export interface ChartLegendItem {
+    name: string;
+    value: number;
+    color: string;
+}
+export interface ChartLegendProps {
+    items: ChartLegendItem[];
+    /** When provided, displays percentage (value/total) instead of raw value */
+    total?: number;
+    loading?: boolean;
+}
+export declare const ChartLegend: ({ items, total, loading }: ChartLegendProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/charts/NewBarChart/NewBarChart.d.ts

@@ -0,0 +1,45 @@
+export interface NewBarChartDataItem {
+    name: string;
+    value: number;
+    [key: string]: unknown;
+}
+export interface NewBarChartTooltipMeta {
+    dataKey: string;
+    value: number;
+}
+export interface NewBarChartProps {
+    data: NewBarChartDataItem[];
+    /** Accepts px number or CSS string (e.g. "100%"). Defaults to "100%". */
+    height?: number | string;
+    /** Data key for the primary bars. Defaults to "value". */
+    primaryDataKey?: string;
+    /** Optional second series data key for grouped bars. */
+    secondaryDataKey?: string;
+    barColor?: string;
+    secondaryBarColor?: string;
+    activeBarColor?: string;
+    activeSecondaryBarColor?: string;
+    /** Fixed bar width in px. Defaults to 48. */
+    barSize?: number;
+    /** Top corner radius only (px); bottom stays square. Defaults to 4. */
+    barRadius?: number;
+    /** Gap between bars in the same category (Recharts BarChart). */
+    barGap?: number | string;
+    /** Horizontal grid lines behind bars */
+    horizontalGrid?: boolean;
+    /** Merged into default chart margins */
+    margin?: Partial<{
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    }>;
+    /** With grouped bars, `meta` matches the bar under the cursor */
+    tooltipTitle?: (item: NewBarChartDataItem, meta?: NewBarChartTooltipMeta) => string;
+    tooltipSubtitle?: (item: NewBarChartDataItem) => string;
+    /** Tooltip with bottom center pointer */
+    tooltipWithCaret?: boolean;
+    /** Reverses bar order and moves Y-axis to the right for RTL layouts */
+    rtl?: boolean;
+}
+export declare const NewBarChart: ({ data, height, primaryDataKey, secondaryDataKey, barColor, secondaryBarColor, activeBarColor, activeSecondaryBarColor, barSize, barRadius, barGap, horizontalGrid, margin, tooltipTitle, tooltipSubtitle, tooltipWithCaret, rtl, }: NewBarChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/constants/Color.d.ts

@@ -37,6 +37,7 @@ export declare enum NewColors {
     DANGER_LIGHT = "var(--bc-danger-light)",
     SUCCESS = "var(--bc-success)",
     SUCCESS_DARKER = "var(--bc-success-darker)",
+    SUCCESS_LIGHT = "var(--bc-success-light)",
     DROPDOWN_ITEM = "var(--bc-dropDown-item)",
     DROPDOWN_HOVER = "var(--bc-dropDown-hover)",
     SUB_SIDEBAR_TITLE = "var(--bc-sub-sidebar-title)",
@@ -76,6 +77,7 @@ export declare enum NewColors {
     CHARTS_DANGER = "var(--bc-charts-danger)",
     CHARTS_LABEL = "var(--bc-charts-label)",
     CHARTS_LEGEND_LABEL = "var(--bc-charts-legend-label)",
+    CHARTS_TOOLTIP_TITLE = "var(--bc-charts-tooltip-title)",
     SECONDARY80 = "rgb(106, 107, 131, 0.8)",
     SECONDARY70 = "rgb(106, 107, 131, 0.7)",
     SECONDARY50 = "rgb(106, 107, 131, 0.5)",

package/src/lib/constants/InputHeight.d.ts

@@ -1,5 +1,6 @@
 export declare enum InputHeight {
     M = "M",
+    ML = "ML",
     L = "L",
     XL = "XL"
 }
@@ -7,6 +8,9 @@ export declare const HeightValues: {
     M: {
         height: string;
     };
+    ML: {
+        height: string;
+    };
     L: {
         height: string;
     };

package/src/lib/constants/TextSize.d.ts

@@ -18,6 +18,7 @@ export declare enum TextSizeRem {
     XXL = "var(--bc-fontSize-header-3)",
     XXXL = "var(--bc-fontSize-header-2_5)",
     XXXXL = "var(--bc-fontSize-header-2)",
-    XXXXXL = "var(--bc-fontSize-header-1)"
+    XXXXXL = "var(--bc-fontSize-header-1)",
+    BUTTON = "var(--bc-fontSize-button)"
 }
 export default TextSize;

package/src/lib/hooks/useForm/index.d.ts

@@ -31,7 +31,7 @@ interface useBCFormReturnFunctions {
     renderField: (name: string, label: string, type: FieldType, readonly?: boolean, placeholder?: string, tooltip?: string, dynamicStyle?: SerializedStyles) => JSX.Element;
     _renderFieldInput: (name: string, type: FieldType, readonly: boolean, placeholder: string) => JSX.Element;
     onDroplistSelectionChange: (name: string, selectedKey?: string) => void;
-    renderDroplistField: (name: string, label: string, options: BCDropListOptionsType[], placeholder?: string, tooltip?: string, lang?: boolean, searchable?: boolean, labelStyle?: SerializedStyles, containerStyle?: SerializedStyles, loading?: boolean, noEmpty?: boolean) => JSX.Element;
+    renderDroplistField: (name: string, label: string, options: BCDropListOptionsType[], placeholder?: string, tooltip?: string, lang?: boolean, searchable?: boolean, labelStyle?: SerializedStyles, containerStyle?: SerializedStyles, loading?: boolean, noEmpty?: boolean, usePortal?: boolean) => JSX.Element;
 }
 type useMBFormReturnType = [{
     [key: string]: FormData;

package/src/lib/icon/bcicon.d.ts

@@ -401,4 +401,49 @@ export declare const BCIcons: {
         height?: number | undefined;
         fill?: string | undefined;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    CrumbySettingsEntry: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    DashboardStatisticCard: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    FeedbackIcon: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Chatting: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Plus: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    SingleHollowCheck: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    EmptyBCrumbsSlug: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    GupshupIcon: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Robot: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
 };

package/src/lib/multiSelect/BCMultiSelect.d.ts

@@ -0,0 +1,24 @@
+import { SerializedStyles } from '@emotion/react';
+import { BCDropListOptionsType } from '../constants/Droplist';
+export interface BCMultiSelectProps {
+    options: BCDropListOptionsType[];
+    selected: string[];
+    onChange: (values: string[]) => void;
+    placeholder?: string;
+    rtl?: boolean;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    disabled?: boolean;
+    className?: string;
+    maxChipsVisible?: number;
+    showSelectAll?: boolean;
+    selectAllText?: string;
+    clearAllText?: string;
+    noResultsText?: string;
+    usePortal?: boolean;
+    containerCss?: SerializedStyles;
+    buttonCss?: SerializedStyles;
+    dropDownContentCss?: SerializedStyles;
+}
+export declare function BCMultiSelect({ options, selected, onChange, placeholder, rtl, searchable, searchPlaceholder, disabled, className, maxChipsVisible, showSelectAll, selectAllText, clearAllText, noResultsText, usePortal, containerCss, buttonCss, dropDownContentCss, }: BCMultiSelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default BCMultiSelect;

package/src/lib/multiSelect/style.d.ts

@@ -0,0 +1,93 @@
+/// <reference types="react" />
+import { SerializedStyles } from '@emotion/react';
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+    containerCss?: SerializedStyles | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TriggerButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+    buttonCss?: SerializedStyles | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const ChipsRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Chip: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const OverflowChip: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const DropDownContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+    openUpward?: boolean | undefined;
+    inPortal?: boolean | undefined;
+    dropDownContentCss?: SerializedStyles | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SearchRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SearchInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const SearchIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ActionRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ActionButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const OptionsList: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const OptionRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+    selected?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const OptionText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const NoResultsMessage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PortalWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const triggerDefaultCss: SerializedStyles;

package/src/lib/navigation/types.d.ts

@@ -1,22 +1,33 @@
 import { ReactElement } from 'react';
 export type SubMenuItemsType = {
     label: string;
+    title?: string;
     link: string;
     action: string;
     icon: string | ReactElement;
+    tags?: string[];
+    description?: string;
 };
 export type SubMenuType = {
     title?: string;
     items?: Array<SubMenuItemsType>;
+    hide?: boolean;
 };
 export type NavItem = {
     label: string;
+    title?: string;
     icon: string | ReactElement;
     link?: string;
     externalLink?: string;
     action?: string;
+    tags?: string[];
+    description?: string;
     className?: string;
     subMenu?: Array<SubMenuType>;
+    hide?: boolean;
+};
+export type NavWithTags = NavItem & {
+    subMenu?: Array<SubMenuType>;
 };
 export type NavType = {
     brand?: string | ReactElement;

package/src/lib/newComponents/BCRadioGroupItem/types.d.ts

@@ -8,6 +8,8 @@ export interface BCRadioItemProps {
     containerCssStyle?: SerializedStyles;
     radioCssStyle?: SerializedStyles;
     labelCssStyle?: SerializedStyles;
+    variant?: 'default' | 'filled';
+    size?: 'S' | 'M' | 'L';
     id?: string;
     'aria-label'?: string;
     'aria-describedby'?: string;

package/src/lib/styledFormInput/StyledFormInput.d.ts

@@ -25,5 +25,5 @@ export declare const SearchFilterDiv: import("@emotion/styled").StyledComponent<
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const searchInputStyle: import("@emotion/react").SerializedStyles;
-export declare const InputStyle: import("@emotion/react").SerializedStyles;
+export declare const InputStyle: (hasError?: boolean) => import("@emotion/react").SerializedStyles;
 export {};

package/src/lib/toaster/index.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { ToastContainerProps } from 'react-toastify';
+import { ToastContainerProps, ToastPosition } from 'react-toastify';
+export type { ToastPosition };
 import 'react-toastify/dist/ReactToastify.css';
 import { IconType } from '../constants';
 export declare enum ToastSize {
@@ -25,6 +26,6 @@ export declare const BCToastContainer: ({ className, ...rest }: ToastContainerPr
     className?: string;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function triggerToast({ title, description, firstButtonText, onFirstButtonClick, onSecondButtonClick, secondButtonText, autoClose, onClose, size, icon, titlePaddingRight, fullWidth, }: ToastProps): import("react").ReactText;
+export declare function triggerWarningToast({ title, description, firstButtonText, onFirstButtonClick, onSecondButtonClick, secondButtonText, autoClose, onClose, size, icon, titlePaddingRight, fullWidth, }: ToastProps): import("react").ReactText;
 export declare function triggerErrorToast({ title, description, firstButtonText, onFirstButtonClick, onSecondButtonClick, secondButtonText, autoClose, onClose, size, icon, titlePaddingRight, fullWidth, }: ToastProps): import("react").ReactText;
 export declare function closeAllToast(): void;
-export {};