@mbao01/common 0.4.4 → 0.5.0

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 (16) hide show
  1. package/dist/types/components/Chart/helpers.d.ts +1 -1
  2. package/dist/types/components/Chart/stories/args/index.d.ts +7 -7
  3. package/dist/types/components/Chart/types.d.ts +3 -3
  4. package/dist/types/components/DatetimePicker/DatetimeGrid.d.ts +9 -0
  5. package/dist/types/components/Form/DatetimeInput/DatetimeInput.d.ts +2 -0
  6. package/package.json +62 -62
  7. package/src/components/Chart/components/ChartTooltip.tsx +0 -1
  8. package/src/components/Chart/helpers.ts +1 -1
  9. package/src/components/Chart/stories/args/index.ts +7 -7
  10. package/src/components/Chart/stories/args/stylesArgs.ts +0 -12
  11. package/src/components/Chart/stories/examples/BarChart.tsx +3 -10
  12. package/src/components/Chart/stories/examples/LineChart.tsx +1 -6
  13. package/src/components/Chart/stories/examples/PieChart.tsx +9 -8
  14. package/src/components/Chart/types.ts +11 -3
  15. package/src/components/Form/Select/constants.ts +1 -1
  16. package/src/components/Loading/constants.ts +8 -8
package/dist/types/components/Chart/helpers.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { NameType, Payload as TooltipPayload, ValueType } from 'recharts/types/component/DefaultTooltipContent';
2
- import { Payload as LegendPayload } from 'recharts/types/component/DefaultLegendContent';
2
+ import { LegendPayload } from 'recharts';
3
3
  import { ChartConfig } from './types';
