@mbao01/common 0.0.57 → 0.1.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 (30) hide show
  1. package/dist/types/components/Chart/stories/examples/Tooltip.d.ts +0 -13
  2. package/dist/types/components/Chart/stories/helpers/index.d.ts +2 -2
  3. package/dist/types/components/DatePicker/types.d.ts +3 -3
  4. package/dist/types/components/DatetimePicker/constants.d.ts +1 -1
  5. package/dist/types/components/DragAndDrop/Draggable/types.d.ts +1 -1
  6. package/dist/types/components/Form/DatetimeInput/DatetimeInput.d.ts +14 -10
  7. package/dist/types/components/Form/MultiSelect/types.d.ts +1 -1
  8. package/dist/types/components/Form/components/FormControl/types.d.ts +1 -1
  9. package/dist/types/components/Text/types.d.ts +1 -1
  10. package/dist/types/components/ThemeSwitch/types.d.ts +1 -1
  11. package/dist/types/components/Timeline/Timeline.d.ts +1 -1
  12. package/package.json +92 -88
  13. package/src/components/Chart/Chart.tsx +1 -1
  14. package/src/components/Chart/components/ChartLegend.tsx +1 -3
  15. package/src/components/Chart/components/ChartStyle.tsx +2 -2
  16. package/src/components/Chart/components/ChartTooltip.tsx +9 -7
  17. package/src/components/Chart/stories/args/types.ts +1 -0
  18. package/src/components/Chart/stories/examples/RadialChart.tsx +4 -4
  19. package/src/components/Chart/stories/examples/Tooltip.tsx +1 -1
  20. package/src/components/Chart/stories/helpers/index.tsx +3 -3
  21. package/src/components/Chart/types.ts +1 -0
  22. package/src/components/DatePicker/types.ts +3 -3
  23. package/src/components/DragAndDrop/Draggable/types.ts +1 -1
  24. package/src/components/DragAndDrop/Droppable/Droppable.tsx +1 -1
  25. package/src/components/Form/MultiSelect/constants.ts +1 -1
  26. package/src/components/Form/MultiSelect/types.ts +1 -1
  27. package/src/components/Form/Phone/Phone.tsx +1 -1
  28. package/src/components/Form/components/FormControl/types.ts +1 -1
  29. package/src/components/Text/types.ts +1 -1
  30. package/src/components/ThemeSwitch/types.ts +1 -1
package/dist/types/components/Chart/stories/examples/Tooltip.d.ts CHANGED
@@ -1,15 +1,2 @@
1
1
  import { ChartTooltipContentProps } from '../../types';
2
- export declare const tooltipChartConfig: {
3
- activities: {
4
- label: string;
5
- };
6
- running: {
7
- label: string;
8
- color: string;
9
- };
10
- swimming: {
11
- label: string;
12
- color: string;
13
- };
14
- };
15
2
  export declare const BarChartExample: (props: ChartTooltipContentProps) => import("react/jsx-runtime").JSX.Element;
package/dist/types/components/Chart/stories/helpers/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import { ArgTypes, StoryContext, StoryFn } from '@storybook/react';
1
+ import { ArgTypes, StoryContext } from '@storybook/react';
2
2
  import { ElementType } from 'react';
3
3
  export declare const categorizeArgs: (args: ArgTypes, category: string) => ArgTypes<import('@storybook/react').Args>;
4
- export declare const withArgs: <T extends object>(Component: StoryFn, context: StoryContext<T>) => import("react/jsx-runtime").JSX.Element;
4
+ export declare const withArgs: <T extends object>(Component: React.FC, context: StoryContext<T>) => import("react/jsx-runtime").JSX.Element;
5
5
  export declare const getArgsFromArgTypes: <T extends ArgTypes>(argsTypes: T) => Record<keyof T, unknown>;
6
6
  export declare const renderer: <T extends ElementType>(Component: T) => {
7
7
  <G>(props: G): import("react/jsx-runtime").JSX.Element;
package/dist/types/components/DatePicker/types.d.ts CHANGED
@@ -8,7 +8,7 @@ export type DatePickerProps = BaseDatePickerProps & Omit<PropsSingle, "mode"> &
8
8
  children?: ({ date, setDate, }: {
9
9
  date: Date | undefined;
10
10
  setDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
11
- }) => JSX.Element | null;
11
+ }) => React.JSX.Element | null;
12
12
  defaultDate?: Date;
13
13
  getDateLabel?: (date: Date | undefined) => string | undefined;
14
14
  getDateValue?: (date: Date | undefined) => string | undefined;
@@ -19,11 +19,11 @@ export type DateRangePickerProps = BaseDatePickerProps & Omit<PropsRange, "mode"
19
19
  from: string | undefined;
20
20
  to: string | undefined;
21
21
  };
22
- getRangeLabel?: (range: DateRange | undefined) => string | JSX.Element | undefined;
22
+ getRangeLabel?: (range: DateRange | undefined) => string | React.JSX.Element | undefined;
23
23
  };
