dfh-ui-library 1.14.39 → 1.14.40

package/dist/cjs/types/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import { IButtonProps } from "../../shared/models/components/base.model";
-declare const Button: ({ type, isDisabled, buttonLabel, iconType, iconColor, iconAlignment, isIconEnabled, variants, additionalClasses, iconClass, enableBagage, bagageProps, width, onClick, isLoading }: IButtonProps) => React.JSX.Element;
+import React from 'react';
+import { IButtonProps } from '../../shared/models/components/base.model';
+declare const Button: ({ type, isDisabled, buttonLabel, icon, iconProps, iconAlignment, isIconEnabled, variants, additionalClasses, enableBagage, bagageProps, width, onClick, isLoading, }: IButtonProps) => React.JSX.Element;
 export default Button;

package/dist/cjs/types/components/Button/Button.handler.d.ts

@@ -1 +1 @@
-export declare const handleButtonClasses: (variants?: string | undefined) => "bg-[#333333] text-white hover:bg-gray-700" | "text-16s h-[52px] text-base font-semibold leading-5 border border-solid border-[#CDCED6] bg-white" | "text-14s h-9 bg-[#333333] text-white hover:bg-gray-700" | "text-14s h-9 text-base font-semibold leading-5 border border-solid border-[#CDCED6] bg-white" | "text-14s h-7 bg-[#333333] text-white hover:bg-gray-700" | "text-14s h-7 text-base font-semibold leading-5 border border-solid border-[#CDCED6] bg-white" | "text-16s h-11 text-base font-semibold leading-5 border border-solid border-[#CDCED6] bg-white" | "text-16s h-11 bg-[#333333] text-white hover:bg-gray-700" | "text-16s h-11 bg-[#006CD0] text-21s text-white" | "text-16s h-10 bg-[#006CD0] text-21s text-white !p-0 !px-2" | "bg-[#006CD0] text-12s text-white" | "text-21s text-black-540 border border-[#CDCED6] bg-white" | "text-21s opacity-60 text-[#21232C] border border-[#CDCED6] bg-white" | "text-21s text-black-540 border border-[#DF4B604D] bg-white" | "text-14s text-white bg-[#F23A5C]" | "text-21s border text-btn-main border-[#006CD0] bg-[#F1F5F9]" | "text-12s border text-black-540 border-0 bg-[#F1F5F9]" | "text-21s text-black-540 border border-0 bg-white" | "text-21s text-white border border-0 bg-[#006CD0]" | "text-21s text-white border border-0 bg-pinkRead" | "h-8 text-12s text-black-540 border border-[#CDCED6] bg-white" | "flex text-12s h-8 bg-[#006CD0] text-white" | "h-8 text-12s border text-btn-main border-[#006CD0] bg-[#F1F5F9]" | "h-11 text-21s border border-0 bg-white" | "h-8 text-21s border border-0 bg-transparent" | undefined;
+export declare const handleButtonClasses: (variants?: string | undefined) => "bg-accent-primary text-white border border-accent-primary hover:bg-state-focushover-background hover:text-state-focushover-foreground hover:border hover:border-state-focushover-border active:bg-state-active-background active:text-state-active-foreground active:border active:border-state-active-border" | "text-16s h-[52px] text-base font-semibold text-accent-primary leading-5 border border-solid border-border-dark bg-background-default hover:bg-state-focushover-background hover:text-state-focushover-foreground hover:border hover:border-state-focushover-border active:bg-state-active-background active:text-state-active-foreground active:border active:border-state-active-border" | "text-14s h-9 bg-accent-primary text-white border border-accent-primary hover:bg-state-focushover-background hover:text-state-focushover-foreground hover:border hover:border-state-focushover-border active:bg-state-active-background active:text-state-active-foreground active:border active:border-state-active-border" | "text-14s text-base font-semibold text-accent-primary leading-5 border border-solid border-border-dark bg-background-default hover:bg-state-focushover-background hover:text-state-focushover-foreground hover:border hover:border-state-focushover-border active:bg-state-active-background active:text-state-active-foreground active:border active:border-state-active-border" | "text-14s h-7 bg-accent-primary text-white border border-accent-primary hover:bg-state-focushover-background hover:text-state-focushover-foreground hover:border hover:border-state-focushover-border active:bg-state-active-background active:text-state-active-foreground active:border active:border-state-active-border" | "text-14s h-7 text-base font-semibold text-accent-primary leading-5 border border-solid border-border-dark bg-background-default hover:bg-state-focushover-background hover:text-state-focushover-foreground hover:border hover:border-state-focushover-border active:bg-state-active-background active:text-state-active-foreground active:border active:border-state-active-border" | "text-14s text-base font-semibold text-accent-primary leading-5 border border-solid border-border-dark bg-background-default hover:bg-state-focushover-background hover:text-state-focushover-foreground hover:border hover:border-state-focushover-border active:bg-state-active-background active:text-state-active-foreground active:border active:border-state-active-border font-medium leading-[14px]" | "text-14s bg-accent-primary text-white border border-accent-primary hover:bg-state-focushover-background hover:text-state-focushover-foreground hover:border hover:border-state-focushover-border active:bg-state-active-background active:text-state-active-foreground active:border active:border-state-active-border" | "text-14s bg-state-error-background border border-state-error-border text-state-error-foreground" | "bg-accent-primary text-12s text-content-light" | "text-12s text-content-default bg-background-light1 border border-border-default" | "text-21s text-content-default border-1 border-border-default bg-background-light1" | "text-21s opacity-60 text-state-disabled-foreground border border-state-disabled-border bg-state-disabled-background" | "text-21s border text-content-default border-accent-primary bg-background-light1" | "h-8 text-12s text-content-default border border-border-default bg-background-light1" | "h-8 text-12s border text-content-default border-accent-primary bg-background-light1" | "text-14s text-white bg-[#F23A5C]" | "text-21s text-black-540 border border-0 bg-white" | "text-21s text-white border border-0 bg-[#006CD0]" | "text-21s text-white border border-0 bg-pinkRead" | "flex text-12s h-8 bg-[#006CD0] text-white" | "h-11 text-21s border border-0 bg-white" | "h-8 text-21s border border-0 bg-transparent" | undefined;

