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

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

@@ -0,0 +1,64 @@
+import { SkeletonProps } from './types';
+/**
+ * Enhanced Skeleton with compound component pattern
+ *
+ * Usage:
+ * <Skeleton loading={true}>
+ *   <Skeleton.Avatar size="md" />
+ *   <Skeleton.Text lines={2} />
+ *   <Skeleton.Button />
+ * </Skeleton>
+ *
+ * Or traditional:
+ * <Skeleton.Text loading={isLoading} lines={3} />
+ */
+declare const SkeletonCompound: import('react').ForwardRefExoticComponent<import('./types').BaseSkeletonProps & Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
+    children?: import('react').ReactNode;
+    animate?: boolean;
+    width?: string | number;
+    height?: string | number;
+    shape?: import('./skeleton.tokens').SkeletonShape;
+} & import('react').RefAttributes<HTMLDivElement>> & {
+    /**
+     * Avatar skeleton with circular or square shapes and multiple sizes
+     */
+    Avatar: import('react').ForwardRefExoticComponent<import('./types').BaseSkeletonProps & Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
+        size?: import('./types').SkeletonSize;
+        shape?: "circle" | "square";
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * Button skeleton with perfect token mirroring and dynamic sizing
+     */
+    Button: import('react').ForwardRefExoticComponent<import('./types').BaseSkeletonProps & Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
+        buttonType?: import('../Button').ButtonType;
+        size?: import('../Button').ButtonSize;
+        subType?: import('../Button').ButtonSubType;
+        width?: string | number;
+        fullWidth?: boolean;
+        buttonGroupPosition?: "center" | "left" | "right";
+        text?: string;
+        hasLeadingIcon?: boolean;
+        hasTrailingIcon?: boolean;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * Card skeleton with default layout or custom children
+     */
+    Card: import('react').ForwardRefExoticComponent<import('./types').BaseSkeletonProps & Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
+        children?: import('react').ReactNode;
+        padding?: string | number;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * Base skeleton component for custom shapes and layouts
+     */
+    Base: import('react').ForwardRefExoticComponent<import('./types').BaseSkeletonProps & Omit<import('../Primitives/Block/Block').BlockProps, "children"> & {
+        children?: import('react').ReactNode;
+        animate?: boolean;
+        width?: string | number;
+        height?: string | number;
+        shape?: import('./skeleton.tokens').SkeletonShape;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Circle: import('react').ForwardRefExoticComponent<Omit<SkeletonProps, "shape"> & import('react').RefAttributes<HTMLDivElement>>;
+    Rectangle: import('react').ForwardRefExoticComponent<Omit<SkeletonProps, "shape"> & import('react').RefAttributes<HTMLDivElement>>;
+    Rounded: import('react').ForwardRefExoticComponent<Omit<SkeletonProps, "shape"> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default SkeletonCompound;

package/dist/components/Skeleton/hooks/useSkeletonBase.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { SkeletonTokensType } from '../skeleton.tokens';
+/**
+ * Shared hook for all skeleton components to eliminate code duplication
+ * Handles token fetching, loading state, and motion preferences
+ */
+export declare const useSkeletonBase: (loading: boolean, children?: ReactNode) => {
+    shouldRender: boolean;
+    fallback: string | number | bigint | true | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
+    tokens: null;
+    prefersReducedMotion: boolean;
+} | {
+    shouldRender: boolean;
+    fallback: null;
+    tokens: SkeletonTokensType;
+    prefersReducedMotion: boolean;
+};
+/**
+ * Common skeleton component props validation and defaults
+ */
+export declare const useSkeletonDefaults: <T extends Record<string, unknown>>(props: T, defaults: Partial<T>) => T;

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

@@ -0,0 +1,10 @@
+export { default as Skeleton } from './SkeletonCompound';
+export { default as SkeletonBase } from './Skeleton';
+export { default as SkeletonAvatar } from './SkeletonAvatar';
+export { default as SkeletonButton } from './SkeletonButton';
+export { default as SkeletonCard } from './SkeletonCard';
+export { useSkeletonBase } from './hooks/useSkeletonBase';
+export type { SkeletonProps, SkeletonAvatarProps, SkeletonButtonProps, SkeletonCardProps, SkeletonSize, BaseSkeletonProps, SkeletonVariant, SkeletonShape, } from './types';
+export type { SkeletonTokensType, ResponsiveSkeletonTokens, } from './skeleton.tokens';
+export { getSkeletonTokens } from './skeleton.tokens';
+export { default } from './SkeletonCompound';

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/components/StatCard/StatCard.d.ts

@@ -1,6 +1,6 @@
 import { StatCardProps } from './types';
 declare const StatCard: {
-    ({ title, value, valueTooltip, change, subtitle, variant, chartData, progressValue, titleIcon, actionIcon, helpIconText, dropdownProps, maxWidth, xAxis, yAxis, valueFormatter, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ title, value, valueTooltip, change, subtitle, variant, chartData, progressValue, titleIcon, actionIcon, helpIconText, dropdownProps, maxWidth, xAxis, yAxis, valueFormatter, height, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default StatCard;

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

@@ -45,4 +45,5 @@ export type StatCardProps = {
     xAxis?: StatCardAxisConfig;
     yAxis?: StatCardAxisConfig;
     valueFormatter?: AxisType;
+    height?: string;
 };

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,8 @@ export * from './components/SingleSelect';
 export * from './components/Slider';
 export * from './components/ProgressBar';
 export * from './components/Drawer';
+export * from './components/Skeleton';
+export * from './components/KeyValuePair';
 export * from './components/ButtonGroup';
 export * from './components/Button';
 export * from './context';