@juspay/blend-design-system 0.0.13 → 0.0.14-beta

package/dist/components/DataTable/types.d.ts

@@ -225,6 +225,7 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     onPageSizeChange?: (pageSize: number) => void;
     isLoading?: boolean;
     showToolbar?: boolean;
+    showSettings?: boolean;
     headerSlot1?: ReactNode;
     headerSlot2?: ReactNode;
     enableInlineEdit?: boolean;

package/dist/components/DateRangePicker/dateRangePicker.tokens.d.ts

@@ -136,7 +136,6 @@ export type CalendarTokenType = {
             };
         };
         datePicker: {
-            marginTop: CSSObject['marginTop'];
             container: {
                 padding: CSSObject['padding'];
                 gap: CSSObject['gap'];

package/dist/components/Inputs/DropdownInput/DropdownInput.d.ts

@@ -1,3 +1,3 @@
 import { DropdownInputProps } from './types';
-declare const DropdownInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, onChange, slot, size, placeholder, dropDownValue, onDropDownChange, dropDownItems, dropdownName, onDropdownOpen, onDropdownClose, onBlur, onFocus, maxDropdownHeight, ...rest }: DropdownInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const DropdownInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, onChange, slot, size, dropdownPosition, placeholder, dropDownValue, onDropDownChange, dropDownItems, dropdownName, onDropdownOpen, onDropdownClose, onBlur, onFocus, maxDropdownHeight, ...rest }: DropdownInputProps) => import("react/jsx-runtime").JSX.Element;
 export default DropdownInput;

package/dist/components/Inputs/DropdownInput/types.d.ts

@@ -1,5 +1,6 @@
 import { TextInputSize } from '../TextInput/types';
 import { SelectMenuGroupType } from '../../Select/types';
+import { ReactNode } from 'react';
 export declare enum DropdownInputSize {
     SM = "sm",
     MD = "md",
@@ -12,6 +13,10 @@ export declare enum DropdownInputState {
     ERROR = "error",
     DISABLED = "disabled"
 }
+export declare enum DropdownPosition {
+    LEFT = "left",
+    RIGHT = "right"
+}
 export type DropdownInputProps = {
     label?: string;
     sublabel?: string;
@@ -21,7 +26,7 @@ export type DropdownInputProps = {
     hintText?: string;
     value?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    slot?: React.ReactNode;
+    slot?: ReactNode;
     size?: TextInputSize;
     dropDownValue?: string;
     onDropDownChange?: (value: string) => void;
@@ -32,4 +37,5 @@ export type DropdownInputProps = {
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
     maxDropdownHeight?: number;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onBlur' | 'onFocus'>;
+    dropdownPosition?: DropdownPosition;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onBlur' | 'onFocus' | 'slot'>;

package/dist/components/Inputs/OTPInput/OTPInput.d.ts

@@ -1,3 +1,3 @@
 import { OTPProps } from './types';
-declare const OTPInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, onChange, form, ...rest }: OTPProps) => import("react/jsx-runtime").JSX.Element;
+declare const OTPInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, length, autoFocus, onChange, form, ...rest }: OTPProps) => import("react/jsx-runtime").JSX.Element;
 export default OTPInput;

package/dist/components/Inputs/OTPInput/otpInput.tokens.d.ts

@@ -1,5 +1,6 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../../tokens/theme.token';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
 declare enum OTPInputState {
     DEFAULT = "default",
     HOVER = "hover",
@@ -29,6 +30,8 @@ export type OTPInputTokensType = {
         };
     };
 };
-declare const otpInputTokens: OTPInputTokensType;
-export declare const getOTPInputTokens: (foundationToken: FoundationTokenType) => OTPInputTokensType;
-export default otpInputTokens;
+export type ResponsiveOTPInputTokens = {
+    [key in keyof BreakpointType]: OTPInputTokensType;
+};
+export declare const getOTPInputTokens: (foundationToken: FoundationTokenType) => ResponsiveOTPInputTokens;
+export {};

package/dist/components/Inputs/OTPInput/types.d.ts