package/dist/cjs/types/components/Button/Button.stories.d.ts

@@ -1,11 +1,12 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Button from "./Button";
+import { Meta, StoryObj } from '@storybook/react';
+import Button from './Button';
 declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof Button>;
 export declare const Primary: Story;
 export declare const IconButton: Story;
 export declare const IconButtonRight: Story;
+export declare const Outlined: Story;
 export declare const Secondary: Story;
 export declare const Disabled: Story;
 export declare const Small: Story;
@@ -13,6 +14,7 @@ export declare const Medium: Story;
 export declare const Large: Story;
 export declare const PrimaryBlue: Story;
 export declare const PrimaryWhite: Story;
+export declare const PrimaryRed: Story;
 export declare const PrimaryWhiteSelected: Story;
 export declare const PrimaryWhiteNoBoder: Story;
 export declare const PrimaryWhiteUploadIcon: Story;

package/dist/cjs/types/components/Button/ButtonV2.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IButtonProps } from '../../shared/models/components/base.model';
-declare const ButtonV2: ({ type, isDisabled, buttonLabel, iconType, iconColor, iconAlignment, isIconEnabled, variants, additionalClasses, iconClass, enableBagage, bagageProps, width, onClick, isLoading, }: IButtonProps) => React.JSX.Element;
+declare const ButtonV2: ({ type, isDisabled, buttonLabel, icon, iconProps, iconAlignment, isIconEnabled, variants, additionalClasses, enableBagage, bagageProps, width, onClick, isLoading, }: IButtonProps) => React.JSX.Element;
 export default ButtonV2;

