@juspay/blend-design-system 0.0.24 → 0.0.25-beta

package/dist/components/animations/ChevronAnimation/types.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+export declare enum ChevronAnimationDirection {
+    DOWN = "down",
+    RIGHT = "right",
+    UP = "up",
+    LEFT = "left"
+}
+export declare enum ChevronAnimationVariant {
+    ROTATE_180 = "rotate-180",
+    ROTATE_90 = "rotate-90",
+    ROTATE_270 = "rotate-270"
+}
+export declare enum ChevronAnimationSize {
+    SMALL = "sm",
+    MEDIUM = "md",
+    LARGE = "lg"
+}
+export interface ChevronAnimationProps {
+    children: ReactNode;
+    isOpen?: boolean;
+    direction?: ChevronAnimationDirection;
+    variant?: ChevronAnimationVariant;
+    size?: ChevronAnimationSize;
+    color?: string;
+    className?: string;
+    animationDuration?: number;
+    disabled?: boolean;
+}

package/dist/components/animations/ChevronAnimation/utils.d.ts

@@ -0,0 +1,3 @@
+import { ChevronAnimationSize, ChevronAnimationVariant, ChevronAnimationDirection } from './types';
+export declare const getChevronTransform: (direction: ChevronAnimationDirection, variant: ChevronAnimationVariant, isOpen: boolean) => string;
+export declare const getChevronSize: (size: ChevronAnimationSize) => string;

package/dist/components/animations/Ripple/RippleContainer.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { RippleElement } from '../../../hooks/useRipple';
+type RippleContainerProps = {
+    ripples: RippleElement[];
+};
+declare const RippleContainer: React.FC<RippleContainerProps>;
+export default RippleContainer;

package/dist/components/animations/Ripple/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RippleContainer } from './RippleContainer';
+export * from '../../../hooks/useRipple';

package/dist/components/common/error.animations.d.ts

@@ -0,0 +1,4 @@
+export declare const errorShakeAnimation: import('styled-components').RuleSet<object>;
+export declare const getErrorShakeStyle: (shouldShake: boolean) => {
+    animation: string | undefined;
+};

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

@@ -0,0 +1,2 @@
+export { errorShakeAnimation, getErrorShakeStyle } from './error.animations';
+export { useErrorShake } from './useErrorShake';

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

@@ -0,0 +1,6 @@
+/**
+ * Hook to manage error shake animation state
+ * @param error - Whether the component is in an error state
+ * @returns shouldShake - Boolean indicating if shake animation should be active
+ */
+export declare const useErrorShake: (error: boolean) => boolean;

package/dist/context/ThemeContext.d.ts

@@ -39,8 +39,10 @@ import { ResponsiveCodeBlockTokens } from '../components/CodeBlock/codeBlock.tok
 import { ThemeType } from '../tokens';
 import { ResponsiveSkeletonTokens } from '../components/Skeleton/skeleton.tokens';
 import { BREAKPOINTS } from '../breakpoints/breakPoints';
+import { ResponsiveMobileNavigationTokens } from '../components/Sidebar/SidebarMobile/mobile.tokens';
 import { ResponsiveStepperTokens } from '../components/Stepper/stepper.tokens';
 import { ResponsiveWorkflowTokens } from '../components/WorkflowCanvas/workflow.tokens';
+import { Theme } from './ThemeProvider';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: ResponsiveSearchInputTokens;
@@ -80,6 +82,7 @@ export type ComponentTokenType = {
     AVATAR?: ResponsiveAvatarTokens;
     AVATAR_GROUP?: ResponsiveAvatarGroupTokens;
     SIDEBAR?: ResponsiveSidebarTokens;
+    MOBILE_NAVIGATION?: ResponsiveMobileNavigationTokens;
     UPLOAD?: ResponsiveUploadTokens;
     CODE_BLOCK?: ResponsiveCodeBlockTokens;
     WORKFLOW_CANVAS?: ResponsiveWorkflowTokens;
@@ -88,6 +91,7 @@ type ThemeContextType = {
     foundationTokens: ThemeType;
     componentTokens: Required<ComponentTokenType>;
     breakpoints: typeof BREAKPOINTS;
+    theme: Theme | string;
 };
 declare const ThemeContext: import('react').Context<ThemeContextType>;
 export declare const useTheme: () => ThemeContextType;

package/dist/context/ThemeProvider.d.ts

@@ -1,11 +1,16 @@
 import { BreakpointType } from '../breakpoints/breakPoints';
 import { ThemeType } from '../tokens';
 import { ComponentTokenType } from './ThemeContext';
+export declare enum Theme {
+    LIGHT = "light",
+    DARK = "dark"
+}
 type ThemeProviderProps = {
     foundationTokens?: ThemeType;
     componentTokens?: ComponentTokenType;
     breakpoints?: BreakpointType;
+    theme?: Theme | string;
     children: React.ReactNode;
 };
-declare const ThemeProvider: ({ foundationTokens, componentTokens, breakpoints, children, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const ThemeProvider: ({ foundationTokens, componentTokens, breakpoints, theme, children, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default ThemeProvider;

package/dist/context/index.d.ts

@@ -1,4 +1,4 @@
-export { default as ThemeProvider } from './ThemeProvider';
+export { default as ThemeProvider, Theme } from './ThemeProvider';
 export { useTheme } from './ThemeContext';
 export type { ComponentTokenType } from './ThemeContext';
 export type { ThemeType } from '../tokens';

package/dist/context/initComponentTokens.d.ts

@@ -1,4 +1,5 @@
 import { ThemeType } from '../tokens';
 import { ComponentTokenType } from './ThemeContext';
-declare const initTokens: (componentTokens: ComponentTokenType, foundationTokens: ThemeType) => Required<ComponentTokenType>;
+import { Theme } from './ThemeProvider';
+declare const initTokens: (componentTokens: ComponentTokenType, foundationTokens: ThemeType, theme?: Theme | string) => Required<ComponentTokenType>;
 export default initTokens;

package/dist/context/useComponentToken.d.ts

@@ -40,4 +40,5 @@ import { ResponsiveSidebarTokens } from '../components/Sidebar/sidebar.tokens';
 import { ResponsiveUploadTokens } from '../components/Upload/upload.tokens';
 import { ResponsiveCodeBlockTokens } from '../components/CodeBlock/codeBlock.token';
 import { ResponsiveWorkflowTokens } from '../components/WorkflowCanvas/workflow.tokens';
-export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveStepperTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveUploadTokens | ResponsiveCodeBlockTokens | ResponsiveWorkflowTokens;
+import { ResponsiveMobileNavigationTokens } from '../components/Sidebar/SidebarMobile/mobile.tokens';
+export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveStepperTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveUploadTokens | ResponsiveCodeBlockTokens | ResponsiveWorkflowTokens | ResponsiveMobileNavigationTokens;

package/dist/hooks/useRipple.d.ts

@@ -0,0 +1,11 @@
+export type RippleElement = {
+    id: string;
+    x: number;
+    y: number;
+    size: number;
+};
+export declare const useRipple: () => {
+    ripples: RippleElement[];
+    createRipple: (event: React.MouseEvent<HTMLElement>) => void;
+    clearRipples: () => void;
+};