bord-design-system 0.0.2 → 0.0.4

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import { ComponentProps } from 'react';
+import * as React$1 from 'react';
+import { ComponentProps, ReactNode, ReactElement } from 'react';
 
 type TbordAvatarsVariant = 'circularFigma' | 'circularUser' | 'circularWorld' | 'circularZeppelin' | 'circularBordMascot' | 'rectangularFigma' | 'rectangularUser' | 'rectangularWorld' | 'rectangularZeppelin' | 'rectangularBordMascot';
 interface IBordAvatarProps extends ComponentProps<'svg'> {
@@ -28,11 +28,13 @@ declare const BordOneToneIcon: ({ variant, standardSize, customWidth, style, ...
 
 interface IbordOneToneIconProps extends ComponentProps<'svg'> {
     variant: TbordOneToneIcon;
-    standardSize?: 12 | 14 | 16 | 20 | 24 | 32;
+    standardSize?: 12 | 14 | 16 | 18 | 20 | 24 | 32;
     customWidth?: string;
 }
 
 type TformComponentsStandardSizes = 'w-80' | 'w-180' | 'w-280' | 'w-380';
+type TSemanticColors = 'informative' | 'success' | 'warning' | 'danger';
+type TTabValue = string | number;
 
 interface IBordTextInputProps extends ComponentProps<"input"> {
     placeholder: string;
@@ -96,7 +98,7 @@ interface IBordAttentionButton extends ComponentProps<'div'> {
  * @prop {string} [customClassName=""] - Add a custom class to the component.
  * @returns {React.ReactElement} An attention button component.
  */
-declare const BordAttentionButton: (props: IBordAttentionButton) => React.ReactElement;
+declare const BordAttentionButton: (props: IBordAttentionButton) => React$1.ReactElement;
 
 interface IBordInfoBannerDivProps extends ComponentProps<'div'> {
     className?: string;
@@ -143,26 +145,25 @@ interface IBordInfoBanner extends ComponentProps<'div'> {
  * @prop {IBordInfoBannerAlertLabelProps} [bordInfoBannerAlertLabelProps] - Props for the alert label.
  * @returns {React.ReactElement} An info banner component.
  */
-declare const BordInfoBanner: (props: IBordInfoBanner) => React.ReactElement;
+declare const BordInfoBanner: (props: IBordInfoBanner) => React$1.ReactElement;
 
 type THeight = 'auto' | '42';
 interface IBordButton extends ComponentProps<'button'> {
     label?: string;
     formId?: string;
     customClassName?: string;
-    buttonIconOne?: TbordOneToneIcon;
-    buttonIconTwo?: TbordOneToneIcon;
     customWidth?: TformComponentsStandardSizes;
     customHeight?: THeight;
     bordButtonStyle?: 'filled' | 'outlined';
     customFontSize?: string;
     disabled?: boolean;
     isLoading?: boolean;
-    modeButton?: 'primary' | 'secondary' | 'tertiary' | 'quaternary';
-    standardSizeIcon?: 12 | 14 | 16 | 20 | 24 | 32;
+    modeButton?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'danger';
     standardPaddingSize?: 'rectangular' | 'squared';
-    buttonIconOneStroke?: string;
-    buttonIconTwoStroke?: string;
+    buttonIconOneProps?: IbordOneToneIconProps;
+    buttonIconTwoProps?: IbordOneToneIconProps;
+    buttonIconOne?: TbordOneToneIcon;
+    buttonIconTwo?: TbordOneToneIcon;
 }
 
 /**
@@ -179,10 +180,143 @@ interface IBordButton extends ComponentProps<'button'> {
  * @prop {boolean} [isLoading=false] - Whether the button is in a loading state or not.
  * @prop {string} [label="Button Text"] - The label of the button.
  * @prop {string} [customHeight="auto"] - The height of the button, can be any valid CSS unit.
- * @prop {"primary" | "secondary" | "tertiary"} [modeButton="primary"] - The mode of the button, can be "primary", "secondary" or "tertiary".
+ * @prop {"primary" | "secondary" | "tertiary" | "danger"} [modeButton="primary"] - The mode of the button, can be "primary", "secondary", "tertiary" or "danger".
  * @prop {"rectangular" | "squared"} [standardPaddingSize="rectangular"] - The padding size of the button.
  * @returns {React.ReactElement} A button component with different styles and loading state.
  */
-declare const BordButton: (props: IBordButton) => React.ReactElement;
+declare const BordButton: (props: IBordButton) => React$1.ReactElement;
+
+type TTabSemanticColors = TSemanticColors;
+interface IBordTab {
+    label: ReactNode;
+    value?: TTabValue;
+    icon?: ReactElement;
+    iconPosition?: 'top' | 'bottom' | 'start' | 'end';
+    className?: string;
+    style?: React.CSSProperties;
+    selected?: boolean;
+    textColor?: TTabSemanticColors;
+    disabled?: boolean;
+    onClick?: (evt: React.MouseEvent<HTMLButtonElement>, value?: TTabValue) => void;
+}
+
+interface IBordTabs {
+    textColor?: TTabSemanticColors;
+    defaultValue?: TTabValue;
+    children: ReactNode;
+    value?: TTabValue;
+    onChange?: (value: TTabValue) => void;
+}
+
+declare const BordTabs: ({ value, children, defaultValue, textColor, onChange }: IBordTabs) => react_jsx_runtime.JSX.Element;
+
+type TBadgeItemProps = {
+    icon?: IbordOneToneIconProps;
+    text?: string;
+    title?: string;
+    className?: string;
+};
+type TBadgeItem = TBadgeItemProps | ReactNode;
+type TTitleProps = {
+    icon?: IbordOneToneIconProps;
+    text?: string;
+    className?: string;
+};
+interface IRowFooterProps {
+    title?: ReactNode | TTitleProps;
+    badgeList?: TBadgeItem[];
+    children?: ReactNode;
+}
+
+interface IBordInfoCardItem {
+    title?: string;
+    icon?: ReactNode;
+    label?: string;
+    customContentElement?: ReactNode;
+}
+interface IBordInfoCardHeader {
+    icon?: ReactNode;
+    title?: string;
+    subtitle?: string;
+    description?: string;
+}
+interface IBordInfoCard extends ComponentProps<'div'> {
+    header?: IBordInfoCardHeader;
+    items?: IBordInfoCardItem[];
+    primaryButtonProps?: IBordButton;
+    secondaryButtonProps?: IBordButton;
+    tertiaryButtonProps?: IBordButton;
+    variant?: 'success' | 'danger';
+    customClassName?: string;
+    bordTrelloRowFooterBadgeListProps?: IRowFooterProps;
+}
+
+/**
+ * @description A card component that displays information in a horizontal layout (desktop): Header | Items (horizontal row) | Buttons.
+ * @prop {IBordInfoCardHeader} [header] - Optional header with icon, title, subtitle, and description (left section).
+ * @prop {IBordInfoCardItem[]} [items] - Optional array of items to display in a horizontal row (center section, desktop) or grid (tablet/mobile).
+ * @prop {Omit<IBordButton, 'bordButtonStyle' | 'modeButton'>} [primaryButton] - Optional primary button (filled style, right section).
+ * @prop {Omit<IBordButton, 'bordButtonStyle' | 'modeButton'>} [secondaryButton] - Optional secondary button (outlined style, right section).
+ * @prop {Omit<IBordButton, 'bordButtonStyle' | 'modeButton' | 'label'>} [menuButton] - Optional menu button (icon only, right section).
+ * @prop {"success" | "danger"} [variant="success"] - The color variant of the card.
+ * @prop {string} [customClassName=""] - Add a custom class to the component.
+ * @returns {React.ReactElement} An info card component.
+ */
+declare const BordInfoCard: (props: IBordInfoCard) => React$1.ReactElement;
+
+type TBordMetricCardSizes = 'lg' | 'sm';
+interface IBordMetricCardProps {
+    title: ReactNode | string;
+    value?: number;
+    textColor?: string;
+    size?: TBordMetricCardSizes;
+    titleProps?: {
+        className?: string;
+    };
+    valueProps?: {
+        className?: string;
+    };
+}
+declare const BordMetricCard: ({ title, value, textColor, size, titleProps, valueProps, }: IBordMetricCardProps) => react_jsx_runtime.JSX.Element;
+
+interface IBordTabItem {
+    id: string;
+    label: string;
+}
+interface IBordTabBarProps {
+    tabs: IBordTabItem[];
+    defaultValue?: string;
+    activeTab?: string;
+    onChange?: (id: string) => void;
+    containerClassName?: string;
+    buttonClassName?: string;
+    activeTabClassName?: string;
+}
+declare const BordTabBar: ({ tabs, defaultValue, activeTab: externalActiveTab, onChange, containerClassName, buttonClassName, activeTabClassName, }: IBordTabBarProps) => react_jsx_runtime.JSX.Element;
+
+declare const BordTab: ({ label, className, style, icon, iconPosition, textColor, selected, value, disabled, onClick, }: IBordTab) => react_jsx_runtime.JSX.Element;
+
+interface IBordBadgeProps {
+    label: ReactNode;
+    variant?: 'default' | 'gradient';
+    color?: TSemanticColors | 'default';
+    className?: string;
+    filled?: boolean;
+    disabled?: boolean;
+    restProps?: ComponentProps<'div'>;
+}
+
+type TabWithBadge = IBordTab & {
+    badge?: IBordBadgeProps;
+};
+interface IBordTabsGroupProps {
+    value?: TTabValue;
+    defaultValue?: TTabValue;
+    tabs: TabWithBadge[];
+    textColor?: TTabSemanticColors;
+    onChange?: (value: TTabValue) => void;
+}
+
+declare function BordTabsGroupWithBadge({ value, defaultValue, tabs, textColor, onChange }: IBordTabsGroupProps): react_jsx_runtime.JSX.Element;
 
-export { BordAttentionButton, BordAvatar, BordBackButton, BordButton, BordFlag, BordInfoBanner, BordOneToneIcon, BordTextInput, BordTwoToneIcon };
+export { BordAttentionButton, BordAvatar, BordBackButton, BordButton, BordFlag, BordInfoBanner, BordInfoCard, BordMetricCard, BordOneToneIcon, BordTab, BordTabBar, BordTabs, BordTabsGroupWithBadge, BordTextInput, BordTwoToneIcon };