package/dist/cjs/types/components/FilterButtonGroup/FilterButton.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { IButtonProps } from "../../shared/models/components/base.model";
-declare const FilterButton: ({ type, isDisabled, buttonLabel, iconType, iconColor, iconAlignment, isIconEnabled, variants, additionalClasses, iconClass, enableBagage, bagageProps, width, onClick, }: IButtonProps) => React.JSX.Element;
+declare const FilterButton: ({ type, isDisabled, buttonLabel, iconAlignment, isIconEnabled, variants, additionalClasses, iconProps, icon, enableBagage, bagageProps, width, onClick, }: IButtonProps) => React.JSX.Element;
 export default FilterButton;

package/dist/cjs/types/components/FormElements/IconInput/IconInput.handler.d.ts

@@ -1 +1 @@
-export declare const handleInputElementClasses: (_inputVariant?: "default" | "large" | "dynamic" | "uploadinput" | "small" | "noborder") => "px-3 py-3 bg-white border shadow-sm text-black-600 text-14s font-normal border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" | "px-0 h-8 py-2.5 bg-white border-0 rounded text-black-540 text-14s font-normal placeholder-gray-95 block w-[100px] items-center" | undefined;
+export declare const handleInputElementClasses: (_inputVariant?: "default" | "large" | "dynamic" | "uploadinput" | "small" | "noborder") => "px-3 py-[9px] bg-white border shadow-sm text-content-default !leading-[20px] text-14s font-normal border-border-default placeholder:text-content-deemphasized focus:outline-none block w-full rounded-md focus:ring-0 [&:is(:hover,:focus)]:border-state-focushover-border" | "px-0 h-8 py-2.5 bg-white border-0 rounded text-black-540 text-14s font-normal placeholder-gray-95 block w-[100px] items-center" | undefined;

package/dist/cjs/types/components/FormElements/IconInput/iconInputLock.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { IHookFormsInputProps } from '../../../shared/models/components/base.model';
-export interface ILockCodeInputProps extends Omit<IHookFormsInputProps, 'type' | 'value' | 'onChange'> {
+import { type IconName } from 'lucide-react/dynamic';
+export interface ILockCodeInputProps extends Omit<IHookFormsInputProps, 'type' | 'value' | 'onChange' | 'leftIcon' | 'rightIcon'> {
     /** Number of input boxes (2-8) */
     length?: number;
     /** Current value as string */
@@ -19,6 +20,8 @@ export interface ILockCodeInputProps extends Omit<IHookFormsInputProps, 'type' |
     allowPaste?: boolean;
     /** Custom separator between inputs */
     separator?: string;
+    leftIcon?: IconName;
+    rightIcon?: IconName;
 }
 /**
  * Dynamic Lock Code Input Component

package/dist/cjs/types/components/FormElements/Select/Select.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { ISelectProps } from "../../../shared/models/components/base.model";
+import React from 'react';
+import { ISelectProps } from '../../../shared/models/components/base.model';
 /**
  * Primary UI component for user interaction
  */

package/dist/cjs/types/components/HorizontalRule/HorizontalRule.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    className?: string;
+};
+export default function HorizontalRule({ className }: Props): React.JSX.Element;
+export {};

package/dist/cjs/types/components/HorizontalRule/index.d.ts

@@ -0,0 +1 @@
+export { default as HorizontalRule } from './HorizontalRule';

package/dist/cjs/types/components/Media/Icon/IconV2.d.ts

