@mbao01/common 0.4.1 → 0.4.2

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

@@ -1,2 +1,2 @@
 import { DatePickerProps } from './types';
-export declare const DatePicker: ({ name, size, wide, label, outline, variant, disabled, defaultDate, children, getDateValue, getDateLabel, triggerClassName, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: ({ name, size, wide, label, outline, variant, disabled, defaultDate, disabledDates, children, onSelect, getDateValue, getDateLabel, triggerClassName, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DatePicker/MultipleDatesPicker.d.ts

@@ -1,2 +1,2 @@
 import { MultipleDatesPickerProps } from './types';
-export declare const MultipleDatesPicker: ({ name, size, wide, label, outline, variant, disabled, defaultDates, getDatesValue, getDatesLabel, ...props }: MultipleDatesPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultipleDatesPicker: ({ name, size, wide, label, outline, variant, disabled, defaultDates, disabledDates, getDatesValue, getDatesLabel, ...props }: MultipleDatesPickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { DateRange, PropsBase, PropsMulti, PropsRange, PropsSingle } from 'react-day-picker';
 import { ButtonProps } from '../Button/types';
-type BaseDatePickerProps = Omit<PropsBase, "mode"> & Pick<ButtonProps, "variant" | "outline" | "wide" | "size" | "name" | "disabled"> & {
+type BaseDatePickerProps = Omit<PropsBase, "mode" | "disabled"> & Pick<ButtonProps, "variant" | "outline" | "wide" | "size" | "name" | "disabled"> & {
     label?: string;
     triggerClassName?: string;
 };
@@ -10,6 +10,7 @@ export type DatePickerProps = BaseDatePickerProps & Omit<PropsSingle, "mode"> &
         setDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
     }) => React.JSX.Element | null;
     defaultDate?: Date;
+    disabledDates?: PropsBase["disabled"];
     getDateLabel?: (date: Date | undefined) => string | undefined;
     getDateValue?: (date: Date | undefined) => string | undefined;
 };
@@ -24,6 +25,7 @@ export type DateRangePickerProps = BaseDatePickerProps & Omit<PropsRange, "mode"
 };
 export type MultipleDatesPickerProps = BaseDatePickerProps & Omit<PropsMulti, "mode"> & {
     defaultDates?: Date[];
+    disabledDates?: PropsBase["disabled"];
     getDatesValue?: (dates: Date[] | undefined) => string[] | undefined;
     getDatesLabel?: (dates: Date[] | undefined) => string | React.JSX.Element | undefined;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.4.1",
+  "version": "0.4.2",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -112,51 +112,51 @@
     "vaul": "^1.1.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.29.0",
+    "@eslint/js": "^9.30.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
-    "@storybook/addon-a11y": "^9.0.12",
+    "@storybook/addon-a11y": "^9.0.15",
     "@storybook/addon-coverage": "^2.0.0",
-    "@storybook/addon-docs": "^9.0.12",
-    "@storybook/addon-links": "^9.0.12",
-    "@storybook/addon-onboarding": "^9.0.12",
-    "@storybook/addon-themes": "^9.0.12",
-    "@storybook/react-vite": "^9.0.12",
+    "@storybook/addon-docs": "^9.0.15",
+    "@storybook/addon-links": "^9.0.15",
+    "@storybook/addon-onboarding": "^9.0.15",
+    "@storybook/addon-themes": "^9.0.15",
+    "@storybook/react-vite": "^9.0.15",
     "@storybook/test-runner": "^0.23.0",
-    "@tailwindcss/postcss": "^4.1.10",
-    "@tailwindcss/vite": "^4.1.10",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/vite": "^4.1.11",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@types/node": "^24.0.3",
+    "@types/node": "^24.0.8",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "@typescript-eslint/eslint-plugin": "^8.34.1",
-    "@typescript-eslint/parser": "^8.34.1",
-    "@vitejs/plugin-react": "^4.5.2",
+    "@typescript-eslint/eslint-plugin": "^8.35.1",
+    "@typescript-eslint/parser": "^8.35.1",
+    "@vitejs/plugin-react": "^4.6.0",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
     "axe-playwright": "^2.1.0",
     "daisyui": "^5.0.43",
-    "eslint": "^9.29.0",
+    "eslint": "^9.30.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-storybook": "^9.0.12",
-    "globals": "^16.2.0",
+    "eslint-plugin-storybook": "^9.0.15",
+    "globals": "^16.3.0",
     "jest-image-snapshot": "^6.5.1",
     "jsdom": "^26.1.0",
     "path": "^0.12.7",
     "postcss": "^8.5.6",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^7.6.2",
+    "react-router-dom": "^7.6.3",
     "recharts": "^2.15.4",
-    "storybook": "^9.0.12",
-    "tailwindcss": "^4.1.10",
+    "storybook": "^9.0.15",
+    "tailwindcss": "^4.1.11",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.34.1",
+    "typescript-eslint": "^8.35.1",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4"
@@ -168,5 +168,5 @@
     "recharts": "2",
     "typescript": "5"
   },
-  "gitHead": "dbd7ef70a813c7ebfde498a82a6646a907370555"
+  "gitHead": "9e8a4cdc9a652cda29754e1357bef95383023ee0"
 }

package/src/components/DatePicker/DatePicker.tsx

@@ -18,7 +18,9 @@ export const DatePicker = ({
   variant,
   disabled,
   defaultDate,
+  disabledDates,
   children,
+  onSelect,
   getDateValue = (date) => date?.toUTCString(),
   getDateLabel = (date) => (date ? format(date, "PPP") : undefined),
   triggerClassName,
@@ -34,7 +36,11 @@ export const DatePicker = ({
       autoFocus
       mode="single"
       selected={date}
-      onSelect={setDate}
+      onSelect={(...args) => {
+        setDate(args[0]);
+        onSelect?.(...args);
+      }}
+      disabled={disabledDates}
       captionLayout="label"
       {...props}
     />
@@ -50,7 +56,7 @@ export const DatePicker = ({
           outline={outline}
           variant={variant}
           disabled={disabled}
-          className={cn("justify-start", !date && "font-normal", triggerClassName)}
+          className={cn("justify-start", !dateValue && "font-normal", triggerClassName)}
           value={dateValue}
         >
           {dateLabel ?? <span>{label ?? "Pick a date"}</span>}

package/src/components/DatePicker/MultipleDatesPicker.tsx

@@ -18,6 +18,7 @@ export const MultipleDatesPicker = ({
   variant,
   disabled,
   defaultDates,
+  disabledDates,
   getDatesValue = (dates) => dates?.map((date) => date.toUTCString()),
   getDatesLabel = (dates) => {
     if (!dates?.length) return undefined;
@@ -67,6 +68,7 @@ export const MultipleDatesPicker = ({
           mode="multiple"
           selected={dates}
           onSelect={setDates}
+          disabled={disabledDates}
           captionLayout="label"
           {...props}
         />

package/src/components/DatePicker/types.ts

@@ -1,7 +1,7 @@
 import type { DateRange, PropsBase, PropsMulti, PropsRange, PropsSingle } from "react-day-picker";
 import { type ButtonProps } from "../Button/types";
 
-type BaseDatePickerProps = Omit<PropsBase, "mode"> &
+type BaseDatePickerProps = Omit<PropsBase, "mode" | "disabled"> &
   Pick<ButtonProps, "variant" | "outline" | "wide" | "size" | "name" | "disabled"> & {
     label?: string;
     triggerClassName?: string;
@@ -17,6 +17,7 @@ export type DatePickerProps = BaseDatePickerProps &
       setDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
     }) => React.JSX.Element | null;
     defaultDate?: Date;
+    disabledDates?: PropsBase["disabled"];
     getDateLabel?: (date: Date | undefined) => string | undefined;
     getDateValue?: (date: Date | undefined) => string | undefined;
   };
@@ -35,6 +36,7 @@ export type DateRangePickerProps = BaseDatePickerProps &
 export type MultipleDatesPickerProps = BaseDatePickerProps &
   Omit<PropsMulti, "mode"> & {
     defaultDates?: Date[];
+    disabledDates?: PropsBase["disabled"];
     getDatesValue?: (dates: Date[] | undefined) => string[] | undefined;
     getDatesLabel?: (dates: Date[] | undefined) => string | React.JSX.Element | undefined;
   };