24
24
  export type MultipleDatesPickerProps = BaseDatePickerProps & Omit<PropsMulti, "mode"> & {
25
25
  defaultDates?: Date[];
26
26
  getDatesValue?: (dates: Date[] | undefined) => string[] | undefined;
27
- getDatesLabel?: (dates: Date[] | undefined) => string | JSX.Element | undefined;
27
+ getDatesLabel?: (dates: Date[] | undefined) => string | React.JSX.Element | undefined;
28
28
  };
29
29
  export {};
package/dist/types/components/DatetimePicker/constants.d.ts CHANGED
@@ -11,5 +11,5 @@ export declare const getDatetimeGridClasses: (props?: ({
11
11
  export declare const getDatetimeSeparatorClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
12
12
  export declare const getDatetimeInputClasses: (props?: ({
13
13
  size?: "xs" | "sm" | "md" | "lg" | null | undefined;
14
- unit?: DateFormat | TimeFormat | null | undefined;
14
+ unit?: Record<DateFormat | TimeFormat, string>;
15
15
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
package/dist/types/components/DragAndDrop/Draggable/types.d.ts CHANGED
@@ -6,7 +6,7 @@ export declare enum DraggableAxis {
6
6
  Vertical = 1,
7
7
  Horizontal = 2
8
8
  }
9
- export type DraggableHandleElement = JSX.Element | null;
9
+ export type DraggableHandleElement = React.JSX.Element | null;
10
10
  export type DraggableActionsArgs = {
11
11
  draggable: {
12
12
  ref: Ref<HTMLElement> | undefined;
package/dist/types/components/Form/DatetimeInput/DatetimeInput.d.ts CHANGED
@@ -17,14 +17,16 @@ export declare const DatetimeInput: import('react').ForwardRefExoticComponent<{
17
17
  hidden?: import('react-day-picker').Matcher | import('react-day-picker').Matcher[] | undefined;
18
18
  id?: string | undefined;
19
19
  lang?: HTMLDivElement["lang"] | undefined;
20
- nonce?: HTMLDivElement["nonce"];
20
+ nonce?: string | undefined;
21
21
  style?: React.CSSProperties | undefined;
22
22
  title?: HTMLDivElement["title"] | undefined;
23
- footer?: React.ReactNode | string;
24
- required?: boolean | undefined;
23
+ role?: "application" | "dialog" | undefined | undefined;
24
+ "aria-label"?: string | undefined;
25
+ footer?: import('react').ReactNode;
25
26
  month?: Date | undefined;
26
27
  classNames?: (Partial<import('react-day-picker').ClassNames> & Partial<import('react-day-picker').DeprecatedUI<string>>) | undefined;
27
28
  showOutsideDays?: boolean | undefined;
29
+ required?: boolean | undefined | undefined;
28
30
  modifiersClassNames?: import('react-day-picker').ModifiersClassNames | undefined;
29
31
  styles?: (Partial<import('react-day-picker').Styles> & Partial<import('react-day-picker').DeprecatedUI<React.CSSProperties>>) | undefined;
30
32
  modifiersStyles?: import('react-day-picker').ModifiersStyles | undefined;
@@ -33,7 +35,7 @@ export declare const DatetimeInput: import('react').ForwardRefExoticComponent<{
33
35
  startMonth?: Date | undefined;
34
36
  fromDate?: Date | undefined;
35
37
  fromMonth?: Date | undefined;
36
- fromYear?: number | undefined;
38
+ fromYear?: number | undefined | undefined;
37
39
  endMonth?: Date | undefined;
38
40
  toDate?: Date | undefined;
39
41
  toMonth?: Date | undefined;
@@ -42,22 +44,24 @@ export declare const DatetimeInput: import('react').ForwardRefExoticComponent<{
42
44
  reverseMonths?: boolean | undefined;
43
45
  hideNavigation?: boolean | undefined;
44
46
  disableNavigation?: boolean | undefined;
45
- captionLayout?: ("label" | "dropdown" | "dropdown-months" | "dropdown-years") | undefined;
47
+ captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years" | undefined;
46
48
  fixedWeeks?: boolean | undefined;
47
49
  hideWeekdays?: boolean | undefined;
48
50
  showWeekNumber?: boolean | undefined;
51
+ broadcastCalendar?: boolean | undefined;
49
52
  ISOWeek?: boolean | undefined;
50
- timeZone?: string | undefined;
53
+ timeZone?: string | undefined | undefined;
51
54
  components?: Partial<import('react-day-picker').CustomComponents> | undefined;
55
+ initialFocus?: boolean | undefined;
52
56
  today?: Date | undefined;
53
57
  modifiers?: Record<string, import('react-day-picker').Matcher | import('react-day-picker').Matcher[] | undefined> | undefined;
54
58
  labels?: Partial<import('react-day-picker').Labels> | undefined;
55
59
  formatters?: Partial<import('react-day-picker').Formatters> | undefined;
56
60
  locale?: Partial<import('date-fns').Locale> | undefined;
57
- weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
58
- firstWeekContainsDate?: (1 | 4) | undefined;
59
- useAdditionalWeekYearTokens?: boolean | undefined;
60
- useAdditionalDayOfYearTokens?: boolean | undefined;
61
+ weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined | undefined;
62
+ firstWeekContainsDate?: 1 | 4 | undefined;
63
+ useAdditionalWeekYearTokens?: boolean | undefined | undefined;
64
+ useAdditionalDayOfYearTokens?: boolean | undefined | undefined;
61
65
  onMonthChange?: import('react-day-picker').MonthChangeEventHandler | undefined;
62
66
  onNextClick?: import('react-day-picker').MonthChangeEventHandler | undefined;
63
67
  onPrevClick?: import('react-day-picker').MonthChangeEventHandler | undefined;
package/dist/types/components/Form/MultiSelect/types.d.ts CHANGED
@@ -21,7 +21,7 @@ export type MultiSelectContextProps = {
21
21
  setInputValue: React.Dispatch<React.SetStateAction<string>>;
22
22
  activeIndex: number;
23
23
  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
24
- ref: React.RefObject<HTMLInputElement>;
24
+ ref: React.RefObject<HTMLInputElement | null>;
25
25
  handleSelect: (e: React.SyntheticEvent<HTMLInputElement>) => void;
26
26
  };
27
27
  export type MultiSelectTriggerProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof getMultiSelectTriggerClasses>;
package/dist/types/components/Form/components/FormControl/types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { VariantProps } from '../../../../libs';
2
2
  import { getFormControlClasses } from './constants';
3
3
  export type As = "div" | "span" | "label";
4
- type AllowedElements = Pick<JSX.IntrinsicElements, As>;
4
+ type AllowedElements = Pick<React.JSX.IntrinsicElements, As>;
5
5
  export type FormControlProps<T extends As> = (T extends "label" ? React.LabelHTMLAttributes<HTMLLabelElement> : React.HTMLAttributes<HTMLElement & AllowedElements[T]>) & VariantProps<typeof getFormControlClasses> & {
6
6
  as?: T;
7
7
  };
package/dist/types/components/Text/types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { VariantProps } from '../../libs';
2
2
  import { getTextClasses } from './constants';
3
3
  export type As = "h1" | "h2" | "h3" | "h4" | "h5" | "p" | "span";
4
- type AllowedElements = Pick<JSX.IntrinsicElements, As>;
4
+ type AllowedElements = Pick<React.JSX.IntrinsicElements, As>;
5
5
  export type TextProps<T extends As> = React.HTMLAttributes<HTMLElement & AllowedElements[T]> & VariantProps<typeof getTextClasses> & {
6
6
  as?: As;
7
7
  };
package/dist/types/components/ThemeSwitch/types.d.ts CHANGED
@@ -5,5 +5,5 @@ export type ThemeSwitchProps = React.ComponentPropsWithoutRef<"label"> & {
5
5
  render?: (params: {
6
6
  theme: Theme | null;
7
7
  setTheme: React.Dispatch<React.SetStateAction<Theme | null>>;
8
- }) => JSX.Element;
8
+ }) => React.JSX.Element;
9
9
  };
package/dist/types/components/Timeline/Timeline.d.ts CHANGED
@@ -6,8 +6,8 @@ declare const Timeline: {
6
6
  icon?: React.ReactNode;
7
7
  } & Omit<{
8
8
  variant?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | undefined;
9
- status?: "default" | "success" | "active" | "failed" | "custom" | undefined;
10
9
  fill?: boolean | undefined;
10
+ status?: "default" | "success" | "active" | "failed" | "custom" | undefined;
11
11
  border?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | undefined;
12
12
  }, "status"> & {
13
13
  status?: Exclude<"default" | "success" | "active" | "failed" | "custom" | undefined, "custom">;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mbao01/common",
3
3
  "private": false,
4
- "version": "0.0.57",
4
+ "version": "0.1.0",
5
5
  "type": "module",
6
6
  "author": "Ayomide Bakare",
7
7
  "license": "MIT",
@@ -53,7 +53,7 @@
53
53
  "dev": "storybook dev -p 6006",
54
54
  "build": "tsc && vite build",
55
55
  "build-storybook": "storybook build -o ../../docs/storybook/common",
56
- "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 30",
56
+ "lint": "eslint --report-unused-disable-directives --max-warnings 30",
57
57
  "prettier": "prettier --check \"**/*.{ts,tsx}\"",
58
58
  "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
59
59
  "preview": "vite preview",
@@ -68,109 +68,113 @@
68
68
  "test:watch": "vitest"
69
69
  },
70
70
  "dependencies": {
71
- "@dnd-kit/core": "^6.1.0",
72
- "@dnd-kit/modifiers": "^7.0.0",
73
- "@dnd-kit/sortable": "^8.0.0",
71
+ "@dnd-kit/core": "^6.3.1",
72
+ "@dnd-kit/modifiers": "^9.0.0",
73
+ "@dnd-kit/sortable": "^10.0.0",
74
74
  "@dnd-kit/utilities": "^3.2.2",
75
- "@radix-ui/react-accordion": "^1.2.1",
76
- "@radix-ui/react-alert-dialog": "^1.1.2",
77
- "@radix-ui/react-avatar": "^1.1.1",
78
- "@radix-ui/react-checkbox": "^1.1.2",
79
- "@radix-ui/react-collapsible": "^1.1.1",
80
- "@radix-ui/react-context-menu": "^2.2.2",
81
- "@radix-ui/react-dialog": "^1.1.2",
82
- "@radix-ui/react-dropdown-menu": "^2.1.2",
83
- "@radix-ui/react-hover-card": "^1.1.2",
84
- "@radix-ui/react-label": "^2.1.0",
85
- "@radix-ui/react-menubar": "^1.1.2",
86
- "@radix-ui/react-navigation-menu": "^1.2.1",
87
- "@radix-ui/react-popover": "^1.1.2",
88
- "@radix-ui/react-progress": "^1.1.0",
89
- "@radix-ui/react-scroll-area": "^1.2.0",
90
- "@radix-ui/react-select": "^2.1.2",
91
- "@radix-ui/react-separator": "^1.1.0",
92
- "@radix-ui/react-slider": "^1.2.1",
93
- "@radix-ui/react-slot": "^1.1.0",
94
- "@radix-ui/react-tabs": "^1.1.1",
95
- "@radix-ui/react-toggle": "^1.1.0",
96
- "@radix-ui/react-toggle-group": "^1.1.0",
97
- "@radix-ui/react-tooltip": "^1.1.3",
75
+ "@radix-ui/react-accordion": "^1.2.2",
76
+ "@radix-ui/react-alert-dialog": "^1.1.4",
77
+ "@radix-ui/react-avatar": "^1.1.2",
78
+ "@radix-ui/react-checkbox": "^1.1.3",
79
+ "@radix-ui/react-collapsible": "^1.1.2",
80
+ "@radix-ui/react-context-menu": "^2.2.4",
81
+ "@radix-ui/react-dialog": "^1.1.4",
82
+ "@radix-ui/react-dropdown-menu": "^2.1.4",
83
+ "@radix-ui/react-hover-card": "^1.1.4",
84
+ "@radix-ui/react-label": "^2.1.1",
85
+ "@radix-ui/react-menubar": "^1.1.4",
86
+ "@radix-ui/react-navigation-menu": "^1.2.3",
87
+ "@radix-ui/react-popover": "^1.1.4",
88
+ "@radix-ui/react-progress": "^1.1.1",
89
+ "@radix-ui/react-scroll-area": "^1.2.2",
90
+ "@radix-ui/react-select": "^2.1.4",
91
+ "@radix-ui/react-separator": "^1.1.1",
92
+ "@radix-ui/react-slider": "^1.2.2",
93
+ "@radix-ui/react-slot": "^1.1.1",
94
+ "@radix-ui/react-tabs": "^1.1.2",
95
+ "@radix-ui/react-toggle": "^1.1.1",
96
+ "@radix-ui/react-toggle-group": "^1.1.1",
97
+ "@radix-ui/react-tooltip": "^1.1.6",
98
98
  "@tailwindcss/typography": "^0.5.15",
99
99
  "chrono-node": "^2.7.7",
100
- "class-variance-authority": "^0.7.0",
100
+ "class-variance-authority": "^0.7.1",
101
101
  "clsx": "^2.1.1",
102
- "cmdk": "^1.0.0",
103
- "daisyui": "^4.12.13",
102
+ "cmdk": "^1.0.4",
103
+ "daisyui": "^4.12.23",
104
104
  "date-fns": "^4.1.0",
105
- "embla-carousel-react": "^8.3.0",
106
- "lucide-react": "^0.453.0",
107
- "react-day-picker": "^9.2.0",
108
- "react-dropzone": "^14.2.10",
109
- "react-international-phone": "^4.3.0",
105
+ "embla-carousel-react": "^8.5.1",
106
+ "lucide-react": "^0.469.0",
107
+ "react-day-picker": "^9.4.4",
108
+ "react-dropzone": "^14.3.5",
109
+ "react-international-phone": "^4.4.0",
110
110
  "react-otp-input": "^3.1.1",
111
- "sonner": "^1.5.0",
112
- "tailwind-merge": "^2.5.4",
111
+ "sonner": "^1.7.1",
112
+ "tailwind-merge": "^2.6.0",
113
113
  "tailwindcss-animate": "^1.0.7",
114
- "timescape": "^0.6.1",
115
- "universal-cookie": "^7.2.1",
116
- "vaul": "^1.1.0"
114
+ "timescape": "^0.6.2",
115
+ "universal-cookie": "^7.2.2",
116
+ "vaul": "^1.1.2"
117
117
  },
118
118
  "devDependencies": {
119
- "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
120
- "@storybook/addon-a11y": "^8.3.6",
121
- "@storybook/addon-coverage": "^1.0.4",
122
- "@storybook/addon-essentials": "^8.3.6",
123
- "@storybook/addon-interactions": "^8.3.6",
124
- "@storybook/addon-links": "^8.3.6",
125
- "@storybook/addon-onboarding": "^8.3.6",
126
- "@storybook/addon-storysource": "^8.3.6",
127
- "@storybook/addon-themes": "^8.3.6",
128
- "@storybook/addon-viewport": "^8.3.6",
129
- "@storybook/blocks": "^8.3.6",
130
- "@storybook/react": "^8.3.6",
131
- "@storybook/react-vite": "^8.3.6",
132
- "@storybook/test": "^8.3.6",
133
- "@storybook/test-runner": "^0.19.1",
134
- "@testing-library/jest-dom": "^6.6.2",
135
- "@testing-library/react": "^16.0.1",
119
+ "@eslint/js": "^9.17.0",
120
+ "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
121
+ "@storybook/addon-a11y": "^8.4.7",
122
+ "@storybook/addon-coverage": "^1.0.5",
123
+ "@storybook/addon-essentials": "^8.4.7",
124
+ "@storybook/addon-interactions": "^8.4.7",
125
+ "@storybook/addon-links": "^8.4.7",
126
+ "@storybook/addon-onboarding": "^8.4.7",
127
+ "@storybook/addon-storysource": "^8.4.7",
128
+ "@storybook/addon-themes": "^8.4.7",
129
+ "@storybook/addon-viewport": "^8.4.7",
130
+ "@storybook/blocks": "^8.4.7",
131
+ "@storybook/react": "^8.4.7",
132
+ "@storybook/react-vite": "^8.4.7",
133
+ "@storybook/test": "^8.4.7",
134
+ "@storybook/test-runner": "^0.21.0",
135
+ "@testing-library/jest-dom": "^6.6.3",
136
+ "@testing-library/react": "^16.1.0",
136
137
  "@testing-library/user-event": "^14.5.2",
138
+ "@types/eslint__js": "^8.42.3",
137
139
  "@types/jest-image-snapshot": "^6.4.0",
138
- "@types/node": "^22.7.9",
139
- "@types/react": "^18.3.12",
140
- "@types/react-dom": "^18.3.1",
141
- "@typescript-eslint/eslint-plugin": "^8.11.0",
142
- "@typescript-eslint/parser": "^8.11.0",
143
- "@vitejs/plugin-react": "^4.3.3",
144
- "@vitest/coverage-v8": "^2.1.3",
145
- "@vitest/ui": "^2.1.3",
140
+ "@types/node": "^22.10.2",
141
+ "@types/react": "^19.0.2",
142
+ "@types/react-dom": "^19.0.2",
143
+ "@typescript-eslint/eslint-plugin": "^8.18.2",
144
+ "@typescript-eslint/parser": "^8.18.2",
145
+ "@vitejs/plugin-react": "^4.3.4",
146
+ "@vitest/coverage-v8": "^2.1.8",
147
+ "@vitest/ui": "^2.1.8",
146
148
  "autoprefixer": "^10.4.20",
147
149
  "axe-playwright": "^2.0.3",
148
- "eslint": "^8.57.1",
149
- "eslint-plugin-react": "^7.37.2",
150
- "eslint-plugin-react-hooks": "^4.6.2",
151
- "eslint-plugin-react-refresh": "^0.4.13",
152
- "eslint-plugin-storybook": "^0.9.0",
150
+ "eslint": "^9.17.0",
151
+ "eslint-plugin-react": "^7.37.3",
152
+ "eslint-plugin-react-hooks": "^5.1.0",
153
+ "eslint-plugin-react-refresh": "^0.4.16",
154
+ "eslint-plugin-storybook": "^0.11.1",
155
+ "globals": "^15.14.0",
153
156
  "jest-image-snapshot": "^6.4.0",
154
157
  "jsdom": "^25.0.1",
155
158
  "path": "^0.12.7",
156
- "postcss": "^8.4.47",
157
- "prettier": "^3.3.3",
158
- "react": "^18.3.1",
159
- "react-dom": "^18.3.1",
160
- "react-router-dom": "^6.27.0",
161
- "recharts": "^2.13.0",
162
- "storybook": "^8.3.6",
163
- "tailwindcss": "^3.4.14",
164
- "typescript": "^5.6.3",
165
- "vite": "^5.4.10",
166
- "vite-plugin-dts": "^4.3.0",
167
- "vitest": "^2.1.3"
159
+ "postcss": "^8.4.49",
160
+ "prettier": "^3.4.2",
161
+ "react": "^19.0.0",
162
+ "react-dom": "^19.0.0",
163
+ "react-router-dom": "^7.1.1",
164
+ "recharts": "^2.15.0",
165
+ "storybook": "^8.4.7",
166
+ "tailwindcss": "^3.4.17",
167
+ "typescript": "^5.7.2",
168
+ "typescript-eslint": "^8.18.2",
169
+ "vite": "^6.0.6",
170
+ "vite-plugin-dts": "^4.4.0",
171
+ "vitest": "^2.1.8"
168
172
  },
169
173
  "peerDependencies": {
170
- "react": "^18.2.0",
171
- "react-dom": "^18.2.0",
172
- "recharts": "^2.13.0",
173
- "typescript": "^5.2.2"
174
+ "react": "^19.0.0",
175
+ "react-dom": "^19.0.0",
176
+ "recharts": "^2.15.0",
177
+ "typescript": "^5.7.2"
174
178
  },
175
- "gitHead": "da184d4f814a6be9bdab346555fad9809f0eb427"
179
+ "gitHead": "ff5cee34c88f8622c5c748163a8f7c3f9aeda72d"
176
180
  }
package/src/components/Chart/Chart.tsx CHANGED
@@ -11,7 +11,7 @@ import { type ChartProps } from "./types";
11
11
  export const Chart = forwardRef<HTMLDivElement, ChartProps>(
12
12
  ({ id, className, children, config, ...props }, ref) => {
13
13
  const uniqueId = useId();
14
- const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
14
+ const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
15
15
 
16
16
  return (
17
17
  <ChartContext.Provider value={{ config }}>
package/src/components/Chart/components/ChartLegend.tsx CHANGED
@@ -26,12 +26,10 @@ export const ChartLegendContent = forwardRef<HTMLDivElement, ChartLegendContentP
26
26
  return (
27
27
  <div ref={ref} className={cn(getChartLegendContainerClasses({ verticalAlign }), className)}>
28
28
  {payload.map((item) => {
29
- // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
30
- const key = `${nameKey || item.dataKey || "value"}`;
29
+ const key = `${nameKey ?? item.dataKey ?? "value"}`;
31
30
  const itemConfig = getPayloadConfigFromPayload(config, item, key);
32
31
 
33
32
  return (
34
- // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
35
33
  <div key={item.value} className={getChartLegendItemClasses()}>
36
34
  {itemConfig?.icon && !hideIcon ? (
37
35
  <itemConfig.icon />
package/src/components/Chart/components/ChartStyle.tsx CHANGED
@@ -3,7 +3,7 @@ import { THEMES } from "../constants";
3
3
  import { type ChartStyleProps } from "../types";
4
4
 
5
5
  export const ChartStyle = ({ id, config }: ChartStyleProps) => {
6
- const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
6
+ const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
7
7
 
8
8
  if (!colorConfig.length) {
9
9
  return null;
@@ -18,7 +18,7 @@ export const ChartStyle = ({ id, config }: ChartStyleProps) => {
18
18
  ${prefix} [data-chart=${id}] {
19
19
  ${colorConfig
20
20
  .map(([key, itemConfig]) => {
21
- const color = itemConfig.theme?.[theme as Theme] || itemConfig.color;
21
+ const color = itemConfig.theme?.[theme as Theme] ?? itemConfig.color;
22
22
  return color ? ` --color-${key}: ${color};` : null;
23
23
  })
24
24
  .join("\n")}
package/src/components/Chart/components/ChartTooltip.tsx CHANGED
@@ -44,10 +44,12 @@ export const ChartTooltipContent = forwardRef<HTMLDivElement, ChartTooltipConten
44
44
  }
45
45
 
46
46
  const [item] = payload;
47
- const key = `${labelKey || item.dataKey || item.name || "value"}`;
47
+ const key = `${labelKey ?? item.dataKey ?? item.name ?? "value"}`;
48
48
  const itemConfig = getPayloadConfigFromPayload(config, item, key);
49
49
  const value =
50
- !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
50
+ !labelKey && typeof label === "string"
51
+ ? (config[label]?.label ?? label)
52
+ : itemConfig?.label;
51
53
 
52
54
  if (labelFormatter) {
53
55
  return (
@@ -73,12 +75,12 @@ export const ChartTooltipContent = forwardRef<HTMLDivElement, ChartTooltipConten
73
75
  {!nestLabel ? tooltipLabel : null}
74
76
  <div className="grid gap-1.5">
75
77
  {payload.map((item, index) => {
76
- const key = `${nameKey || item.name || item.dataKey || "value"}`;
78
+ const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
77
79
  const itemConfig = getPayloadConfigFromPayload(config, item, key);
78
80
  const indicatorColor =
79
- color ||
80
- (item.payload as { fill: string }).fill ||
81
- item.color ||
81
+ color ??
82
+ (item.payload as { fill: string }).fill ??
83
+ item.color ??
82
84
  (item as { fill: string }).fill;
83
85
 
84
86
  return (
@@ -105,7 +107,7 @@ export const ChartTooltipContent = forwardRef<HTMLDivElement, ChartTooltipConten
105
107
  <div className={getChartTooltipItemLabelClasses({ nestLabel })}>
106
108
  <div className="grid gap-1.5">
107
109
  {nestLabel ? tooltipLabel : null}
108
- <span>{itemConfig?.label || item.name}</span>
110
+ <span>{itemConfig?.label ?? item.name}</span>
109
111
  </div>
110
112
  {item.value && (
111
113
  <span className={getChartTooltipItemValueClasses()}>
package/src/components/Chart/stories/args/types.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable @typescript-eslint/consistent-indexed-object-style */
1
2
  import { type SVGProps } from "react";
2
3
 
3
4
  type SVGKeys = Exclude<
package/src/components/Chart/stories/examples/RadialChart.tsx CHANGED
@@ -126,7 +126,7 @@ export const TextRadialChartExample = (props: Partial<RadialBarChartProps>) => {
126
126
  >
127
127
  {chartData[0].visitors.toLocaleString()}
128
128
  </tspan>
129
- <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-base-content">
129
+ <tspan x={viewBox.cx} y={(viewBox.cy ?? 0) + 24} className="fill-base-content">
130
130
  Visitors
131
131
  </tspan>
132
132
  </text>
@@ -176,7 +176,7 @@ export const ShapeRadialChartExample = (props: Partial<RadialBarChartProps>) =>
176
176
  >
177
177
  {chartData[0].visitors.toLocaleString()}
178
178
  </tspan>
179
- <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-base-content">
179
+ <tspan x={viewBox.cx} y={(viewBox.cy ?? 0) + 24} className="fill-base-content">
180
180
  Visitors
181
181
  </tspan>
182
182
  </text>
@@ -217,12 +217,12 @@ export const StackedRadialChartExample = (props: Partial<RadialBarChartProps>) =
217
217
  <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle">
218
218
  <tspan
219
219
  x={viewBox.cx}
220
- y={(viewBox.cy || 0) - 16}
220
+ y={(viewBox.cy ?? 0) - 16}
221
221
  className="fill-foreground text-2xl font-bold"
222
222
  >
223
223
  {totalVisitors.toLocaleString()}
224
224
  </tspan>
225
- <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 4} className="fill-base-content">
225
+ <tspan x={viewBox.cx} y={(viewBox.cy ?? 0) + 4} className="fill-base-content">
226
226
  Visitors
227
227
  </tspan>
228
228
  </text>
package/src/components/Chart/stories/examples/Tooltip.tsx CHANGED
@@ -12,7 +12,7 @@ const chartData = [
12
12
  { date: "2024-07-19", running: 600, swimming: 350 },
13
13
  { date: "2024-07-20", running: 480, swimming: 400 },
14
14
  ];
15
- export const tooltipChartConfig = {
15
+ const tooltipChartConfig = {
16
16
  activities: {
17
17
  label: "Activities",
18
18
  },
package/src/components/Chart/stories/helpers/index.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import type { ArgTypes, StoryContext, StoryFn } from "@storybook/react";
1
+ import type { ArgTypes, StoryContext } from "@storybook/react";
2
2
  import type { ComponentProps, ElementType } from "react";
3
3
 
4
4
  export const categorizeArgs = (args: ArgTypes, category: string) => {
@@ -27,7 +27,7 @@ const getCategorizedArgs = <T,>(args: ArgTypes<T>) => {
27
27
  }, {} as ArgTypes);
28
28
  };
29
29
 
30
- export const withArgs = <T extends object>(Component: StoryFn, context: StoryContext<T>) => {
30
+ export const withArgs = <T extends object>(Component: React.FC, context: StoryContext<T>) => {
31
31
  context.args = getCategorizedArgs(context.args) as T;
32
32
 
33
33
  return <Component />;
@@ -70,6 +70,6 @@ export const getArgsFromArgTypes = <T extends ArgTypes>(argsTypes: T) => {
70
70
  export const renderer = <T extends ElementType>(Component: T) => {
71
71
  const component = <G,>(props: G) => <Component {...(props as ComponentProps<T>)} />;
72
72
  component.displayName =
73
- (Component as React.FC<unknown>).displayName || (Component as React.FC<unknown>).name;
73
+ (Component as React.FC<unknown>).displayName ?? (Component as React.FC<unknown>).name;
74
74
  return component;
75
75
  };
package/src/components/Chart/types.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable @typescript-eslint/consistent-indexed-object-style */
1
2
  import type { ComponentProps, ComponentType, ReactNode } from "react";
2
3
  import { LegendProps, ResponsiveContainer, Tooltip } from "recharts";
3
4
  import { type Theme } from "../../utilities";
package/src/components/DatePicker/types.ts CHANGED
@@ -15,7 +15,7 @@ export type DatePickerProps = BaseDatePickerProps &
15
15
  }: {
16
16
  date: Date | undefined;
17
17
  setDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
18
- }) => JSX.Element | null;
18
+ }) => React.JSX.Element | null;
19
19
  defaultDate?: Date;
20
20
  getDateLabel?: (date: Date | undefined) => string | undefined;
21
21
  getDateValue?: (date: Date | undefined) => string | undefined;
@@ -28,12 +28,12 @@ export type DateRangePickerProps = BaseDatePickerProps &
28
28
  from: string | undefined;
29
29
  to: string | undefined;
30
30
  };
31
- getRangeLabel?: (range: DateRange | undefined) => string | JSX.Element | undefined;
31
+ getRangeLabel?: (range: DateRange | undefined) => string | React.JSX.Element | undefined;
32
32
  };
33
33
 
34
34
  export type MultipleDatesPickerProps = BaseDatePickerProps &
35
35
  Omit<PropsMulti, "mode"> & {
36
36
  defaultDates?: Date[];
37
37
  getDatesValue?: (dates: Date[] | undefined) => string[] | undefined;
38
- getDatesLabel?: (dates: Date[] | undefined) => string | JSX.Element | undefined;
38
+ getDatesLabel?: (dates: Date[] | undefined) => string | React.JSX.Element | undefined;
39
39
  };
package/src/components/DragAndDrop/Draggable/types.ts CHANGED
@@ -13,7 +13,7 @@ export enum DraggableAxis {
13
13
  Horizontal,
14
14
  }
15
15
 
16
- export type DraggableHandleElement = JSX.Element | null;
16
+ export type DraggableHandleElement = React.JSX.Element | null;
17
17
 
18
18
  export type DraggableActionsArgs = {
19
19
  draggable: {
package/src/components/DragAndDrop/Droppable/Droppable.tsx CHANGED
@@ -29,7 +29,7 @@ export const Droppable = ({
29
29
  className={cn(className, getDroppableClasses({ isDragging, isOver, isEmpty }))}
30
30
  data-empty={isEmpty}
31
31
  data-draggable-over={isOver || undefined}
32
- data-draggable-active={isDragging || undefined}
32
+ data-draggable-active={isDragging ?? undefined}
33
33
  {...props}
34
34
  >
35
35
  {children}
package/src/components/Form/MultiSelect/constants.ts CHANGED
@@ -82,7 +82,7 @@ export const getMultiSelectItemClasses = cva(
82
82
  );
83
83
 
84
84
  export const getMultiSelectListClasses = cva(
85
- "p-1 bg-base-100 flex flex-col gap-2 rounded-md scrollbar-thin scrollbar-track-transparent transition-colors scrollbar-thumb-muted-foreground dark:scrollbar-thumb-muted scrollbar-thumb-rounded-lg w-full absolute bg-background shadow-md z-10 border border-muted top-1",
85
+ "p-1 bg-base-100 flex flex-col gap-2 rounded-md scrollbar-thin scrollbar-track-transparent transition-colors scrollbar-thumb-muted-foreground dark:scrollbar-thumb-muted scrollbar-thumb-rounded-lg w-full absolute shadow-md z-10 border border-muted top-1",
86
86
  {
87
87
  variants: {
88
88
  size: {
package/src/components/Form/MultiSelect/types.ts CHANGED
@@ -29,7 +29,7 @@ export type MultiSelectContextProps = {
29
29
  setInputValue: React.Dispatch<React.SetStateAction<string>>;
30
30
  activeIndex: number;
31
31
  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
32
- ref: React.RefObject<HTMLInputElement>;
32
+ ref: React.RefObject<HTMLInputElement | null>;
33
33
  handleSelect: (e: React.SyntheticEvent<HTMLInputElement>) => void;
34
34
  };
35
35
 
package/src/components/Form/Phone/Phone.tsx CHANGED
@@ -28,7 +28,7 @@ const Phone = React.forwardRef<HTMLInputElement, PhoneProps>(
28
28
  ) => {
29
29
  const [open, setOpen] = React.useState(false);
30
30
  const { inputValue, handlePhoneValueChange, inputRef, country, setCountry } = usePhoneInput({
31
- value: String(defaultValue) ?? "+231",
31
+ value: defaultValue ? String(defaultValue) : "+231",
32
32
  defaultCountry: "lr",
33
33
  forceDialCode: true,
34
34
  inputRef: ref as MutableRefObject<HTMLInputElement | null>,
package/src/components/Form/components/FormControl/types.ts CHANGED
@@ -3,7 +3,7 @@ import { getFormControlClasses } from "./constants";
3
3
 
4
4
  export type As = "div" | "span" | "label";
5
5
 
6
- type AllowedElements = Pick<JSX.IntrinsicElements, As>;
6
+ type AllowedElements = Pick<React.JSX.IntrinsicElements, As>;
7
7
 
8
8
  export type FormControlProps<T extends As> = (T extends "label"
9
9
  ? React.LabelHTMLAttributes<HTMLLabelElement>
package/src/components/Text/types.ts CHANGED
@@ -3,7 +3,7 @@ import { getTextClasses } from "./constants";
3
3
 
4
4
  export type As = "h1" | "h2" | "h3" | "h4" | "h5" | "p" | "span";
5
5
 
6
- type AllowedElements = Pick<JSX.IntrinsicElements, As>;
6
+ type AllowedElements = Pick<React.JSX.IntrinsicElements, As>;
7
7
 
8
8
  export type TextProps<T extends As> = React.HTMLAttributes<HTMLElement & AllowedElements[T]> &
9
9
  VariantProps<typeof getTextClasses> & {
package/src/components/ThemeSwitch/types.ts CHANGED
@@ -6,5 +6,5 @@ export type ThemeSwitchProps = React.ComponentPropsWithoutRef<"label"> & {
6
6
  render?: (params: {
7
7
  theme: Theme | null;
8
8
  setTheme: React.Dispatch<React.SetStateAction<Theme | null>>;
9
- }) => JSX.Element;
9
+ }) => React.JSX.Element;
10
10
  };