4
4
  export declare const getPayloadConfigFromPayload: (config: ChartConfig, payload: LegendPayload | TooltipPayload<ValueType, NameType>, key: string) => ({
5
5
  label?: import('react').ReactNode;
package/dist/types/components/Chart/stories/args/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { AreaProps, BarProps, LineProps, PieProps, RadarProps, RadialBarProps, XAxisProps, YAxisProps } from 'recharts';
2
2
  import { ArgTypes } from '@storybook/react-vite';
3
- import { CategoricalChartProps } from 'recharts/types/chart/generateCategoricalChart';
3
+ import { CartesianChartProps, PolarChartProps } from 'recharts/types/util/types';
4
4
  import { Flatten, OmitSVGElement } from './types';
5
5
  type AxisProps = {
6
6
  xAxis: OmitSVGElement<XAxisProps>;
@@ -8,19 +8,19 @@ type AxisProps = {
8
8
  };
9
9
  export type BarChartProps = {
10
10
  bar: OmitSVGElement<BarProps>;
11
- barChart: CategoricalChartProps;
11
+ barChart: CartesianChartProps;
12
12
  } & AxisProps;
13
13
  export type BarChartArgs = Partial<Flatten<BarChartProps>> & {};
14
14
  export declare const barChartArgs: ArgTypes;
15
15
  export type LineChartProps = {
16
16
  line: OmitSVGElement<LineProps>;
17
- lineChart: CategoricalChartProps;
17
+ lineChart: CartesianChartProps;
18
18
  } & AxisProps;
19
19
  export type LineChartArgs = Partial<Flatten<LineChartProps>> & {};
20
20
  export declare const lineChartArgs: ArgTypes;
21
21
  export type AreaChartProps = {
22
22
  area: OmitSVGElement<AreaProps>;
23
- areaChart: CategoricalChartProps;
23
+ areaChart: CartesianChartProps;
24
24
  } & AxisProps;
25
25
  export type AreaChartArgs = Partial<Flatten<AreaChartProps>> & {};
26
26
  export declare const areaArgKey: {
@@ -32,7 +32,7 @@ export declare const areaArgKey: {
32
32
  export declare const areaChartArgs: ArgTypes;
33
33
  export type PieChartProps = {
34
34
  pie: OmitSVGElement<PieProps>;
35
- pieChart: CategoricalChartProps;
35
+ pieChart: PolarChartProps;
36
36
  };
37
37
  export type PieChartArgs = Partial<Flatten<PieChartProps>> & {};
38
38
  export declare const pieArgKey: {
@@ -42,7 +42,7 @@ export declare const pieArgKey: {
42
42
  export declare const pieChartArgs: ArgTypes;
43
43
  export type RadialBarChartProps = {
44
44
  radialBar: OmitSVGElement<RadialBarProps>;
45
- radialBarChart: CategoricalChartProps;
45
+ radialBarChart: PolarChartProps;
46
46
  };
47
47
  export type RadialBarChartArgs = Partial<Flatten<RadialBarChartProps>> & {};
48
48
  export declare const radialBarArgKey: {
@@ -52,7 +52,7 @@ export declare const radialBarArgKey: {
52
52
  export declare const radialBarChartArgs: ArgTypes;
53
53
  export type RadarChartProps = {
54
54
  radar: OmitSVGElement<RadarProps>;
55
- radarChart: CategoricalChartProps;
55
+ radarChart: PolarChartProps;
56
56
  };
57
57
  export type RadarChartArgs = Partial<Flatten<RadarChartProps>> & {};
58
58
  export declare const radarArgKey: {
package/dist/types/components/Chart/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ComponentProps, ComponentType, ReactNode } from 'react';
2
- import { LegendProps, ResponsiveContainer, Tooltip } from 'recharts';
2
+ import { DefaultLegendContentProps, LegendProps, ResponsiveContainer, TooltipContentProps } from 'recharts';
3
3
  import { Theme } from '../../utilities';
4
4
  export type ChartConfig = {
5
5
  [k in string]: {
@@ -24,14 +24,14 @@ export type ChartStyleProps = {
24
24
  id: string;
25
25
  config: ChartConfig;
26
26
  };
27
- export type ChartTooltipContentProps = ComponentProps<typeof Tooltip> & ComponentProps<"div"> & {
27
+ export type ChartTooltipContentProps = Partial<TooltipContentProps<number | string | (number | string)[], string>> & ComponentProps<"div"> & {
28
28
  hideLabel?: boolean;
29
29
  hideIndicator?: boolean;
30
30
  indicator?: "line" | "dot" | "dashed";
31
31
  nameKey?: string;
32
32
  labelKey?: string;
33
33
  };
34
- export type ChartLegendContentProps = ComponentProps<"div"> & Pick<LegendProps, "payload" | "verticalAlign"> & {
34
+ export type ChartLegendContentProps = ComponentProps<"div"> & Pick<DefaultLegendContentProps, "payload"> & Pick<LegendProps, "verticalAlign"> & {
35
35
  hideIcon?: boolean;
36
36
  nameKey?: string;
37
37
  };
package/dist/types/components/DatetimePicker/DatetimeGrid.d.ts CHANGED
@@ -13,6 +13,15 @@ export declare const DatetimeGrid: import('react').ForwardRefExoticComponent<{
13
13
  readonly getRootProps: () => {
14
14
  ref: (element: HTMLElement | null) => void | null;
15
15
  };
16
+ readonly ampm: {
17
+ readonly value: "am" | "pm" | undefined;
18
+ set: (value: "am" | "pm") => void;
19
+ toggle: () => void;
20
+ getSelectProps: () => {
21
+ value: "am" | "pm" | undefined;
22
+ onChange: (e: Event | import('react').ChangeEvent<HTMLSelectElement>) => void;
23
+ };
24
+ };
16
25
  readonly options: import('timescape/react').Options;
17
26
  readonly update: import('react').Dispatch<import('react').SetStateAction<import('timescape/react').Options>>;
18
27
  }, "getRootProps" | "getInputProps">;
package/dist/types/components/Form/DatetimeInput/DatetimeInput.d.ts CHANGED
@@ -23,6 +23,7 @@ export declare const DatetimeInput: import('react').ForwardRefExoticComponent<{
23
23
  title?: HTMLDivElement["title"] | undefined;
24
24
  role?: "application" | "dialog" | undefined | undefined;
25
25
  "aria-label"?: string | undefined;
26
+ "aria-labelledby"?: string | undefined;
26
27
  footer?: import('react').ReactNode;
27
28
  animate?: boolean | undefined;
28
29
  month?: Date | undefined;
@@ -47,6 +48,7 @@ export declare const DatetimeInput: import('react').ForwardRefExoticComponent<{
47
48
  hideNavigation?: boolean | undefined;
48
49
  disableNavigation?: boolean | undefined;
49
50
  captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years" | undefined;
51
+ reverseYears?: boolean | undefined;
50
52
  navLayout?: "around" | "after" | undefined | undefined;
51
53
  fixedWeeks?: boolean | undefined;
52
54
  hideWeekdays?: boolean | undefined;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mbao01/common",
3
3
  "private": false,
4
- "version": "0.4.4",
4
+ "version": "0.5.0",
5
5
  "type": "module",
6
6
  "author": "Ayomide Bakare",
7
7
  "license": "MIT",
@@ -69,95 +69,95 @@
69
69
  "@dnd-kit/modifiers": "^9.0.0",
70
70
  "@dnd-kit/sortable": "^10.0.0",
71
71
  "@dnd-kit/utilities": "^3.2.2",
72
- "@radix-ui/react-accordion": "^1.2.11",
73
- "@radix-ui/react-alert-dialog": "^1.1.14",
72
+ "@radix-ui/react-accordion": "^1.2.12",
73
+ "@radix-ui/react-alert-dialog": "^1.1.15",
74
74
  "@radix-ui/react-avatar": "^1.1.10",
75
- "@radix-ui/react-checkbox": "^1.3.2",
76
- "@radix-ui/react-collapsible": "^1.1.11",
77
- "@radix-ui/react-context-menu": "^2.2.15",
78
- "@radix-ui/react-dialog": "^1.1.14",
79
- "@radix-ui/react-dropdown-menu": "^2.1.15",
80
- "@radix-ui/react-hover-card": "^1.1.14",
75
+ "@radix-ui/react-checkbox": "^1.3.3",
76
+ "@radix-ui/react-collapsible": "^1.1.12",
77
+ "@radix-ui/react-context-menu": "^2.2.16",
78
+ "@radix-ui/react-dialog": "^1.1.15",
79
+ "@radix-ui/react-dropdown-menu": "^2.1.16",
80
+ "@radix-ui/react-hover-card": "^1.1.15",
81
81
  "@radix-ui/react-label": "^2.1.7",
82
- "@radix-ui/react-menubar": "^1.1.15",
83
- "@radix-ui/react-navigation-menu": "^1.2.13",
84
- "@radix-ui/react-popover": "^1.1.14",
82
+ "@radix-ui/react-menubar": "^1.1.16",
83
+ "@radix-ui/react-navigation-menu": "^1.2.14",
84
+ "@radix-ui/react-popover": "^1.1.15",
85
85
  "@radix-ui/react-progress": "^1.1.7",
86
- "@radix-ui/react-scroll-area": "^1.2.9",
87
- "@radix-ui/react-select": "^2.2.5",
86
+ "@radix-ui/react-scroll-area": "^1.2.10",
87
+ "@radix-ui/react-select": "^2.2.6",
88
88
  "@radix-ui/react-separator": "^1.1.7",
89
- "@radix-ui/react-slider": "^1.3.5",
89
+ "@radix-ui/react-slider": "^1.3.6",
90
90
  "@radix-ui/react-slot": "^1.2.3",
91
- "@radix-ui/react-tabs": "^1.1.12",
92
- "@radix-ui/react-toggle": "^1.1.9",
93
- "@radix-ui/react-toggle-group": "^1.1.10",
94
- "@radix-ui/react-tooltip": "^1.2.7",
95
- "@tailwindcss/typography": "^0.5.16",
96
- "chrono-node": "^2.8.3",
91
+ "@radix-ui/react-tabs": "^1.1.13",
92
+ "@radix-ui/react-toggle": "^1.1.10",
93
+ "@radix-ui/react-toggle-group": "^1.1.11",
94
+ "@radix-ui/react-tooltip": "^1.2.8",
95
+ "@tailwindcss/typography": "^0.5.19",
96
+ "chrono-node": "^2.9.0",
97
97
  "class-variance-authority": "^0.7.1",
98
98
  "clsx": "^2.1.1",
99
99
  "cmdk": "^1.1.1",
100
100
  "date-fns": "^4.1.0",
101
101
  "embla-carousel-react": "^8.6.0",
102
- "lucide-react": "^0.525.0",
103
- "react-day-picker": "^9.8.0",
102
+ "lucide-react": "^0.546.0",
103
+ "react-day-picker": "^9.11.1",
104
104
  "react-dropzone": "^14.3.8",
105
- "react-international-phone": "^4.5.0",
105
+ "react-international-phone": "^4.6.0",
106
106
  "react-otp-input": "^3.1.1",
107
- "react-resizable-panels": "^3.0.3",
108
- "sonner": "^2.0.6",
107
+ "react-resizable-panels": "^3.0.6",
108
+ "sonner": "^2.0.7",
109
109
  "tailwind-merge": "^3.3.1",
110
- "timescape": "^0.7.1",
110
+ "timescape": "^0.8.0",
111
111
  "universal-cookie": "^8.0.1",
112
112
  "vaul": "^1.1.2"
113
113
  },
114
114
  "devDependencies": {
115
- "@eslint/js": "^9.30.1",
116
- "@ianvs/prettier-plugin-sort-imports": "^4.5.1",
117
- "@storybook/addon-a11y": "^9.0.16",
115
+ "@eslint/js": "^9.38.0",
116
+ "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
117
+ "@storybook/addon-a11y": "^9.1.13",
118
118
  "@storybook/addon-coverage": "^2.0.0",
119
- "@storybook/addon-docs": "^9.0.16",
120
- "@storybook/addon-links": "^9.0.16",
121
- "@storybook/addon-onboarding": "^9.0.16",
122
- "@storybook/addon-themes": "^9.0.16",
123
- "@storybook/react-vite": "^9.0.16",
119
+ "@storybook/addon-docs": "^9.1.13",
120
+ "@storybook/addon-links": "^9.1.13",
121
+ "@storybook/addon-onboarding": "^9.1.13",
122
+ "@storybook/addon-themes": "^9.1.13",
123
+ "@storybook/react-vite": "^9.1.13",
124
124
  "@storybook/test-runner": "^0.23.0",
125
- "@tailwindcss/postcss": "^4.1.11",
126
- "@tailwindcss/vite": "^4.1.11",
127
- "@testing-library/jest-dom": "^6.6.3",
125
+ "@tailwindcss/postcss": "^4.1.15",
126
+ "@tailwindcss/vite": "^4.1.15",
127
+ "@testing-library/jest-dom": "^6.9.1",
128
128
  "@testing-library/react": "^16.3.0",
129
129
  "@testing-library/user-event": "^14.6.1",
130
130
  "@types/jest-image-snapshot": "^6.4.0",
131
- "@types/node": "^24.0.13",
132
- "@types/react": "^19.1.8",
133
- "@types/react-dom": "^19.1.6",
134
- "@typescript-eslint/eslint-plugin": "^8.36.0",
135
- "@typescript-eslint/parser": "^8.36.0",
136
- "@vitejs/plugin-react": "^4.6.0",
131
+ "@types/node": "^24.9.1",
132
+ "@types/react": "^19.2.2",
133
+ "@types/react-dom": "^19.2.2",
134
+ "@typescript-eslint/eslint-plugin": "^8.46.2",
135
+ "@typescript-eslint/parser": "^8.46.2",
136
+ "@vitejs/plugin-react": "^5.0.4",
137
137
  "@vitest/coverage-v8": "^3.2.4",
138
138
  "@vitest/ui": "^3.2.4",
139
- "axe-playwright": "^2.1.0",
140
- "daisyui": "^5.0.46",
141
- "eslint": "^9.30.1",
139
+ "axe-playwright": "^2.2.2",
140
+ "daisyui": "^5.3.7",
141
+ "eslint": "^9.38.0",
142
142
  "eslint-plugin-react": "^7.37.5",
143
- "eslint-plugin-react-hooks": "^5.2.0",
144
- "eslint-plugin-react-refresh": "^0.4.20",
145
- "eslint-plugin-storybook": "^9.0.16",
146
- "globals": "^16.3.0",
143
+ "eslint-plugin-react-hooks": "^7.0.0",
144
+ "eslint-plugin-react-refresh": "^0.4.24",
145
+ "eslint-plugin-storybook": "^9.1.13",
146
+ "globals": "^16.4.0",
147
147
  "jest-image-snapshot": "^6.5.1",
148
- "jsdom": "^26.1.0",
148
+ "jsdom": "^27.0.1",
149
149
  "path": "^0.12.7",
150
150
  "postcss": "^8.5.6",
151
151
  "prettier": "^3.6.2",
152
- "react": "^19.1.0",
153
- "react-dom": "^19.1.0",
154
- "react-router-dom": "^7.6.3",
155
- "recharts": "^2.15.4",
156
- "storybook": "^9.0.16",
157
- "tailwindcss": "^4.1.11",
158
- "typescript": "^5.8.3",
159
- "typescript-eslint": "^8.36.0",
160
- "vite": "^6.3.5",
152
+ "react": "^19.2.0",
153
+ "react-dom": "^19.2.0",
154
+ "react-router-dom": "^7.9.4",
155
+ "recharts": "^3.3.0",
156
+ "storybook": "^9.1.13",
157
+ "tailwindcss": "^4.1.15",
158
+ "typescript": "^5.9.3",
159
+ "typescript-eslint": "^8.46.2",
160
+ "vite": "^6.4.1",
161
161
  "vite-plugin-dts": "^4.5.4",
162
162
  "vitest": "^3.2.4"
163
163
  },
@@ -168,5 +168,5 @@
168
168
  "recharts": "2",
169
169
  "typescript": "5"
170
170
  },
171
- "gitHead": "e3e23ca85c4e11eb4e1ce1c07bc110f9d639b818"
171
+ "gitHead": "e7b6e3197fbcdb26d8e7829b4462ceda944409ec"
172
172
  }
package/src/components/Chart/components/ChartTooltip.tsx CHANGED
@@ -15,7 +15,6 @@ import { getPayloadConfigFromPayload } from "../helpers";
15
15
  import { useChart } from "../hooks";
16
16
 
17
17
  export const ChartTooltip = Tooltip;
18
- ChartTooltip.displayName = "ChartTooltip";
19
18
 
20
19
  export const ChartTooltipContent = forwardRef<HTMLDivElement, ChartTooltipContentProps>(
21
20
  (
package/src/components/Chart/helpers.ts CHANGED
@@ -3,7 +3,7 @@ import type {
3
3
  Payload as TooltipPayload,
4
4
  ValueType,
5
5
  } from "recharts/types/component/DefaultTooltipContent";
6
- import { type Payload as LegendPayload } from "recharts/types/component/DefaultLegendContent";
6
+ import { type LegendPayload } from "recharts";
7
7
  import { type ChartConfig } from "./types";
8
8
 
9
9
  // Helper to extract item config from a payload.
package/src/components/Chart/stories/args/index.ts CHANGED
@@ -9,7 +9,7 @@ import type {
9
9
  YAxisProps,
10
10
  } from "recharts";
11
11
  import { type ArgTypes } from "@storybook/react-vite";
12
- import { type CategoricalChartProps } from "recharts/types/chart/generateCategoricalChart";
12
+ import { CartesianChartProps, PolarChartProps } from "recharts/types/util/types";
13
13
  import type { Flatten } from "./types";
14
14
  import { categorizeArgs } from "../helpers";
15
15
  import { areaArgs } from "./areaArgs";
@@ -40,7 +40,7 @@ type BarArgKey = "bar" | "barChart" | "xAxis" | "yAxis";
40
40
 
41
41
  export type BarChartProps = {
42
42
  bar: OmitSVGElement<BarProps>;
43
- barChart: CategoricalChartProps;
43
+ barChart: CartesianChartProps;
44
44
  } & AxisProps;
45
45
 
46
46
  export type BarChartArgs = Partial<Flatten<BarChartProps>> & {};
@@ -66,7 +66,7 @@ type LineArgKey = "line" | "lineChart" | "xAxis" | "yAxis";
66
66
 
67
67
  export type LineChartProps = {
68
68
  line: OmitSVGElement<LineProps>;
69
- lineChart: CategoricalChartProps;
69
+ lineChart: CartesianChartProps;
70
70
  } & AxisProps;
71
71
 
72
72
  export type LineChartArgs = Partial<Flatten<LineChartProps>> & {};
@@ -92,7 +92,7 @@ type AreaArgKey = "area" | "areaChart" | "xAxis" | "yAxis";
92
92
 
93
93
  export type AreaChartProps = {
94
94
  area: OmitSVGElement<AreaProps>;
95
- areaChart: CategoricalChartProps;
95
+ areaChart: CartesianChartProps;
96
96
  } & AxisProps;
97
97
 
98
98
  export type AreaChartArgs = Partial<Flatten<AreaChartProps>> & {};
@@ -118,7 +118,7 @@ type PieArgKey = "pie" | "pieChart";
118
118
 
119
119
  export type PieChartProps = {
120
120
  pie: OmitSVGElement<PieProps>;
121
- pieChart: CategoricalChartProps;
121
+ pieChart: PolarChartProps;
122
122
  };
123
123
 
124
124
  export type PieChartArgs = Partial<Flatten<PieChartProps>> & {};
@@ -140,7 +140,7 @@ type RadialBarArgKey = "radialBar" | "radialBarChart";
140
140
 
141
141
  export type RadialBarChartProps = {
142
142
  radialBar: OmitSVGElement<RadialBarProps>;
143
- radialBarChart: CategoricalChartProps;
143
+ radialBarChart: PolarChartProps;
144
144
  };
145
145
 
146
146
  export type RadialBarChartArgs = Partial<Flatten<RadialBarChartProps>> & {};
@@ -162,7 +162,7 @@ type RadarArgKey = "radar" | "radarChart";
162
162
 
163
163
  export type RadarChartProps = {
164
164
  radar: OmitSVGElement<RadarProps>;
165
- radarChart: CategoricalChartProps;
165
+ radarChart: PolarChartProps;
166
166
  };
167
167
 
168
168
  export type RadarChartArgs = Partial<Flatten<RadarChartProps>> & {};
package/src/components/Chart/stories/args/stylesArgs.ts CHANGED
@@ -193,18 +193,6 @@ export const radialBarStyleArgs: Args = {
193
193
  category: "Style",
194
194
  },
195
195
  },
196
- activeIndex: {
197
- description: "The index of the active bar, this option can be changed in mouse event handlers.",
198
- table: {
199
- type: {
200
- summary: "number | number[]",
201
- detail:
202
- '<Bar dataKey="value" activeIndex={0} />\n<Bar dataKey="value" activeIndex={[0, 1]} />',
203
- },
204
- category: "Style",
205
- control: "object",
206
- },
207
- },
208
196
  maxBarSize: {
209
197
  description: "The maximum width of the bar.",
210
198
  table: {
package/src/components/Chart/stories/examples/BarChart.tsx CHANGED
@@ -243,13 +243,7 @@ export const CustomLabelBarChartExample = (props: Partial<BarChartProps>) => {
243
243
  <YAxis {...props.yAxis} />
244
244
  <XAxis {...props.xAxis} />
245
245
  <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
246
- <Bar
247
- dataKey="desktop"
248
- layout="vertical"
249
- fill="var(--color-desktop)"
250
- radius={4}
251
- {...props.bar}
252
- >
246
+ <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} {...props.bar}>
253
247
  <LabelList
254
248
  dataKey="month"
255
249
  position="insideLeft"
@@ -306,7 +300,7 @@ export const MixedBarChartExample = (props: Partial<BarChartProps>) => {
306
300
  />
307
301
  <XAxis {...props.xAxis} />
308
302
  <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
309
- <Bar dataKey="visitors" layout="vertical" radius={5} {...props.bar} />
303
+ <Bar dataKey="visitors" radius={5} {...props.bar} />
310
304
  </BarChart>
311
305
  </Chart>
312
306
  );
@@ -374,12 +368,11 @@ export const ActiveBarChartExample = (props: Partial<BarChartProps>) => {
374
368
  tickFormatter={(value) => chartConfig[value as keyof typeof chartConfig]?.label}
375
369
  {...props.xAxis}
376
370
  />
377
- <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
371
+ <ChartTooltip cursor={false} defaultIndex={2} content={<ChartTooltipContent hideLabel />} />
378
372
  <Bar
379
373
  dataKey="visitors"
380
374
  strokeWidth={2}
381
375
  radius={8}
382
- activeIndex={2}
383
376
  activeBar={(p: unknown) => {
384
377
  return (
385
378
  <Rectangle
package/src/components/Chart/stories/examples/LineChart.tsx CHANGED
@@ -1,4 +1,3 @@
1
- import { type SVGProps } from "react";
2
1
  import { MapPinIcon } from "lucide-react";
3
2
  import { CartesianGrid, LabelList, Line, LineChart, XAxis, YAxis } from "recharts";
4
3
  import { Chart } from "../../Chart";
@@ -78,11 +77,7 @@ export const CustomDotLineChartExample = (props: LineChartProps) => {
78
77
  <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
79
78
  <Line
80
79
  {...props.line}
81
- dot={({
82
- cx,
83
- cy,
84
- payload,
85
- }: SVGProps<SVGSVGElement> & { payload: Record<string, string> }) => {
80
+ dot={({ cx, cy, payload }) => {
86
81
  const r = 24;
87
82
  return (
88
83
  <MapPinIcon
package/src/components/Chart/stories/examples/PieChart.tsx CHANGED
@@ -1,4 +1,3 @@
1
- import { type SVGProps } from "react";
2
1
  import { LabelList, Pie, PieChart, Sector } from "recharts";
3
2
  import { type PieSectorDataItem } from "recharts/types/polar/Pie";
4
3
  import { Chart } from "../../Chart";
@@ -80,10 +79,7 @@ export const CustomLabeledPieChartExample = (props: Partial<PieChartProps>) => {
80
79
  <Pie
81
80
  dataKey="visitors"
82
81
  {...props.pie}
83
- label={({
84
- payload,
85
- ...props
86
- }: SVGProps<SVGTextElement> & { payload: Record<string, string> }) => {
82
+ label={({ payload, ...props }) => {
87
83
  return (
88
84
  <text
89
85
  cx={props.cx}
@@ -95,8 +91,10 @@ export const CustomLabeledPieChartExample = (props: Partial<PieChartProps>) => {
95
91
  className="fill-base-content"
96
92
  >
97
93
  {`${
98
- chartConfig[payload.browser as keyof typeof chartConfig]?.label
99
- } (${payload.visitors})`}
94
+ chartConfig[
95
+ (payload as Record<string, string>).browser as keyof typeof chartConfig
96
+ ]?.label
97
+ } (${(payload as Record<string, string>).visitors})`}
100
98
  </text>
101
99
  );
102
100
  }}
@@ -117,7 +115,10 @@ export const LabelListPieChartExample = (props: Partial<PieChartProps>) => {
117
115
  className="fill-base-100"
118
116
  stroke="none"
119
117
  fontSize={12}
120
- formatter={(value: keyof typeof chartConfig) => chartConfig[value]?.label}
118
+ formatter={(value) => {
119
+ if (typeof value === "string")
120
+ return chartConfig[value as keyof typeof chartConfig]?.label;
121
+ }}
121
122
  {...props}
122
123
  />
123
124
  </Pie>
package/src/components/Chart/types.ts CHANGED
@@ -1,6 +1,11 @@
1
1
  /* eslint-disable @typescript-eslint/consistent-indexed-object-style */
2
2
  import type { ComponentProps, ComponentType, ReactNode } from "react";
3
- import { LegendProps, ResponsiveContainer, Tooltip } from "recharts";
3
+ import {
4
+ DefaultLegendContentProps,
5
+ LegendProps,
6
+ ResponsiveContainer,
7
+ TooltipContentProps,
8
+ } from "recharts";
4
9
  import { type Theme } from "../../utilities";
5
10
 
6
11
  export type ChartConfig = {
@@ -24,7 +29,9 @@ export type ChartStyleProps = {
24
29
  config: ChartConfig;
25
30
  };
26
31
 
27
- export type ChartTooltipContentProps = ComponentProps<typeof Tooltip> &
32
+ export type ChartTooltipContentProps = Partial<
33
+ TooltipContentProps<number | string | (number | string)[], string>
34
+ > &
28
35
  ComponentProps<"div"> & {
29
36
  hideLabel?: boolean;
30
37
  hideIndicator?: boolean;
@@ -34,7 +41,8 @@ export type ChartTooltipContentProps = ComponentProps<typeof Tooltip> &
34
41
  };
35
42
 
36
43
  export type ChartLegendContentProps = ComponentProps<"div"> &
37
- Pick<LegendProps, "payload" | "verticalAlign"> & {
44
+ Pick<DefaultLegendContentProps, "payload"> &
45
+ Pick<LegendProps, "verticalAlign"> & {
38
46
  hideIcon?: boolean;
39
47
  nameKey?: string;
40
48
  };
package/src/components/Form/Select/constants.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { cva } from "../../../libs";
2
2
 
3
3
  export const getSelectTriggerClasses = cva(
4
- "select flex items-center justify-between rounded-md text-sm text-left disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-all duration-100",
4
+ "select flex items-center justify-between rounded-md text-sm text-left disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-100",
5
5
  {
6
6
  variants: {
7
7
  variant: {
package/src/components/Loading/constants.ts CHANGED
@@ -12,14 +12,14 @@ export const getLoadingClasses = cva("loading", {
12
12
  },
13
13
  intent: {
14
14
  default: "text-base-content",
15
- primary: "text-primary",
16
- secondary: "text-secondary",
17
- accent: "text-accent",
18
- neutral: "text-neutral",
19
- info: "text-info",
20
- success: "text-success",
21
- warning: "text-warning",
22
- error: "text-error",
15
+ primary: "text-primary-content",
16
+ secondary: "text-secondary-content",
17
+ accent: "text-accent-content",
18
+ neutral: "text-neutral-content",
19
+ info: "text-info-content",
20
+ success: "text-success-content",
21
+ warning: "text-warning-content",
22
+ error: "text-error-content",
23
23
  },
24
24
  size: {
25
25
  xs: "loading-xs",