@@ -6,6 +6,8 @@ export type OTPProps = {
     errorMessage?: string;
     hintText?: string;
     value?: string;
+    length?: number;
+    autoFocus?: boolean;
     onChange?: (value: string) => void;
     form?: string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className'>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onChange'>;

package/dist/components/Popover/popover.tokens.d.ts

@@ -8,6 +8,11 @@ export type PopoverTokenType = {
     gap: CSSObject['gap'];
     zIndex: CSSObject['zIndex'];
     borderRadius: CSSObject['borderRadius'];
+    padding: {
+        horizontal: CSSObject['paddingLeft'];
+        top: CSSObject['paddingTop'];
+        bottom: CSSObject['paddingBottom'];
+    };
     headerContainer: {
         heading: {
             fontSize: {

package/dist/components/Tabs/Tabs.d.ts

@@ -1,5 +1,13 @@
 declare const Tabs: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
     variant?: import('./types').TabsVariant;
     size?: import('./types').TabsSize;
+    items?: import('./types').TabItem[];
+    onTabClose?: (value: string) => void;
+    onTabAdd?: () => void;
+    showDropdown?: boolean;
+    showAddButton?: boolean;
+    dropdownTooltip?: string;
+    addButtonTooltip?: string;
+    maxDisplayTabs?: number;
 } & import('react').RefAttributes<HTMLDivElement>>;
 export default Tabs;

package/dist/components/Tabs/TabsList.d.ts

@@ -4,5 +4,15 @@ declare const TabsList: import('react').ForwardRefExoticComponent<Omit<import('@
     size?: TabsSize;
     expanded?: boolean;
     fitContent?: boolean;
+    items?: import('./types').TabItem[];
+    onTabClose?: (value: string) => void;
+    onTabAdd?: () => void;
+    showDropdown?: boolean;
+    showAddButton?: boolean;
+    dropdownTooltip?: string;
+    addButtonTooltip?: string;
+    maxDisplayTabs?: number;
+    onTabChange?: (value: string) => void;
+    activeTab?: string;
 } & import('react').RefAttributes<HTMLDivElement>>;
 export default TabsList;

package/dist/components/Tabs/TabsTrigger.d.ts

@@ -6,5 +6,7 @@ declare const TabsTrigger: import('react').ForwardRefExoticComponent<Omit<import
     leftSlot?: import('react').ReactNode;
     rightSlot?: import('react').ReactNode;
     children: string | number;
+    closable?: boolean;
+    onClose?: () => void;
 } & import('react').RefAttributes<HTMLButtonElement>>;
 export default TabsTrigger;

package/dist/components/Tabs/types.d.ts

@@ -10,15 +10,40 @@ export declare enum TabsSize {
     MD = "md",
     LG = "lg"
 }
+export type TabItem = {
+    value: string;
+    label: string;
+    content: ReactNode;
+    closable?: boolean;
+    isDefault?: boolean;
+};
 export type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
     variant?: TabsVariant;
     size?: TabsSize;
+    items?: TabItem[];
+    onTabClose?: (value: string) => void;
+    onTabAdd?: () => void;
+    showDropdown?: boolean;
+    showAddButton?: boolean;
+    dropdownTooltip?: string;
+    addButtonTooltip?: string;
+    maxDisplayTabs?: number;
 };
 export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
     variant?: TabsVariant;
     size?: TabsSize;
     expanded?: boolean;
     fitContent?: boolean;
+    items?: TabItem[];
+    onTabClose?: (value: string) => void;
+    onTabAdd?: () => void;
+    showDropdown?: boolean;
+    showAddButton?: boolean;
+    dropdownTooltip?: string;
+    addButtonTooltip?: string;
+    maxDisplayTabs?: number;
+    onTabChange?: (value: string) => void;
+    activeTab?: string;
 };
 export type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
     value: string;
@@ -27,6 +52,8 @@ export type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Tri
     leftSlot?: ReactNode;
     rightSlot?: ReactNode;
     children: string | number;
+    closable?: boolean;
+    onClose?: () => void;
 };
 export type TabsContentProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
 export type TabsStyles = {

package/dist/components/Tabs/utils.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { TabItem } from './types';
+/**
+ * Groups tabs by content and concatenates labels for tabs with identical content.
+ * Maximum 3 items can be concatenated.
+ *
+ * @param tabs - Array of tab items to process
+ * @returns Processed tabs with concatenation applied
+ */
+export declare const processTabsWithConcatenation: (tabs: TabItem[]) => TabItem[];
+/**
+ * Sorts tabs to ensure default tabs appear first
+ */
+export declare const sortTabsByDefault: (tabs: TabItem[]) => TabItem[];
+/**
+ * Filters available items that haven't been added as tabs yet
+ */
+export declare const getAvailableItems: <T extends {
+    value: string;
+}>(availableItems: T[], existingTabs: TabItem[]) => T[];
+/**
+ * Creates tab items from selected values with shared content
+ */
+export declare const createTabsFromSelection: <T extends {
+    value: string;
+    label: string;
+}>(selectedValues: string[], availableItems: T[], content: ReactNode) => TabItem[];
+/**
+ * Prepares items for SingleSelect dropdown (all tabs including scrolled-out)
+ */
+export declare const prepareDropdownItems: (tabs: TabItem[]) => {
+    items: {
+        value: string;
+        label: string;
+    }[];
+}[];
+/**
+ * Returns all tabs for display (no limiting - let horizontal scroll handle overflow)
+ */
+export declare const getDisplayTabs: (tabs: TabItem[]) => TabItem[];

package/dist/context/ThemeContext.d.ts

@@ -7,7 +7,7 @@ import { ResponsiveSwitchTokens } from '../components/Switch/switch.token';
 import { ResponsiveTextInputTokens } from '../components/Inputs/TextInput/textInput.tokens';
 import { ResponsiveNumberInputTokens } from '../components/Inputs/NumberInput/numberInput.tokens';
 import { ResponsiveAlertTokens } from '../components/Alert/alert.tokens';
-import { OTPInputTokensType } from '../components/Inputs/OTPInput/otpInput.tokens';
+import { ResponsiveOTPInputTokens } from '../components/Inputs/OTPInput/otpInput.tokens';
 import { ResponsiveTooltipTokens } from '../components/Tooltip/tooltip.tokens';
 import { ResponsiveUnitInputTokens } from '../components/Inputs/UnitInput/unitInput.tokens';
 import { MultiValueInputTokensType } from '../components/Inputs/MultiValueInput/multiValueInput.tokens';
@@ -39,7 +39,7 @@ export type ComponentTokenType = {
     TEXT_INPUT?: ResponsiveTextInputTokens;
     NUMBER_INPUT?: ResponsiveNumberInputTokens;
     ALERT?: ResponsiveAlertTokens;
-    OTP_INPUT?: OTPInputTokensType;
+    OTP_INPUT?: ResponsiveOTPInputTokens;
     TOOLTIP?: ResponsiveTooltipTokens;
     UNIT_INPUT?: ResponsiveUnitInputTokens;
     MULTI_VALUE_INPUT?: MultiValueInputTokensType;

package/dist/context/useComponentToken.d.ts

@@ -9,7 +9,7 @@ import { ComponentTokenType } from './ThemeContext';
 import { ResponsiveTextInputTokens } from '../components/Inputs/TextInput/textInput.tokens';
 import { ResponsiveNumberInputTokens } from '../components/Inputs/NumberInput/numberInput.tokens';
 import { ResponsiveAlertTokens } from '../components/Alert/alert.tokens';
-import { OTPInputTokensType } from '../components/Inputs/OTPInput/otpInput.tokens';
+import { ResponsiveOTPInputTokens } from '../components/Inputs/OTPInput/otpInput.tokens';
 import { ResponsiveTooltipTokens } from '../components/Tooltip/tooltip.tokens';
 import { ResponsiveUnitInputTokens } from '../components/Inputs/UnitInput/unitInput.tokens';
 import { MultiValueInputTokensType } from '../components/Inputs/MultiValueInput/multiValueInput.tokens';
@@ -29,4 +29,4 @@ import { DrawerTokensType } from '../components/Drawer/drawer.tokens';
 import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.tokens';
 import { ResponsiveChartTokens } from '../components/Charts/chart.tokens';
 import { ResponsiveSnackbarTokens } from '../components/Snackbar/snackbar.tokens';
-export declare const useComponentToken: (component: keyof ComponentTokenType) => SearchInputTokensType | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | OTPInputTokensType | ResponsiveUnitInputTokens | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ProgressBarTokenType | DrawerTokensType | ResponsiveChartTokens | ResponsiveSnackbarTokens;
+export declare const useComponentToken: (component: keyof ComponentTokenType) => SearchInputTokensType | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ProgressBarTokenType | DrawerTokensType | ResponsiveChartTokens | ResponsiveSnackbarTokens;