@juspay/blend-design-system 0.0.36 → 0.0.37-beta.1

package/dist/components/TabsV2/tabsV2.types.d.ts

@@ -0,0 +1,68 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export declare enum TabsV2Variant {
+    BOXED = "boxed",
+    FLOATING = "floating",
+    UNDERLINE = "underline",
+    PILLS = "pills"
+}
+export declare enum TabsV2Size {
+    MD = "md",
+    LG = "lg"
+}
+export type TabsV2State = 'default' | 'hover' | 'active' | 'disabled';
+export type TabsV2TabItem = {
+    value: string;
+    label: string;
+    content: ReactNode;
+    disabled?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+    newItem?: boolean;
+};
+export type TabsV2Props = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
+    variant?: TabsV2Variant;
+    size?: TabsV2Size;
+    expanded?: boolean;
+    fitContent?: boolean;
+    disabled?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+    stickyHeader?: boolean;
+    offsetTop?: number;
+};
+export type TabsV2ListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    variant?: TabsV2Variant;
+    size?: TabsV2Size;
+    expanded?: boolean;
+    fitContent?: boolean;
+    disabled?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+    stickyHeader?: boolean;
+    offsetTop?: number;
+};
+export type TabsV2TriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+    value: string;
+    variant?: TabsV2Variant;
+    size?: TabsV2Size;
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+    children: string | number;
+    disabled?: boolean;
+    /**
+     * When true, renders a close (X) affordance inside the trigger.
+     * Useful for "new/temporary" tabs that can be removed.
+     */
+    closable?: boolean;
+    onClose?: () => void;
+    isActive?: boolean;
+    isOverlay?: boolean;
+    tabsGroupId?: string;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+};
+export type TabsV2ContentProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;

package/dist/components/TabsV2/tabsV2.utils.d.ts

@@ -0,0 +1,18 @@
+import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
+import { TabsV2TabItem } from './tabsV2.types';
+export declare const processTabsWithConcatenation: (tabs: TabsV2TabItem[]) => TabsV2TabItem[];
+export declare const prepareDropdownItems: (tabs: TabsV2TabItem[], originalItems?: TabsV2TabItem[]) => {
+    items: {
+        value: string;
+        label: string;
+    }[];
+}[];
+export declare const calculateTabIndicatorPosition: (tabElement: HTMLElement, listElement: HTMLDivElement) => {
+    tabLeft: number;
+    tabWidth: number;
+};
+export declare const getActualTabValue: (processedValue: string, originalTabValues: Set<string>) => string;
+export declare const isConcatenatedTab: (tabValue: string, originalTabValues: Set<string>) => boolean;
+export declare const extractOriginalValues: (concatenatedValue: string) => string[];
+export declare const mergeItemsWithDefaultOrdering: (items: TabsV2TabItem[], defaultTabs: Set<string>, newlyAddedTabs: Set<string>) => TabsV2TabItem[];
+export declare const applyTabItemDisplayDefaults: (items: TabsV2TabItem[], disabled: boolean, showSkeleton: boolean, skeletonVariant: SkeletonVariant) => TabsV2TabItem[];

package/dist/components/common/virtualViewport.d.ts

@@ -0,0 +1,12 @@
+export declare const VIRTUAL_MIN_VIEWPORT = 120;
+export declare const VIRTUAL_DEFAULT_VIEWPORT = 340;
+/**
+ * Base viewport height for virtualized menus/lists.
+ * Ensures a reasonable minimum height even when maxHeight is small.
+ */
+export declare const getBaseVirtualViewportHeight: (maxHeight?: number) => number;
+/**
+ * Adjusted viewport height when some vertical space is reserved
+ * (e.g. search header, footer). Always enforces a minimum.
+ */
+export declare const getAdjustedVirtualViewportHeight: (maxHeight: number | undefined, reserved: number) => number;

package/dist/context/ShadowAware.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+type ShadowRootContextType = {
+    shadowRoot: ShadowRoot | null;
+    target: HTMLElement | null;
+};
+export declare const useShadowRoot: () => ShadowRootContextType;
+type ShadowAwareProps = {
+    children: ReactNode;
+    /**
+     * Target HTMLElement for styled-components to inject styles into.
+     * This should be an element inside a ShadowRoot.
+     */
+    target: HTMLElement;
+};
+declare const ShadowAware: ({ children, target }: ShadowAwareProps) => import("react/jsx-runtime").JSX.Element;
+export default ShadowAware;

package/dist/context/ThemeContext.d.ts

@@ -21,6 +21,7 @@ import { ResponsiveModalTokens } from '../components/Modal/modal.tokens';
 import { ResponsiveBreadcrumbTokens } from '../components/Breadcrumb/breadcrumb.tokens';
 import { ResponsivePopoverTokens } from '../components/Popover/popover.tokens';
 import { ResponsiveMenuTokensType } from '../components/Menu/menu.tokens';
