@juspay/blend-design-system 0.0.16-beta → 0.0.16

package/dist/components/Skeleton/skeleton.tokens.d.ts

@@ -0,0 +1,56 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type SkeletonVariant = 'pulse' | 'wave' | 'shimmer';
+export type SkeletonShape = 'rectangle' | 'circle' | 'rounded';
+export type SkeletonTokensType = {
+    animation: {
+        duration: CSSObject['animationDuration'];
+        timingFunction: CSSObject['animationTimingFunction'];
+        iterationCount: CSSObject['animationIterationCount'];
+        direction: CSSObject['animationDirection'];
+    };
+    colors: {
+        base: CSSObject['backgroundColor'];
+        highlight: CSSObject['backgroundColor'];
+        shimmer: CSSObject['backgroundColor'];
+    };
+    borderRadius: {
+        rectangle: CSSObject['borderRadius'];
+        rounded: CSSObject['borderRadius'];
+        circle: CSSObject['borderRadius'];
+    };
+    spacing: {
+        gap: CSSObject['gap'];
+        margin: CSSObject['margin'];
+    };
+    sizes: {
+        text: {
+            height: CSSObject['height'];
+            minWidth: CSSObject['minWidth'];
+        };
+        avatar: {
+            sm: CSSObject['width'];
+            md: CSSObject['width'];
+            lg: CSSObject['width'];
+        };
+        button: {
+            sm: {
+                height: CSSObject['height'];
+                minWidth: CSSObject['minWidth'];
+            };
+            md: {
+                height: CSSObject['height'];
+                minWidth: CSSObject['minWidth'];
+            };
+            lg: {
+                height: CSSObject['height'];
+                minWidth: CSSObject['minWidth'];
+            };
+        };
+    };
+};
+export type ResponsiveSkeletonTokens = {
+    [key in keyof BreakpointType]: SkeletonTokensType;
+};
+export declare const getSkeletonTokens: (foundationToken: FoundationTokenType) => ResponsiveSkeletonTokens;

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

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { BlockProps } from '../Primitives/Block/Block';
+import { SkeletonVariant, SkeletonShape } from './skeleton.tokens';
+import { ButtonType, ButtonSize, ButtonSubType } from '../Button/types';
+export type SkeletonSize = 'sm' | 'md' | 'lg';
+export type BaseSkeletonProps = {
+    variant?: SkeletonVariant;
+    loading?: boolean;
+    'data-testid'?: string;
+};
+export type SkeletonProps = BaseSkeletonProps & Omit<BlockProps, 'children'> & {
+    children?: ReactNode;
+    animate?: boolean;
+    width?: string | number;
+    height?: string | number;
+    shape?: SkeletonShape;
+};
+export type SkeletonAvatarProps = BaseSkeletonProps & Omit<BlockProps, 'children'> & {
+    size?: SkeletonSize;
+    shape?: 'circle' | 'square';
+};
+export type SkeletonButtonProps = BaseSkeletonProps & Omit<BlockProps, 'children'> & {
+    buttonType?: ButtonType;
+    size?: ButtonSize;
+    subType?: ButtonSubType;
+    width?: string | number;
+    fullWidth?: boolean;
+    buttonGroupPosition?: 'center' | 'left' | 'right';
+    text?: string;
+    hasLeadingIcon?: boolean;
+    hasTrailingIcon?: boolean;
+};
+export type SkeletonCardProps = BaseSkeletonProps & Omit<BlockProps, 'children'> & {
+    children?: ReactNode;
+    padding?: string | number;
+};
+export { SkeletonVariant, SkeletonShape };

package/dist/context/ThemeContext.d.ts

@@ -33,6 +33,7 @@ import { ResponsiveCardTokens } from '../components/Card/card.tokens';
 import { ResponsiveTopbarTokens } from '../components/Topbar/topbar.tokens';
 import { ThemeType } from '../tokens';
 import { BREAKPOINTS } from '../breakpoints/breakPoints';
+import { ResponsiveSkeletonTokens } from '../components/Skeleton/skeleton.tokens';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: SearchInputTokensType;
@@ -66,6 +67,7 @@ export type ComponentTokenType = {
     SNACKBAR?: ResponsiveSnackbarTokens;
     KEYVALUEPAIR?: ResponsiveKeyValuePairTokens;
     CARD?: ResponsiveCardTokens;
+    SKELETON?: ResponsiveSkeletonTokens;
     TOPBAR?: ResponsiveTopbarTokens;
 };
 type ThemeContextType = {

package/dist/context/useComponentToken.d.ts

@@ -31,5 +31,6 @@ import { ResponsiveChartTokens } from '../components/Charts/chart.tokens';
 import { ResponsiveSnackbarTokens } from '../components/Snackbar/snackbar.tokens';
 import { ResponsiveKeyValuePairTokens } from '../components/KeyValuePair/KeyValuePair.tokens';
 import { ResponsiveCardTokens } from '../components/Card/card.tokens';
+import { ResponsiveSkeletonTokens } from '../components/Skeleton/skeleton.tokens';
 import { ResponsiveTopbarTokens } from '../components/Topbar/topbar.tokens';
-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 | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveTopbarTokens;
+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 | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens;

package/dist/main.d.ts

@@ -29,6 +29,7 @@ export * from './components/SingleSelect';
 export * from './components/Slider';
 export * from './components/ProgressBar';
 export * from './components/Drawer';
+export * from './components/Skeleton';
 export * from './components/ButtonGroup';
 export * from './components/Button';
 export * from './context';