@mbao01/common 0.4.2 → 0.4.4

package/dist/types/components/Form/DatetimeInput/DatetimeInput.d.ts

@@ -8,6 +8,7 @@ export declare const DatetimeInput: import('react').ForwardRefExoticComponent<{
     outline?: boolean | undefined;
     wide?: boolean | undefined;
     disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
 } & {
     date?: Date;
     calendar?: {

package/dist/types/components/Form/Input/Input.d.ts

@@ -5,6 +5,7 @@ export declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTML
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     outline?: boolean | undefined;
     wide?: boolean | undefined;
+    readOnly?: boolean | undefined;
 }, "type"> & {
     label?: React.ReactNode;
     labelPosition?: "start" | "end" | "floating";

package/dist/types/components/Form/Input/constants.d.ts

@@ -4,6 +4,7 @@ export declare const getInputClasses: (props?: ({
     wide?: boolean | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
     type?: string | number | null | undefined;
+    readOnly?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const getFloatingLabelClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const getInputLabelClasses: (props?: ({
@@ -15,4 +16,5 @@ export declare const getInputCommonClasses: (props?: ({
     disabled?: boolean | null | undefined;
     wide?: boolean | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    readOnly?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/Form/Phone/Phone.d.ts

@@ -1,4 +1,3 @@
 import { default as React } from 'react';
-import { PhoneProps } from './types';
-declare const Phone: React.ForwardRefExoticComponent<PhoneProps & React.RefAttributes<HTMLInputElement>>;
+declare const Phone: React.ForwardRefExoticComponent<Omit<import('../Input/types').InputProps, "type" | "inputMode" | "label"> & Pick<import('react-international-phone').UsePhoneInputConfig, "defaultCountry"> & React.RefAttributes<HTMLInputElement>>;
 export { Phone };

package/dist/types/components/Form/Phone/types.d.ts

@@ -1,2 +1,3 @@
+import { UsePhoneInputConfig } from 'react-international-phone';
 import { InputProps } from '../Input/types';
-export type PhoneProps = Omit<InputProps, "type" | "label" | "inputMode">;
+export type PhoneProps = Omit<InputProps, "type" | "label" | "inputMode"> & Pick<UsePhoneInputConfig, "defaultCountry">;

package/dist/types/components/Form/TagsInput/TagsInput.d.ts

@@ -12,4 +12,5 @@ export declare const TagsInput: import('react').ForwardRefExoticComponent<import
     outline?: boolean | undefined;
     wide?: boolean | undefined;
     disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
 } & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Form/TextField/TextField.d.ts

@@ -5,6 +5,7 @@ export declare const TextField: React.ForwardRefExoticComponent<Omit<React.Input
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     outline?: boolean | undefined;
     wide?: boolean | undefined;
+    readOnly?: boolean | undefined;
 }, "type"> & {
     label?: React.ReactNode;
     labelPosition?: "start" | "end" | "floating";

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

@@ -13,6 +13,7 @@ declare const Sidebar: {
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         outline?: boolean | undefined;
         wide?: boolean | undefined;
+        readOnly?: boolean | undefined;
     }, "type"> & {
         label?: import('react').ReactNode;
         labelPosition?: "start" | "end" | "floating";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.4.2",
+  "version": "0.4.4",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -99,28 +99,28 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
-    "lucide-react": "^0.522.0",
-    "react-day-picker": "^9.7.0",
+    "lucide-react": "^0.525.0",
+    "react-day-picker": "^9.8.0",
     "react-dropzone": "^14.3.8",
     "react-international-phone": "^4.5.0",
     "react-otp-input": "^3.1.1",
     "react-resizable-panels": "^3.0.3",
-    "sonner": "^2.0.5",
+    "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
     "timescape": "^0.7.1",
     "universal-cookie": "^8.0.1",
     "vaul": "^1.1.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.30.0",
-    "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
-    "@storybook/addon-a11y": "^9.0.15",
+    "@eslint/js": "^9.30.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.5.1",
+    "@storybook/addon-a11y": "^9.0.16",
     "@storybook/addon-coverage": "^2.0.0",
-    "@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/addon-docs": "^9.0.16",
+    "@storybook/addon-links": "^9.0.16",
+    "@storybook/addon-onboarding": "^9.0.16",
+    "@storybook/addon-themes": "^9.0.16",
+    "@storybook/react-vite": "^9.0.16",
     "@storybook/test-runner": "^0.23.0",
     "@tailwindcss/postcss": "^4.1.11",
     "@tailwindcss/vite": "^4.1.11",
@@ -128,21 +128,21 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@types/node": "^24.0.8",
+    "@types/node": "^24.0.13",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "@typescript-eslint/eslint-plugin": "^8.35.1",
-    "@typescript-eslint/parser": "^8.35.1",
+    "@typescript-eslint/eslint-plugin": "^8.36.0",
+    "@typescript-eslint/parser": "^8.36.0",
     "@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.30.0",
+    "daisyui": "^5.0.46",
+    "eslint": "^9.30.1",
     "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.15",
+    "eslint-plugin-storybook": "^9.0.16",
     "globals": "^16.3.0",
     "jest-image-snapshot": "^6.5.1",
     "jsdom": "^26.1.0",
@@ -153,10 +153,10 @@
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.6.3",
     "recharts": "^2.15.4",
-    "storybook": "^9.0.15",
+    "storybook": "^9.0.16",
     "tailwindcss": "^4.1.11",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.35.1",
+    "typescript-eslint": "^8.36.0",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4"
@@ -168,5 +168,5 @@
     "recharts": "2",
     "typescript": "5"
   },
-  "gitHead": "9e8a4cdc9a652cda29754e1357bef95383023ee0"
+  "gitHead": "e3e23ca85c4e11eb4e1ce1c07bc110f9d639b818"
 }

package/src/components/Form/Input/Input.tsx

@@ -30,6 +30,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       outline,
       className,
       type,
+      readOnly,
       ...props
     }: InputProps,
     ref
@@ -43,7 +44,11 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
               id={id}
               ref={ref}
               type={type}
-              className={cn(getInputClasses({ type, size, wide, variant, outline }), className)}
+              readOnly={readOnly}
+              className={cn(
+                getInputClasses({ type, size, wide, variant, outline, readOnly }),
+                className
+              )}
               {...props}
             />
           </label>
@@ -53,10 +58,13 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       return (
         <label
           htmlFor={id}
-          className={cn(getInputClasses({ type, size, wide, variant, outline }), className)}
+          className={cn(
+            getInputClasses({ type, size, wide, variant, outline, readOnly }),
+            className
+          )}
         >
           {labelPosition === "start" && <InputLabel>{label}</InputLabel>}
-          <input id={id} ref={ref} type={type} {...props} />
+          <input id={id} ref={ref} type={type} readOnly={readOnly} {...props} />
           {labelPosition === "end" && <InputLabel>{label}</InputLabel>}
         </label>
       );
@@ -67,7 +75,8 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         id={id}
         ref={ref}
         type={type}
-        className={cn(getInputClasses({ type, size, wide, variant, outline }), className)}
+        readOnly={readOnly}
+        className={cn(getInputClasses({ type, size, wide, variant, outline, readOnly }), className)}
         {...props}
       />
     );

package/src/components/Form/Input/constants.ts

@@ -29,6 +29,9 @@ export const getInputClasses = cva("input rounded-md transition-all duration-100
       ["file" as string]:
         "file:border-0 file:bg-transparent file:text-sm file:font-medium file:h-full",
     },
+    readOnly: {
+      true: "cursor-not-allowed! bg-base-200!",
+    },
   },
   compoundVariants: [
     {
@@ -101,6 +104,9 @@ export const getInputCommonClasses = cva(
         md: "h-12 leading-loose text-sm px-2",
         lg: "h-16 leading-loose text-lg px-3",
       },
+      readOnly: {
+        true: "cursor-not-allowed! bg-base-200!",
+      },
     },
     compoundVariants: [
       {

package/src/components/Form/Phone/Phone.tsx

@@ -22,14 +22,15 @@ const Phone = React.forwardRef<HTMLInputElement, PhoneProps>(
       outline,
       wide,
       size,
+      defaultCountry = "us",
       ...props
     },
     ref
   ) => {
     const [open, setOpen] = React.useState(false);
     const { inputValue, handlePhoneValueChange, inputRef, country, setCountry } = usePhoneInput({
-      value: defaultValue ? String(defaultValue) : "+231",
-      defaultCountry: "lr",
+      value: defaultValue ? String(defaultValue) : "",
+      defaultCountry,
       forceDialCode: true,
       inputRef: ref as MutableRefObject<HTMLInputElement | null>,
     });

package/src/components/Form/Phone/types.ts

@@ -1,3 +1,5 @@
+import { UsePhoneInputConfig } from "react-international-phone";
 import { type InputProps } from "../Input/types";
 
-export type PhoneProps = Omit<InputProps, "type" | "label" | "inputMode">;
+export type PhoneProps = Omit<InputProps, "type" | "label" | "inputMode"> &
+  Pick<UsePhoneInputConfig, "defaultCountry">;