@mbao01/common 0.7.3 → 0.8.1

package/dist/types/components/Chart/components/ChartLegend.d.ts

@@ -1,4 +1,3 @@
-import { Legend } from 'recharts';
 import { ChartLegendContentProps } from '../types';
-export declare const ChartLegend: typeof Legend;
+export declare const ChartLegend: import('react').MemoExoticComponent<(outsideProps: import('recharts').LegendProps) => React.ReactPortal | null>;
 export declare const ChartLegendContent: import('react').ForwardRefExoticComponent<Omit<ChartLegendContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Chart/stories/args/index.d.ts

@@ -19,7 +19,7 @@ export type LineChartProps = {
 export type LineChartArgs = Partial<Flatten<LineChartProps>> & {};
 export declare const lineChartArgs: ArgTypes;
 export type AreaChartProps = {
-    area: OmitSVGElement<AreaProps>;
+    area: OmitSVGElement<AreaProps<any, any>>;
     areaChart: CartesianChartProps;
 } & AxisProps;
 export type AreaChartArgs = Partial<Flatten<AreaChartProps>> & {};

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

@@ -24,7 +24,7 @@ export type ChartStyleProps = {
     id: string;
     config: ChartConfig;
 };
-export type ChartTooltipContentProps = Partial<TooltipContentProps<number | string | (number | string)[], string>> & ComponentProps<"div"> & {
+export type ChartTooltipContentProps = Partial<TooltipContentProps<number | string | readonly (number | string)[], number | string>> & ComponentProps<"div"> & {
     hideLabel?: boolean;
     hideIndicator?: boolean;
     indicator?: "line" | "dot" | "dashed";

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

@@ -4,6 +4,9 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 declare const Popover: {
     (props: PopoverProps): import("react/jsx-runtime").JSX.Element;
     Content: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {} & React.RefAttributes<HTMLDivElement>>;
+    Anchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Arrow: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverArrowProps & React.RefAttributes<SVGSVGElement>>;
     Trigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 };
 export { Popover };

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

@@ -2,7 +2,7 @@ import { ResizableHandleProps, ResizableProps } from './types';
 import * as ResizablePrimitive from "react-resizable-panels";
 declare const Resizable: {
     ({ className, ...props }: ResizableProps): import("react/jsx-runtime").JSX.Element;
-    Panel: import('react').ForwardRefExoticComponent<Omit<import('react').HTMLAttributes<HTMLElement | HTMLAnchorElement | HTMLSpanElement | HTMLButtonElement | HTMLUListElement | HTMLLIElement | HTMLOListElement | HTMLObjectElement | HTMLLinkElement | HTMLSlotElement | HTMLStyleElement | HTMLTitleElement | HTMLMapElement | HTMLDialogElement | HTMLFormElement | HTMLImageElement | HTMLOptionElement | HTMLTableElement | HTMLTimeElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
+    Panel: import('react').ForwardRefExoticComponent<Omit<import('react').HTMLAttributes<HTMLElement | HTMLAnchorElement | HTMLSpanElement | HTMLButtonElement | HTMLFormElement | HTMLUListElement | HTMLLIElement | HTMLOListElement | HTMLObjectElement | HTMLLinkElement | HTMLSlotElement | HTMLStyleElement | HTMLTitleElement | HTMLMapElement | HTMLDialogElement | HTMLImageElement | HTMLOptionElement | HTMLTableElement | HTMLTimeElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
         className?: string;
         collapsedSize?: number | undefined;
         collapsible?: boolean | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.7.3",
+  "version": "0.8.1",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -45,25 +45,6 @@
   "sideEffects": [
     "*.css"
   ],
-  "scripts": {
-    "clean": "pnpx rimraf node_modules",
-    "dev": "storybook dev -p 6006",
-    "build": "tsc && vite build",
-    "build-storybook": "storybook build -o ../../docs/storybook/common",
-    "lint": "eslint --report-unused-disable-directives --max-warnings 30",
-    "prettier": "prettier --check \"**/*.{ts,tsx}\"",
-    "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
-    "preview": "vite preview",
-    "prod": "pnpx http-server ../../docs/storybook/common --port 6006",
-    "test": "vitest run",
-    "test:coverage": "vitest run --coverage",
-    "test:ui": "vitest --ui",
-    "test:visual": "test-storybook --url http://127.0.0.1:6006",
-    "test:visual:coverage": "test-storybook --coverage --url http://127.0.0.1:6006",
-    "test:visual:ci": "test-storybook --ci --verbose --url http://127.0.0.1:6006",
-    "test:visual:watch": "test-storybook --watch --url http://127.0.0.1:6006",
-    "test:watch": "vitest"
-  },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
@@ -99,64 +80,64 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
-    "lucide-react": "^0.562.0",
-    "react-day-picker": "^9.13.0",
-    "react-dropzone": "^14.3.8",
-    "react-international-phone": "^4.6.1",
+    "lucide-react": "^0.577.0",
+    "react-day-picker": "^9.14.0",
+    "react-dropzone": "^14.4.1",
+    "react-international-phone": "^4.8.0",
     "react-otp-input": "^3.1.1",
     "react-resizable-panels": "^3.0.6",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0",
+    "tailwind-merge": "^3.5.0",
     "timescape": "^0.8.0",
     "universal-cookie": "^8.0.1",
     "vaul": "^1.1.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
-    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
-    "@storybook/addon-a11y": "^10.1.11",
+    "@eslint/js": "^9.39.4",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
+    "@storybook/addon-a11y": "^10.2.19",
     "@storybook/addon-coverage": "^3.0.0",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-links": "^10.1.11",
-    "@storybook/addon-onboarding": "^10.1.11",
-    "@storybook/addon-themes": "^10.1.11",
-    "@storybook/react-vite": "^10.1.11",
+    "@storybook/addon-docs": "^10.2.19",
+    "@storybook/addon-links": "^10.2.19",
+    "@storybook/addon-onboarding": "^10.2.19",
+    "@storybook/addon-themes": "^10.2.19",
+    "@storybook/react-vite": "^10.2.19",
     "@storybook/test-runner": "^0.24.2",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@tailwindcss/vite": "^4.1.18",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@tailwindcss/vite": "^4.2.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.1",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest-image-snapshot": "^6.4.0",
-    "@types/node": "^25.0.3",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.52.0",
-    "@typescript-eslint/parser": "^8.52.0",
-    "@vitejs/plugin-react": "^5.1.2",
+    "@types/jest-image-snapshot": "^6.4.1",
+    "@types/node": "^25.5.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.57.0",
+    "@typescript-eslint/parser": "^8.57.0",
+    "@vitejs/plugin-react": "^5.2.0",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
     "axe-playwright": "^2.2.2",
-    "daisyui": "^5.5.14",
-    "eslint": "^9.39.2",
+    "daisyui": "^5.5.19",
+    "eslint": "^9.39.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.26",
-    "eslint-plugin-storybook": "^10.1.11",
+    "eslint-plugin-storybook": "^10.2.19",
     "globals": "^16.5.0",
-    "jest-image-snapshot": "^6.5.1",
+    "jest-image-snapshot": "^6.5.2",
     "jsdom": "^27.4.0",
     "path": "^0.12.7",
-    "postcss": "^8.5.6",
-    "prettier": "^3.7.4",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-router-dom": "^7.12.0",
-    "recharts": "^3.6.0",
-    "storybook": "^10.1.11",
-    "tailwindcss": "^4.1.18",
+    "postcss": "^8.5.8",
+    "prettier": "^3.8.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.1",
+    "recharts": "^3.8.0",
+    "storybook": "^10.2.19",
+    "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.52.0",
+    "typescript-eslint": "^8.57.0",
     "vite": "^6.4.1",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4"
@@ -168,5 +149,23 @@
     "recharts": "2",
     "typescript": "5"
   },
-  "gitHead": "380a94d58461df07134ae4413d365c39705b37f6"
-}
+  "scripts": {
+    "clean": "pnpx rimraf node_modules",
+    "dev": "storybook dev -p 6006",
+    "build": "tsc && vite build",
+    "build-storybook": "storybook build -o ../../docs/storybook/common",
+    "lint": "eslint --report-unused-disable-directives --max-warnings 30",
+    "prettier": "prettier --check \"**/*.{ts,tsx}\"",
+    "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
+    "preview": "vite preview",
+    "prod": "pnpx http-server ../../docs/storybook/common --port 6006",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "test:visual": "test-storybook --url http://127.0.0.1:6006",
+    "test:visual:coverage": "test-storybook --coverage --url http://127.0.0.1:6006",
+    "test:visual:ci": "test-storybook --ci --verbose --url http://127.0.0.1:6006",
+    "test:visual:watch": "test-storybook --watch --url http://127.0.0.1:6006",
+    "test:watch": "vitest"
+  }
+}

package/src/components/Chart/components/ChartTooltip.tsx

@@ -83,7 +83,7 @@ export const ChartTooltipContent = forwardRef<HTMLDivElement, ChartTooltipConten
               (item as { fill: string }).fill;
 
             return (
-              <div key={item.dataKey} className={getChartTooltipItemClasses({ indicator })}>
+              <div key={item.graphicalItemId} className={getChartTooltipItemClasses({ indicator })}>
                 {formatter && item?.value !== undefined && item.name ? (
                   formatter(item.value, item.name, item, index, payload)
                 ) : (

package/src/components/Chart/stories/args/index.ts

@@ -91,7 +91,8 @@ export const lineChartArgs: ArgTypes = {
 type AreaArgKey = "area" | "areaChart" | "xAxis" | "yAxis";
 
 export type AreaChartProps = {
-  area: OmitSVGElement<AreaProps>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  area: OmitSVGElement<AreaProps<any, any>>;
   areaChart: CartesianChartProps;
 } & AxisProps;
 

package/src/components/Chart/stories/examples/BarChart.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import {
   Bar,
   BarChart,
@@ -166,12 +167,14 @@ export const BarChartExample = (props: Partial<BarChartProps>) => {
             <ChartTooltipContent
               className="w-[150px]"
               nameKey="views"
-              labelFormatter={(value: string) => {
-                return new Date(value).toLocaleDateString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                  year: "numeric",
-                });
+              labelFormatter={(value: ReactNode) => {
+                return typeof value === "string"
+                  ? new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  : value;
               }}
             />
           }

package/src/components/Chart/types.ts

@@ -30,7 +30,7 @@ export type ChartStyleProps = {
 };
 
 export type ChartTooltipContentProps = Partial<
-  TooltipContentProps<number | string | (number | string)[], string>
+  TooltipContentProps<number | string | readonly (number | string)[], number | string>
 > &
   ComponentProps<"div"> & {
     hideLabel?: boolean;

package/src/components/Popover/Popover.tsx

@@ -25,6 +25,9 @@ const PopoverContent = React.forwardRef<
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 Popover.Content = PopoverContent;
+Popover.Anchor = PopoverPrimitive.Anchor;
+Popover.Close = PopoverPrimitive.Close;
+Popover.Arrow = PopoverPrimitive.Arrow;
 Popover.Trigger = PopoverPrimitive.Trigger;
 
 export { Popover };

package/src/stylesheets/tailwind.css

@@ -307,3 +307,5 @@
   --tw-exit-translate-x: calc(--value(ratio) * 100%);
   --tw-exit-translate-x: --value(--translate- *, [percentage], [length]);
 }
+
+@source "../../src/**/*.{ts,tsx}";