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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/Charts/chart.tokens.d.ts +109 -0
  2. package/dist/components/Charts/renderChart.d.ts +1 -1
  3. package/dist/components/Charts/types.d.ts +18 -0
  4. package/dist/context/ThemeContext.d.ts +2 -0
  5. package/dist/context/useComponentToken.d.ts +2 -1
  6. package/dist/main.js +13404 -12678
  7. package/package.json +1 -1
package/dist/components/Charts/chart.tokens.d.ts ADDED
@@ -0,0 +1,109 @@
1
+ import { CSSObject } from 'styled-components';
2
+ import { ChartLegendPosition } from './types';
3
+ import { FoundationTokenType } from '../../tokens/theme.token';
4
+ import { BreakpointType } from '../../breakpoints/breakPoints';
5
+ export type ChartState = 'default' | 'hover' | 'active' | 'fullscreen' | 'collapsed';
6
+ export type ChartSize = 'sm' | 'md' | 'lg';
7
+ export type ChartVariant = 'container' | 'no-container';
8
+ export type ChartHeight = 'default' | 'fullscreen' | 'small';
9
+ export type ChartTokensType = {
10
+ container: {
11
+ backgroundColor: {
12
+ [key in ChartState]: CSSObject['backgroundColor'];
13
+ };
14
+ border: {
15
+ [key in ChartVariant]: {
16
+ [key in ChartState]: CSSObject['border'];
17
+ };
18
+ };
19
+ borderRadius: {
20
+ [key in ChartState]: CSSObject['borderRadius'];
21
+ };
22
+ padding: {
23
+ [key in ChartSize]: CSSObject['padding'];
24
+ };
25
+ gap: {
26
+ [key in ChartSize]: CSSObject['gap'];
27
+ };
28
+ shadow: {
29
+ [key in ChartVariant]: CSSObject['boxShadow'];
30
+ };
31
+ };
32
+ header: {
33
+ padding: {
34
+ [key in ChartSize]: CSSObject['padding'];
35
+ };
36
+ gap: CSSObject['gap'];
37
+ backgroundColor: CSSObject['backgroundColor'];
38
+ borderBottom: CSSObject['borderBottom'];
39
+ minHeight: CSSObject['minHeight'];
40
+ };
41
+ content: {
42
+ padding: {
43
+ [key in ChartSize]: CSSObject['padding'];
44
+ };
45
+ paddingX: {
46
+ [key in ChartSize]: CSSObject['padding'];
47
+ };
48
+ gap: {
49
+ [key in ChartSize]: CSSObject['gap'];
50
+ };
51
+ height: {
52
+ [key in ChartHeight]: CSSObject['height'];
53
+ };
54
+ };
55
+ legend: {
56
+ gap: {
57
+ [key in ChartSize]: CSSObject['gap'];
58
+ };
59
+ padding: {
60
+ [key in ChartSize]: CSSObject['padding'];
61
+ };
62
+ width: {
63
+ [key in ChartLegendPosition]: CSSObject['width'];
64
+ };
65
+ item: {
66
+ padding: CSSObject['padding'];
67
+ gap: CSSObject['gap'];
68
+ borderRadius: CSSObject['borderRadius'];
69
+ backgroundColor: {
70
+ [key in ChartState]: CSSObject['backgroundColor'];
71
+ };
72
+ color: {
73
+ [key in ChartState]: CSSObject['color'];
74
+ };
75
+ fontSize: CSSObject['fontSize'];
76
+ fontWeight: CSSObject['fontWeight'];
77
+ };
78
+ button: {
79
+ fontSize: CSSObject['fontSize'];
80
+ fontWeight: CSSObject['fontWeight'];
81
+ color: CSSObject['color'];
82
+ backgroundColor: CSSObject['backgroundColor'];
83
+ border: CSSObject['border'];
84
+ borderRadius: CSSObject['borderRadius'];
85
+ padding: CSSObject['padding'];
86
+ };
87
+ };
88
+ fullscreen: {
89
+ container: {
90
+ position: CSSObject['position'];
91
+ top: CSSObject['top'];
92
+ left: CSSObject['left'];
93
+ width: CSSObject['width'];
94
+ height: CSSObject['height'];
95
+ zIndex: CSSObject['zIndex'];
96
+ backgroundColor: CSSObject['backgroundColor'];
97
+ transform: CSSObject['transform'];
98
+ transformOrigin: CSSObject['transformOrigin'];
99
+ };
100
+ content: {
101
+ height: CSSObject['height'];
102
+ padding: CSSObject['padding'];
103
+ };
104
+ };
105
+ };
106
+ export type ResponsiveChartTokens = {
107
+ [key in keyof BreakpointType]: ChartTokensType;
108
+ };
109
+ export declare const getChartTokens: (foundationToken: FoundationTokenType) => ResponsiveChartTokens;
package/dist/components/Charts/renderChart.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { RenderChartProps } from './types';
2
- export declare const renderChart: ({ flattenedData, chartType, hoveredKey, lineKeys, colors, setHoveredKey, xAxisLabel, yAxisLabel, data: originalData, selectedKeys, }: RenderChartProps) => import("react/jsx-runtime").JSX.Element;
2
+ export declare const renderChart: ({ flattenedData, chartType, hoveredKey, lineKeys, colors, setHoveredKey, xAxisLabel, yAxisLabel, data: originalData, selectedKeys, isSmallScreen, }: RenderChartProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/Charts/types.d.ts CHANGED
@@ -20,12 +20,21 @@ export declare enum ChartType {
20
20
  BAR = "bar",
21
21
  PIE = "pie"
22
22
  }
23
+ export declare enum LegendsChangeType {
24
+ INCREASE = "increase",
25
+ DECREASE = "decrease"
26
+ }
23
27
  export type NewNestedDataPoint = {
24
28
  name: string;
25
29
  data: {
26
30
  [key: string]: DataPoint;
27
31
  };
28
32
  };
33
+ export type StackedLegendsDataPoint = {
34
+ value: number;
35
+ delta: number;
36
+ changeType: LegendsChangeType;
37
+ };
29
38
  export type RenderChartProps = {
30
39
  flattenedData: FlattenedDataPoint[];
31
40
  chartType: ChartType;
@@ -37,6 +46,7 @@ export type RenderChartProps = {
37
46
  yAxisLabel?: string;
38
47
  data: NewNestedDataPoint[];
39
48
  selectedKeys: string[];
49
+ isSmallScreen?: boolean;
40
50
  };
41
51
  export type ChartsProps = {
42
52
  chartType?: ChartType;
@@ -50,6 +60,8 @@ export type ChartsProps = {
50
60
  slot3?: ReactNode;
51
61
  legendPosition?: ChartLegendPosition;
52
62
  chartHeaderSlot: ReactNode;
63
+ stackedLegends?: boolean;
64
+ stackedLegendsData?: StackedLegendsDataPoint[];
53
65
  };
54
66
  export type FlattenedDataPoint = {
55
67
  name: string;
@@ -60,6 +72,10 @@ export type ChartHeaderProps = {
60
72
  slot2: React.ReactNode;
61
73
  slot3: React.ReactNode;
62
74
  chartHeaderSlot: ReactNode;
75
+ onFullscreen?: () => void;
76
+ onExitFullscreen?: () => void;
77
+ isFullscreen?: boolean;
78
+ isSmallScreen?: boolean;
63
79
  };
64
80
  export type ChartLegendsProps = {
65
81
  chartContainerRef: React.RefObject<HTMLDivElement>;
@@ -73,6 +89,8 @@ export type ChartLegendsProps = {
73
89
  hoveredKey: string | null;
74
90
  activeKeys: string[] | null;
75
91
  stacked?: boolean;
92
+ isSmallScreen?: boolean;
93
+ stackedLegendsData?: StackedLegendsDataPoint[];
76
94
  };
77
95
  export type CustomTooltipProps = TooltipProps<ValueType, NameType> & {
78
96
  hoveredKey: string | null;
package/dist/context/ThemeContext.d.ts CHANGED
@@ -28,6 +28,7 @@ import { ProgressBarTokenType } from '../components/ProgressBar/progressbar.toke
28
28
  import { DrawerTokensType } from '../components/Drawer/drawer.tokens';
29
29
  import { BreakpointType } from '../breakpoints/breakPoints';
30
30
  import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.tokens';
31
+ import { ResponsiveChartTokens } from '../components/Charts/chart.tokens';
31
32
  export type ComponentTokenType = {
32
33
  TAGS?: ResponsiveTagTokens;
33
34
  SEARCH_INPUT?: SearchInputTokensType;
@@ -57,6 +58,7 @@ export type ComponentTokenType = {
57
58
  STAT_CARD?: StatCardTokenType;
58
59
  PROGRESS_BAR?: ProgressBarTokenType;
59
60
  DRAWER?: DrawerTokensType;
61
+ CHARTS?: ResponsiveChartTokens;
60
62
  };
61
63
  type ThemeContextType = {
62
64
  foundationTokens: ThemeType;
package/dist/context/useComponentToken.d.ts CHANGED
@@ -27,4 +27,5 @@ import { StatCardTokenType } from '../components/StatCard/statcard.tokens';
27
27
  import { ProgressBarTokenType } from '../components/ProgressBar/progressbar.tokens';
28
28
  import { DrawerTokensType } from '../components/Drawer/drawer.tokens';
29
29
  import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.tokens';
30
- export declare const useComponentToken: (component: keyof ComponentTokenType) => SearchInputTokensType | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | OTPInputTokensType | ResponsiveUnitInputTokens | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | TooltipTokensType | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | TableTokenType | CalendarTokenType | ResponsiveAccordionTokens | StatCardTokenType | ProgressBarTokenType | DrawerTokensType;
30
+ import { ResponsiveChartTokens } from '../components/Charts/chart.tokens';
31
+ export declare const useComponentToken: (component: keyof ComponentTokenType) => SearchInputTokensType | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | OTPInputTokensType | ResponsiveUnitInputTokens | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | TooltipTokensType | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | TableTokenType | CalendarTokenType | ResponsiveAccordionTokens | StatCardTokenType | ProgressBarTokenType | DrawerTokensType | ResponsiveChartTokens;