@@ -5,6 +5,7 @@ import { IconVariant } from '../../../shared/models/components/base.model';
 type IconProps = {
     size?: string;
     icon: IconName | keyof typeof customIcons;
+    fill?: string;
     color?: string;
     variant?: IconVariant;
     strokeWidth?: number;

package/dist/cjs/types/components/Typhography/Typhography.handler.d.ts

@@ -1 +1 @@
-export declare const handleFontTypes: (_type: string | undefined) => "text-12s font-medium" | "text-12s font-semibold" | "text-12s font-extrabold" | "text-14s font-medium" | "text-2xl font-semibold leading-6 text-[#333333]" | "text-xl font-semibold leading-6 text-[#333333]" | "text-14s font-semibold" | "text-14s font-extrabold" | "text-28s font-medium" | "text-28s font-semibold" | "text-28s font-extrabold" | "text-10s font-medium" | "text-10s font-semibold" | "text-10s font-extrabold" | "text-base font-normal leading-[1.875rem] text-[#333333] opacity-50" | "text-base text-xl leading-[1.875rem] text-[#333333]" | "font-semibold text-btn-black text-42s" | "font-semibold text-42s" | "font-normal text-lg text-gray-95" | "font-semibold text-btn-black text-lg" | "font-bold text-btn-black text-14s" | "font-bold text-btn-black text-base" | "font-normal text-gray-95 text-base" | "font-semibold text-black-540 text-18s" | undefined;
+export declare const handleFontTypes: (_type: string | undefined) => "text-12s font-medium" | "text-12s font-semibold" | "text-12s font-extrabold" | "text-14s font-medium" | "text-2xl font-semibold leading-6 text-content-default" | "text-xl font-semibold leading-6 text-content-default" | "text-14s font-semibold" | "text-14s font-extrabold" | "text-28s font-medium" | "text-28s font-semibold" | "text-28s font-extrabold" | "text-10s font-medium" | "text-10s font-semibold" | "text-10s font-extrabold" | "text-base font-normal leading-[1.875rem] text-content-default opacity-50" | "text-base text-xl leading-[1.875rem] text-content-default" | "font-semibold text-btn-black text-42s" | "font-semibold text-42s" | "font-normal text-lg text-gray-95" | "font-semibold text-btn-black text-lg" | "font-bold text-btn-black text-14s" | "font-bold text-btn-black text-base" | "font-normal text-gray-95 text-base" | "font-semibold text-content-default text-18s" | undefined;

package/dist/cjs/types/components/core/Heading/Heading.d.ts

@@ -1,13 +1,13 @@
-import React from "react";
+import React from 'react';
 interface HeadingProps {
     /**
      * Choose heading type
      */
-    type?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    type?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined;
     /**
      * Use to decide the color
      */
-    colorType?: "white" | "dark" | "gray" | undefined;
+    colorType?: 'white' | 'dark' | 'gray' | undefined;
     /**
      * Heading contents
      */

package/dist/cjs/types/components/index.d.ts

@@ -70,4 +70,5 @@ export { default as MultiSelectFormGen } from './MultiSelectFormGen';
 export { default as ButtonGroupMultiSelectWithInputsFormGen } from './ButtonGroupWithInputsFormGen/ButtonGroupMultiSelectWithInputsFormGen';
 export { default as ButtonGroupWithMultiSelectFormGen } from './ButtonGroupFormGen/ButtonGroupWithMultiSelectFormGen';
 export { default as FilterButton } from './FilterButtonGroup/FilterButton';
-export { MiniTimelineCard } from "./MiniTimelineCard";
+export { MiniTimelineCard } from './MiniTimelineCard';
+export * from './HorizontalRule';

package/dist/cjs/types/shared/configs/customClasses.d.ts

@@ -25,6 +25,7 @@ export declare const Classes: {
         common: string;
         lightGray: string;
         lightGrayHalf: string;
+        primaryBorder: string;
         gray: string;
         white: string;
         black: string;
@@ -66,9 +67,9 @@ export declare enum LableClasses {
     fontSemiBold = "text-21s font-semibold"
 }
 export declare enum SelectClasses {
-    default = "form-select flex w-full mt-1 px-3 py-3 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1",
-    small = "form-select border border-gray-160 border-solid text-13s text-black-760 rounded-[3px] appearence-none placeholderColor-gray shadow-none",
-    regular = "form-select flex w-full mt-1 px-3 py-3 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1",
+    default = "form-select flex w-full mt-1 px-3 py-2 bg-background-default border shadow-sm border-border-default placeholder:text-content-deemphasized focus:outline-none [&:is(:hover,:focus)]:border-state-focushover-border block w-full rounded-md focus:ring-0 text-14s leading-[22px]",
+    small = "form-select border border-border-default  text-13s text-content-default rounded-[3px] appearence-none placeholder:text-content-deemphasized shadow-none",
+    regular = "form-select flex w-full mt-1 px-3 py-3 bg-background-default border shadow-sm border-border-default placeholder:text-content-deemphasized focus:outline-none [&:is(:hover,:focus)]:border-state-focushover-border block w-full rounded-md sm:text-sm focus:ring-0",
     wrapper = "flex w-full flex-col relative",
     error = "absolute top-[100%]"
 }

package/dist/cjs/types/shared/configs/themeConfig.d.ts

@@ -18,17 +18,17 @@ export declare const themeConfigs: {
         };
         extend: {
             animation: {
-                "spin-slow": string;
+                'spin-slow': string;
             };
             transitionDelay: {
-                "150": string;
+                '150': string;
             };
             screens: {
                 sm: string;
                 md: string;
                 lg: string;
                 xl: string;
-                "2xl": string;
+                '2xl': string;
             };
             borderColor: {
                 tcustomerror: string;
@@ -36,7 +36,7 @@ export declare const themeConfigs: {
             colors: {
                 transparent: string;
                 current: string;
-                "sky-light-blue": string;
+                'sky-light-blue': string;
                 btn: {
                     black: string;
                     disable: string;
@@ -240,17 +240,15 @@ export declare const themeConfigs: {
                     };
                 };
                 state: {
+                    focushover: {
+                        foreground: string;
+                        background: string;
+                        border: string;
+                    };
                     active: {
-                        dark: {
-                            foreground: string;
-                            background: string;
-                            border: string;
-                        };
-                        light: {
-                            foreground: string;
-                            background: string;
-                            border: string;
-                        };
+                        foreground: string;
+                        background: string;
+                        border: string;
                     };
                     disabled: {
                         foreground: string;
@@ -275,29 +273,29 @@ export declare const themeConfigs: {
                 gray600: string;
             };
             fontSize: {
-                "8s": string[];
-                "9s": string[];
-                "10s": string[];
-                "11s": string[];
-                "12s": string[];
-                "13s": string[];
-                "14s": string[];
-                "21s": string[];
-                "16s": string[];
-                "25s": string[];
-                "17s": string[];
-                "18s": string[];
-                "19s": string[];
-                "20s": string[];
-                "24s": string[];
-                "24-32s": string[];
-                "26s": string[];
-                "28s": string[];
-                "32s": string[];
-                "42s": string[];
-                "40s": string[];
-                "48s": string[];
-                "54s": string[];
+                '8s': string[];
+                '9s': string[];
+                '10s': string[];
+                '11s': string[];
+                '12s': string[];
+                '13s': string[];
+                '14s': string[];
+                '21s': string[];
+                '16s': string[];
+                '25s': string[];
+                '17s': string[];
+                '18s': string[];
+                '19s': string[];
+                '20s': string[];
+                '24s': string[];
+                '24-32s': string[];
+                '26s': string[];
+                '28s': string[];
+                '32s': string[];
+                '42s': string[];
+                '40s': string[];
+                '48s': string[];
+                '54s': string[];
             };
             height: {
                 sm: string;
@@ -308,7 +306,7 @@ export declare const themeConfigs: {
                 36: string;
                 38: string;
                 40: string;
-                "60px": string;
+                '60px': string;
                 92: string;
                 78: string;
                 48: string;

package/dist/cjs/types/shared/models/components/base.model.d.ts

@@ -1,7 +1,7 @@
 import React, { InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
-import { IAdditionalClassesProp, IChildrenProp, IIconTypeProp, AlignmentType, IOnClickEventProps, TyphoTypes, TyphoComponents, IconHoverColorTypes, MessageTypes, InputType, IconType, LableTypes, ToolTipProps, selectedValue } from './common.model';
+import { IAdditionalClassesProp, IChildrenProp, IIconTypeProp, IIconV2Props, AlignmentType, IOnClickEventProps, TyphoTypes, TyphoComponents, IconHoverColorTypes, MessageTypes, InputType, IconType, LableTypes, ToolTipProps, selectedValue, IconNameType } from './common.model';
 export type VariantTypes = 'large' | 'small' | 'extraSmall' | 'largeOutlined' | 'smallOutlined' | 'extraSmallOutlined' | 'default' | 'defaultOutlined' | 'primaryBlue' | 'primaryWhite' | 'primaryWhiteDisable' | 'primaryRedBtn' | 'primaryRedBgBtn' | 'primaryWhiteSelected' | 'primaryWhiteNoBoader' | 'primaryWhiteIcon' | 'primaryRed' | 'primaryFilterSelected' | 'primaryBlueFilter' | 'smallWhite' | 'smallWhiteSelected' | 'smallBlue' | 'primaryNoBoader' | 'primaryBlue10' | 'noBoaderbgTransparent' | undefined;
-export interface IButtonProps extends IChildrenProp, IAdditionalClassesProp, IIconTypeProp, IOnClickEventProps {
+export interface IButtonProps extends IChildrenProp, IAdditionalClassesProp, IOnClickEventProps {
     /**
      * Set the button type
      */
@@ -27,9 +27,10 @@ export interface IButtonProps extends IChildrenProp, IAdditionalClassesProp, IIc
      */
     iconAlignment?: AlignmentType;
     /**
-     * Set icon classes
+     * Set icon name
      */
-    iconClass?: string;
+    icon?: IconNameType;
+    iconProps?: IIconV2Props;
     enableBagage?: boolean;
     bagageProps?: BagageProps;
     width?: string;
@@ -168,6 +169,8 @@ export interface IHookFormsInputProps extends InputHTMLAttributes<HTMLInputEleme
     iconClass?: string;
     isIcon?: boolean;
     icon?: string;
+    iconProps?: IIconV2Props;
+    infoIconProps?: IIconV2Props;
     iconClassRight?: string;
     iconClassLeft?: string;
     iconOnClick?: () => void;
@@ -605,7 +608,7 @@ export interface ICardProps {
     /**
      * Set button type
      */
-    cardType?: 'lightGray' | 'lightGrayHalf' | 'gray' | 'white' | 'black' | 'whiteBorder' | 'bgLightBlue';
+    cardType?: 'primaryBorder' | 'lightGray' | 'lightGrayHalf' | 'gray' | 'white' | 'black' | 'whiteBorder' | 'bgLightBlue';
     /**
      * Optional for additional classes
      */

package/dist/cjs/types/shared/models/components/common.model.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { selectType, VariantTypes } from './base.model';
+import { IconVariant, selectType, VariantTypes } from './base.model';
 import { ColumnDef, OnChangeFn, PaginationState, SortingState } from '@tanstack/react-table';
 import { ITodoToggleRequestParams } from '../../../components/SideBarListView/todos';
 import { IconName } from 'lucide-react/dynamic';
@@ -24,6 +24,15 @@ export interface IIconTypeProp {
      */
     iconColor?: IconColorTypes;
 }
+export interface IIconV2Props {
+    color?: string;
+    size?: string;
+    variant?: IconVariant;
+    strokeWidth?: number;
+    absoluteStrokeWidth?: boolean;
+    additionalClasses?: string;
+}
+export type IconNameType = IconName | keyof typeof customIcons;
 export interface IAdditionalClassesProp {
     /**
      * Optional | Set the additional classes