+import { ResponsiveMenuV2TokensType } from '../components/MenuV2/menuV2.tokens';
 import { ResponsiveMultiSelectTokens } from '../components/MultiSelect/multiSelect.tokens';
 import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.tokens';
 import { ResponsiveTableTokens } from '../components/DataTable/dataTable.tokens';
@@ -58,9 +59,14 @@ import { ResponsiveChartV2Tokens } from '../components/ChartsV2/chartV2.tokens';
 import { ResponsiveTimelineTokens } from '../components/Timeline/timeline.token';
 import { ResponsiveCheckboxV2Tokens } from '../components/SelectorV2/CheckboxV2/checkboxV2.tokens';
 import { ResponsiveKeyValuePairV2Tokens } from '../components/KeyValuePairV2/keyValuePairV2.tokens';
+import { ResponsiveStatCardV2Tokens } from '../components/StatCardV2/statcardV2.tokens';
 import { ResponsiveTooltipV2Tokens } from '../components/TooltipV2/tooltipV2.tokens';
 import { ResponsiveRadioV2Tokens } from '../components/SelectorV2/RadioV2/radioV2.tokens';
 import { ResponsivePopoverV2Tokens } from '../components/PopoverV2/popoverV2.token';
+import { ResponsiveTabsV2Tokens } from '../components/TabsV2/tabsV2.tokens';
+import { ResponsiveCodeEditorV2Tokens } from '../components/CodeEditorV2/codeEditorV2.tokens';
+import { ResponsiveProgressBarV2Tokens } from '../components/ProgressBarV2/progressBarV2.tokens';
+import { ResponsiveBreadcrumbV2Tokens } from '../components/BreadcrumbV2/breadcrumbV2.tokens';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: ResponsiveSearchInputTokens;
@@ -82,6 +88,7 @@ export type ComponentTokenType = {
     BREADCRUMB?: ResponsiveBreadcrumbTokens;
     POPOVER?: ResponsivePopoverTokens;
     MENU?: ResponsiveMenuTokensType;
+    MENU_V2?: ResponsiveMenuV2TokensType;
     MULTI_SELECT?: ResponsiveMultiSelectTokens;
     SINGLE_SELECT?: ResponsiveSingleSelectTokens;
     TABLE?: ResponsiveTableTokens;
@@ -119,9 +126,14 @@ export type ComponentTokenType = {
     CHARTSV2?: ResponsiveChartV2Tokens;
     CHECKBOXV2?: ResponsiveCheckboxV2Tokens;
     KEYVALUEPAIRV2?: ResponsiveKeyValuePairV2Tokens;
+    STATCARDV2?: ResponsiveStatCardV2Tokens;
     TOOLTIPV2?: ResponsiveTooltipV2Tokens;
     RADIOV2?: ResponsiveRadioV2Tokens;
     POPOVERV2?: ResponsivePopoverV2Tokens;
+    TABSV2?: ResponsiveTabsV2Tokens;
+    BREADCRUMBV2?: ResponsiveBreadcrumbV2Tokens;
+    CODEEDITORV2?: ResponsiveCodeEditorV2Tokens;
+    PROGRESS_BARV2?: ResponsiveProgressBarV2Tokens;
 };
 type ThemeContextType = {
     foundationTokens: ThemeType;

package/dist/context/ThemeProvider.d.ts

@@ -8,6 +8,15 @@ type ThemeProviderProps = {
     breakpoints?: BreakpointType;
     theme?: Theme | string;
     children: React.ReactNode;
+    /**
+     * Target HTMLElement for styled-components to inject styles into.
+     * Use this when rendering inside a Shadow DOM.
+     * The element must be inside a shadow root.
+     *
+     * Note: This is the actual DOM element (not the ShadowRoot itself) that
+     * styled-components will use as the style injection target.
+     */
+    target?: HTMLElement;
 };
-declare const ThemeProvider: ({ foundationTokens, componentTokens, breakpoints, theme, children, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const ThemeProvider: ({ foundationTokens, componentTokens, breakpoints, theme, children, target, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default ThemeProvider;

package/dist/context/index.d.ts

@@ -3,3 +3,4 @@ export { Theme } from './theme.enum';
 export { useTheme } from './ThemeContext';
 export type { ComponentTokenType } from './ThemeContext';
 export type { ThemeType } from '../tokens';
+export { default as ShadowAware, useShadowRoot } from './ShadowAware';

package/dist/context/useComponentToken.d.ts

@@ -20,6 +20,7 @@ import { ResponsiveModalTokens } from '../components/Modal/modal.tokens';
 import { ResponsiveBreadcrumbTokens } from '../components/Breadcrumb/breadcrumb.tokens';
 import { ResponsivePopoverTokens } from '../components/Popover/popover.tokens';
 import { ResponsiveMenuTokensType } from '../components/Menu/menu.tokens';
+import { ResponsiveMenuV2TokensType } from '../components/MenuV2/menuV2.tokens';
 import { ResponsiveMultiSelectTokens } from '../components/MultiSelect/multiSelect.tokens';
 import { ResponsiveTableTokens } from '../components/DataTable/dataTable.tokens';
 import { ResponsiveCalendarTokens } from '../components/DateRangePicker/dateRangePicker.tokens';
@@ -56,6 +57,11 @@ import { ResponsiveChartV2Tokens } from '../components/ChartsV2/chartV2.tokens';
 import { ResponsiveTimelineTokens } from '../components/Timeline/timeline.token';
 import { ResponsiveCheckboxV2Tokens } from '../components/SelectorV2/CheckboxV2/checkboxV2.tokens';
 import { ResponsiveKeyValuePairV2Tokens } from '../components/KeyValuePairV2/keyValuePairV2.tokens';
+import { ResponsiveStatCardV2Tokens } from '../components/StatCardV2/statcardV2.tokens';
 import { ResponsiveRadioV2Tokens } from '../components/SelectorV2/RadioV2/radioV2.tokens';
 import { ResponsivePopoverV2Tokens } from '../components/PopoverV2/popoverV2.token';
-export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveStepperTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveUploadTokens | ResponsiveCodeBlockTokens | ResponsiveMobileNavigationTokens | ResponsiveDirectoryTokens | ResponsiveChatInputTokensType | ResponsiveButtonTokens | ResponsiveButtonV2Tokens | ResponsiveChatInputTokensType | ResponsiveTagV2Tokens | ResponsiveAlertV2Tokens | ResponsiveAccordionV2Tokens | ResponsiveSnackbarV2Tokens | ResponsiveSwitchV2Tokens | ResponsiveSingleSelectV2Tokens | ResponsiveMultiSelectV2Tokens | ResponsiveTextInputV2Tokens | ResponsiveChartV2Tokens | ResponsiveAvatarV2Tokens | ResponsiveTextInputV2Tokens | ResponsiveTimelineTokens | ResponsiveCheckboxV2Tokens | ResponsiveKeyValuePairV2Tokens | ResponsiveRadioV2Tokens | ResponsivePopoverV2Tokens | ResponsiveTextInputV2Tokens;
+import { ResponsiveTabsV2Tokens } from '../components/TabsV2/tabsV2.tokens';
+import { ResponsiveBreadcrumbV2Tokens } from '../components/BreadcrumbV2/breadcrumbV2.tokens';
+import { ResponsiveCodeEditorV2Tokens } from '../components/CodeEditorV2/codeEditorV2.tokens';
+import { ResponsiveProgressBarV2Tokens } from '../components/ProgressBarV2/progressBarV2.tokens';
+export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMenuV2TokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveStepperTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveUploadTokens | ResponsiveCodeBlockTokens | ResponsiveMobileNavigationTokens | ResponsiveDirectoryTokens | ResponsiveChatInputTokensType | ResponsiveButtonTokens | ResponsiveButtonV2Tokens | ResponsiveChatInputTokensType | ResponsiveTagV2Tokens | ResponsiveAlertV2Tokens | ResponsiveAccordionV2Tokens | ResponsiveSnackbarV2Tokens | ResponsiveSwitchV2Tokens | ResponsiveSingleSelectV2Tokens | ResponsiveMultiSelectV2Tokens | ResponsiveChartV2Tokens | ResponsiveAvatarV2Tokens | ResponsiveTextInputV2Tokens | ResponsiveTimelineTokens | ResponsiveCheckboxV2Tokens | ResponsiveKeyValuePairV2Tokens | ResponsiveStatCardV2Tokens | ResponsiveRadioV2Tokens | ResponsivePopoverV2Tokens | ResponsiveTabsV2Tokens | ResponsiveBreadcrumbV2Tokens | ResponsiveCodeEditorV2Tokens | ResponsiveProgressBarV2Tokens;

package/dist/hooks/index.d.ts

@@ -4,3 +4,4 @@ export { default as usePreventParentScroll } from './usePreventParentScroll';
 export { default as useDropdownInteractionLock } from './useDropdownInteractionLock';
 export { default as useTruncationDetection } from './useTruncationDetection';
 export type { UseTruncationDetectionOptions } from './useTruncationDetection';
+export { useShadowRoot } from '../context/ShadowAware';

package/dist/main.d.ts

@@ -45,3 +45,4 @@ export * from './tokens';
 export * from './components/ChartsV2';
 export * from './components/Timeline';
 export * from './components/AlertV2';
+export * from './components/PopoverV2';