@mbao01/common 0.0.56 → 0.1.0

package/dist/types/components/Chart/stories/examples/Tooltip.d.ts

@@ -1,15 +1,2 @@
 import { ChartTooltipContentProps } from '../../types';
-export declare const tooltipChartConfig: {
-    activities: {
-        label: string;
-    };
-    running: {
-        label: string;
-        color: string;
-    };
-    swimming: {
-        label: string;
-        color: string;
-    };
-};
 export declare const BarChartExample: (props: ChartTooltipContentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
-import { ArgTypes, StoryContext, StoryFn } from '@storybook/react';
+import { ArgTypes, StoryContext } from '@storybook/react';
 import { ElementType } from 'react';
 export declare const categorizeArgs: (args: ArgTypes, category: string) => ArgTypes<import('@storybook/react').Args>;
-export declare const withArgs: <T extends object>(Component: StoryFn, context: StoryContext<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const withArgs: <T extends object>(Component: React.FC, context: StoryContext<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const getArgsFromArgTypes: <T extends ArgTypes>(argsTypes: T) => Record<keyof T, unknown>;
 export declare const renderer: <T extends ElementType>(Component: T) => {
     <G>(props: G): import("react/jsx-runtime").JSX.Element;

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

@@ -8,7 +8,7 @@ export type DatePickerProps = BaseDatePickerProps & Omit<PropsSingle, "mode"> &
     children?: ({ date, setDate, }: {
         date: Date | undefined;
         setDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
-    }) => JSX.Element | null;
+    }) => React.JSX.Element | null;
     defaultDate?: Date;
     getDateLabel?: (date: Date | undefined) => string | undefined;
     getDateValue?: (date: Date | undefined) => string | undefined;
@@ -19,11 +19,11 @@ export type DateRangePickerProps = BaseDatePickerProps & Omit<PropsRange, "mode"
         from: string | undefined;
         to: string | undefined;
     };
-    getRangeLabel?: (range: DateRange | undefined) => string | JSX.Element | undefined;
+    getRangeLabel?: (range: DateRange | undefined) => string | React.JSX.Element | undefined;
 };
 export type MultipleDatesPickerProps = BaseDatePickerProps & Omit<PropsMulti, "mode"> & {
     defaultDates?: Date[];
     getDatesValue?: (dates: Date[] | undefined) => string[] | undefined;
-    getDatesLabel?: (dates: Date[] | undefined) => string | JSX.Element | undefined;
+    getDatesLabel?: (dates: Date[] | undefined) => string | React.JSX.Element | undefined;
 };
 export {};

package/dist/types/components/DatetimePicker/constants.d.ts

@@ -11,5 +11,5 @@ export declare const getDatetimeGridClasses: (props?: ({
 export declare const getDatetimeSeparatorClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const getDatetimeInputClasses: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
-    unit?: DateFormat | TimeFormat | null | undefined;
+    unit?: Record<DateFormat | TimeFormat, string>;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/DragAndDrop/Draggable/types.d.ts

@@ -6,7 +6,7 @@ export declare enum DraggableAxis {
     Vertical = 1,
     Horizontal = 2
 }
-export type DraggableHandleElement = JSX.Element | null;
+export type DraggableHandleElement = React.JSX.Element | null;
 export type DraggableActionsArgs = {
     draggable: {
         ref: Ref<HTMLElement> | undefined;

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

@@ -17,14 +17,16 @@ export declare const DatetimeInput: import('react').ForwardRefExoticComponent<{
         hidden?: import('react-day-picker').Matcher | import('react-day-picker').Matcher[] | undefined;
         id?: string | undefined;
         lang?: HTMLDivElement["lang"] | undefined;
-        nonce?: HTMLDivElement["nonce"];
+        nonce?: string | undefined;
         style?: React.CSSProperties | undefined;
         title?: HTMLDivElement["title"] | undefined;
-        footer?: React.ReactNode | string;
-        required?: boolean | undefined;
+        role?: "application" | "dialog" | undefined | undefined;
+        "aria-label"?: string | undefined;
+        footer?: import('react').ReactNode;
         month?: Date | undefined;
         classNames?: (Partial<import('react-day-picker').ClassNames> & Partial<import('react-day-picker').DeprecatedUI<string>>) | undefined;
         showOutsideDays?: boolean | undefined;
+        required?: boolean | undefined | undefined;
         modifiersClassNames?: import('react-day-picker').ModifiersClassNames | undefined;
         styles?: (Partial<import('react-day-picker').Styles> & Partial<import('react-day-picker').DeprecatedUI<React.CSSProperties>>) | undefined;
         modifiersStyles?: import('react-day-picker').ModifiersStyles | undefined;
@@ -33,7 +35,7 @@ export declare const DatetimeInput: import('react').ForwardRefExoticComponent<{
         startMonth?: Date | undefined;
         fromDate?: Date | undefined;
         fromMonth?: Date | undefined;
-        fromYear?: number | undefined;
+        fromYear?: number | undefined | undefined;
         endMonth?: Date | undefined;
         toDate?: Date | undefined;
         toMonth?: Date | undefined;
@@ -42,22 +44,24 @@ export declare const DatetimeInput: import('react').ForwardRefExoticComponent<{
         reverseMonths?: boolean | undefined;
         hideNavigation?: boolean | undefined;
         disableNavigation?: boolean | undefined;
-        captionLayout?: ("label" | "dropdown" | "dropdown-months" | "dropdown-years") | undefined;
+        captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years" | undefined;
         fixedWeeks?: boolean | undefined;
         hideWeekdays?: boolean | undefined;
         showWeekNumber?: boolean | undefined;
+        broadcastCalendar?: boolean | undefined;
         ISOWeek?: boolean | undefined;
-        timeZone?: string | undefined;
+        timeZone?: string | undefined | undefined;
         components?: Partial<import('react-day-picker').CustomComponents> | undefined;
+        initialFocus?: boolean | undefined;
         today?: Date | undefined;
         modifiers?: Record<string, import('react-day-picker').Matcher | import('react-day-picker').Matcher[] | undefined> | undefined;
         labels?: Partial<import('react-day-picker').Labels> | undefined;
         formatters?: Partial<import('react-day-picker').Formatters> | undefined;
         locale?: Partial<import('date-fns').Locale> | undefined;
-        weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
-        firstWeekContainsDate?: (1 | 4) | undefined;
-        useAdditionalWeekYearTokens?: boolean | undefined;
-        useAdditionalDayOfYearTokens?: boolean | undefined;
+        weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined | undefined;
+        firstWeekContainsDate?: 1 | 4 | undefined;
+        useAdditionalWeekYearTokens?: boolean | undefined | undefined;
+        useAdditionalDayOfYearTokens?: boolean | undefined | undefined;
         onMonthChange?: import('react-day-picker').MonthChangeEventHandler | undefined;
         onNextClick?: import('react-day-picker').MonthChangeEventHandler | undefined;
         onPrevClick?: import('react-day-picker').MonthChangeEventHandler | undefined;

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

@@ -6,7 +6,7 @@ declare const MultiSelect: {
         displayName: string;
     };
     Input: {
-        ({ className, ...props }: MultiSelectInputProps): import("react/jsx-runtime").JSX.Element;
+        ({ className, size, ...props }: MultiSelectInputProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Content: import('react').ForwardRefExoticComponent<MultiSelectContentProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -34,6 +34,7 @@ declare const MultiSelect: {
         keywords?: string[];
         forceMount?: boolean;
     } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+        variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         disabled?: boolean | undefined;
         included?: boolean | undefined;

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

@@ -1,6 +1,6 @@
 export declare const getMultiSelectClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const getMultiSelectTriggerClasses: (props?: ({
-    variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | null | undefined;
+    variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | null | undefined;
     outline?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
     wide?: boolean | null | undefined;
@@ -10,6 +10,7 @@ export declare const getMultiSelectItemClasses: (props?: ({
     included?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const getMultiSelectListClasses: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
@@ -17,3 +18,6 @@ export declare const getMultiSelectListClasses: (props?: ({
 export declare const getMultiSelectTagClasses: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getMultiSelectInputClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, HTMLAttributes } from 'react';
 import { VariantProps } from '../../../libs';
 import { Command } from '../../Command';
-import { getMultiSelectItemClasses, getMultiSelectListClasses, getMultiSelectTriggerClasses } from './constants';
+import { getMultiSelectInputClasses, getMultiSelectItemClasses, getMultiSelectListClasses, getMultiSelectTriggerClasses } from './constants';
 export type Item = {
     value: string;
     label?: string;
@@ -21,11 +21,11 @@ export type MultiSelectContextProps = {
     setInputValue: React.Dispatch<React.SetStateAction<string>>;
     activeIndex: number;
     setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
-    ref: React.RefObject<HTMLInputElement>;
+    ref: React.RefObject<HTMLInputElement | null>;
     handleSelect: (e: React.SyntheticEvent<HTMLInputElement>) => void;
 };
 export type MultiSelectTriggerProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof getMultiSelectTriggerClasses>;
-export type MultiSelectInputProps = ComponentPropsWithoutRef<typeof Command.Input>;
+export type MultiSelectInputProps = Omit<ComponentPropsWithoutRef<typeof Command.Input>, "size"> & VariantProps<typeof getMultiSelectInputClasses>;
 export type MultiSelectContentProps = HTMLAttributes<HTMLDivElement>;
 export type MultiSelectListProps = ComponentPropsWithoutRef<typeof Command.List> & VariantProps<typeof getMultiSelectListClasses>;
 export type MultiSelectItemProps = Item & ComponentPropsWithoutRef<typeof Command.Item> & VariantProps<typeof getMultiSelectItemClasses>;

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

@@ -8,6 +8,9 @@ export declare const getSelectItemClasses: (props?: ({
     variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const getSelectLabelClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSelectValueClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const getSelectSeparatorClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const getSelectContentClasses: (props?: ({
     position?: "popper" | "item-aligned" | null | undefined;

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

@@ -1,6 +1,7 @@
 import { VariantProps } from '../../../libs';
-import { getSelectContentClasses, getSelectTriggerClasses } from './constants';
+import { getSelectContentClasses, getSelectTriggerClasses, getSelectValueClasses } from './constants';
 import * as SelectPrimitive from "@radix-ui/react-select";
 export type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & VariantProps<typeof getSelectTriggerClasses>;
 export type SelectItemProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & VariantProps<typeof getSelectTriggerClasses>;
 export type SelectContentProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & VariantProps<typeof getSelectContentClasses>;
+export type SelectValueProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value> & VariantProps<typeof getSelectValueClasses>;

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

@@ -1,7 +1,7 @@
 import { VariantProps } from '../../../../libs';
 import { getFormControlClasses } from './constants';
 export type As = "div" | "span" | "label";
-type AllowedElements = Pick<JSX.IntrinsicElements, As>;
+type AllowedElements = Pick<React.JSX.IntrinsicElements, As>;
 export type FormControlProps<T extends As> = (T extends "label" ? React.LabelHTMLAttributes<HTMLLabelElement> : React.HTMLAttributes<HTMLElement & AllowedElements[T]>) & VariantProps<typeof getFormControlClasses> & {
     as?: T;
 };

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

@@ -1,7 +1,7 @@
 import { VariantProps } from '../../libs';
 import { getTextClasses } from './constants';
 export type As = "h1" | "h2" | "h3" | "h4" | "h5" | "p" | "span";
-type AllowedElements = Pick<JSX.IntrinsicElements, As>;
+type AllowedElements = Pick<React.JSX.IntrinsicElements, As>;
 export type TextProps<T extends As> = React.HTMLAttributes<HTMLElement & AllowedElements[T]> & VariantProps<typeof getTextClasses> & {
     as?: As;
 };

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

@@ -5,5 +5,5 @@ export type ThemeSwitchProps = React.ComponentPropsWithoutRef<"label"> & {
     render?: (params: {
         theme: Theme | null;
         setTheme: React.Dispatch<React.SetStateAction<Theme | null>>;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
 };

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

@@ -6,8 +6,8 @@ declare const Timeline: {
         icon?: React.ReactNode;
     } & Omit<{
         variant?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | undefined;
-        status?: "default" | "success" | "active" | "failed" | "custom" | undefined;
         fill?: boolean | undefined;
+        status?: "default" | "success" | "active" | "failed" | "custom" | undefined;
         border?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | undefined;
     }, "status"> & {
         status?: Exclude<"default" | "success" | "active" | "failed" | "custom" | undefined, "custom">;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.56",
+  "version": "0.1.0",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -53,7 +53,7 @@
     "dev": "storybook dev -p 6006",
     "build": "tsc && vite build",
     "build-storybook": "storybook build -o ../../docs/storybook/common",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 30",
+    "lint": "eslint --report-unused-disable-directives --max-warnings 30",
     "prettier": "prettier --check \"**/*.{ts,tsx}\"",
     "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
     "preview": "vite preview",
@@ -68,109 +68,113 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/modifiers": "^7.0.0",
-    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@radix-ui/react-accordion": "^1.2.1",
-    "@radix-ui/react-alert-dialog": "^1.1.2",
-    "@radix-ui/react-avatar": "^1.1.1",
-    "@radix-ui/react-checkbox": "^1.1.2",
-    "@radix-ui/react-collapsible": "^1.1.1",
-    "@radix-ui/react-context-menu": "^2.2.2",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-hover-card": "^1.1.2",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-menubar": "^1.1.2",
-    "@radix-ui/react-navigation-menu": "^1.2.1",
-    "@radix-ui/react-popover": "^1.1.2",
-    "@radix-ui/react-progress": "^1.1.0",
-    "@radix-ui/react-scroll-area": "^1.2.0",
-    "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slider": "^1.2.1",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.1",
-    "@radix-ui/react-toggle": "^1.1.0",
-    "@radix-ui/react-toggle-group": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.3",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-alert-dialog": "^1.1.4",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.2.4",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-hover-card": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-menubar": "^1.1.4",
+    "@radix-ui/react-navigation-menu": "^1.2.3",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.2",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-toggle": "^1.1.1",
+    "@radix-ui/react-toggle-group": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.6",
     "@tailwindcss/typography": "^0.5.15",
     "chrono-node": "^2.7.7",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
-    "daisyui": "^4.12.13",
+    "cmdk": "^1.0.4",
+    "daisyui": "^4.12.23",
     "date-fns": "^4.1.0",
-    "embla-carousel-react": "^8.3.0",
-    "lucide-react": "^0.453.0",
-    "react-day-picker": "^9.2.0",
-    "react-dropzone": "^14.2.10",
-    "react-international-phone": "^4.3.0",
+    "embla-carousel-react": "^8.5.1",
+    "lucide-react": "^0.469.0",
+    "react-day-picker": "^9.4.4",
+    "react-dropzone": "^14.3.5",
+    "react-international-phone": "^4.4.0",
     "react-otp-input": "^3.1.1",
-    "sonner": "^1.5.0",
-    "tailwind-merge": "^2.5.4",
+    "sonner": "^1.7.1",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
-    "timescape": "^0.6.1",
-    "universal-cookie": "^7.2.1",
-    "vaul": "^1.1.0"
+    "timescape": "^0.6.2",
+    "universal-cookie": "^7.2.2",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
-    "@storybook/addon-a11y": "^8.3.6",
-    "@storybook/addon-coverage": "^1.0.4",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/addon-onboarding": "^8.3.6",
-    "@storybook/addon-storysource": "^8.3.6",
-    "@storybook/addon-themes": "^8.3.6",
-    "@storybook/addon-viewport": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-vite": "^8.3.6",
-    "@storybook/test": "^8.3.6",
-    "@storybook/test-runner": "^0.19.1",
-    "@testing-library/jest-dom": "^6.6.2",
-    "@testing-library/react": "^16.0.1",
+    "@eslint/js": "^9.17.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-coverage": "^1.0.5",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/addon-storysource": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/addon-viewport": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/test-runner": "^0.21.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
+    "@types/eslint__js": "^8.42.3",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@types/node": "^22.7.9",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.11.0",
-    "@typescript-eslint/parser": "^8.11.0",
-    "@vitejs/plugin-react": "^4.3.3",
-    "@vitest/coverage-v8": "^2.1.3",
-    "@vitest/ui": "^2.1.3",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@typescript-eslint/eslint-plugin": "^8.18.2",
+    "@typescript-eslint/parser": "^8.18.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/ui": "^2.1.8",
     "autoprefixer": "^10.4.20",
     "axe-playwright": "^2.0.3",
-    "eslint": "^8.57.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.13",
-    "eslint-plugin-storybook": "^0.9.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "eslint-plugin-storybook": "^0.11.1",
+    "globals": "^15.14.0",
     "jest-image-snapshot": "^6.4.0",
     "jsdom": "^25.0.1",
     "path": "^0.12.7",
-    "postcss": "^8.4.47",
-    "prettier": "^3.3.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.27.0",
-    "recharts": "^2.13.0",
-    "storybook": "^8.3.6",
-    "tailwindcss": "^3.4.14",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.10",
-    "vite-plugin-dts": "^4.3.0",
-    "vitest": "^2.1.3"
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.1",
+    "recharts": "^2.15.0",
+    "storybook": "^8.4.7",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.6",
+    "vite-plugin-dts": "^4.4.0",
+    "vitest": "^2.1.8"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "recharts": "^2.13.0",
-    "typescript": "^5.2.2"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "recharts": "^2.15.0",
+    "typescript": "^5.7.2"
   },
-  "gitHead": "4fac6210229ebace908eec29eb49847870b4e9ed"
+  "gitHead": "ff5cee34c88f8622c5c748163a8f7c3f9aeda72d"
 }

package/src/components/Chart/Chart.tsx

@@ -11,7 +11,7 @@ import { type ChartProps } from "./types";
 export const Chart = forwardRef<HTMLDivElement, ChartProps>(
   ({ id, className, children, config, ...props }, ref) => {
     const uniqueId = useId();
-    const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+    const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
 
     return (
       <ChartContext.Provider value={{ config }}>

package/src/components/Chart/components/ChartLegend.tsx

@@ -26,12 +26,10 @@ export const ChartLegendContent = forwardRef<HTMLDivElement, ChartLegendContentP
     return (
       <div ref={ref} className={cn(getChartLegendContainerClasses({ verticalAlign }), className)}>
         {payload.map((item) => {
-          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-          const key = `${nameKey || item.dataKey || "value"}`;
+          const key = `${nameKey ?? item.dataKey ?? "value"}`;
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
           return (
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
             <div key={item.value} className={getChartLegendItemClasses()}>
               {itemConfig?.icon && !hideIcon ? (
                 <itemConfig.icon />

package/src/components/Chart/components/ChartStyle.tsx

@@ -3,7 +3,7 @@ import { THEMES } from "../constants";
 import { type ChartStyleProps } from "../types";
 
 export const ChartStyle = ({ id, config }: ChartStyleProps) => {
-  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
 
   if (!colorConfig.length) {
     return null;
@@ -18,7 +18,7 @@ export const ChartStyle = ({ id, config }: ChartStyleProps) => {
 ${prefix} [data-chart=${id}] {
 ${colorConfig
   .map(([key, itemConfig]) => {
-    const color = itemConfig.theme?.[theme as Theme] || itemConfig.color;
+    const color = itemConfig.theme?.[theme as Theme] ?? itemConfig.color;
     return color ? `  --color-${key}: ${color};` : null;
   })
   .join("\n")}

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

@@ -44,10 +44,12 @@ export const ChartTooltipContent = forwardRef<HTMLDivElement, ChartTooltipConten
       }
 
       const [item] = payload;
-      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const key = `${labelKey ?? item.dataKey ?? item.name ?? "value"}`;
       const itemConfig = getPayloadConfigFromPayload(config, item, key);
       const value =
-        !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+        !labelKey && typeof label === "string"
+          ? (config[label]?.label ?? label)
+          : itemConfig?.label;
 
       if (labelFormatter) {
         return (
@@ -73,12 +75,12 @@ export const ChartTooltipContent = forwardRef<HTMLDivElement, ChartTooltipConten
         {!nestLabel ? tooltipLabel : null}
         <div className="grid gap-1.5">
           {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
             const indicatorColor =
-              color ||
-              (item.payload as { fill: string }).fill ||
-              item.color ||
+              color ??
+              (item.payload as { fill: string }).fill ??
+              item.color ??
               (item as { fill: string }).fill;
 
             return (
@@ -105,7 +107,7 @@ export const ChartTooltipContent = forwardRef<HTMLDivElement, ChartTooltipConten
                     <div className={getChartTooltipItemLabelClasses({ nestLabel })}>
                       <div className="grid gap-1.5">
                         {nestLabel ? tooltipLabel : null}
-                        <span>{itemConfig?.label || item.name}</span>
+                        <span>{itemConfig?.label ?? item.name}</span>
                       </div>
                       {item.value && (
                         <span className={getChartTooltipItemValueClasses()}>

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/consistent-indexed-object-style */
 import { type SVGProps } from "react";
 
 type SVGKeys = Exclude<

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

@@ -126,7 +126,7 @@ export const TextRadialChartExample = (props: Partial<RadialBarChartProps>) => {
                     >
                       {chartData[0].visitors.toLocaleString()}
                     </tspan>
-                    <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-base-content">
+                    <tspan x={viewBox.cx} y={(viewBox.cy ?? 0) + 24} className="fill-base-content">
                       Visitors
                     </tspan>
                   </text>
@@ -176,7 +176,7 @@ export const ShapeRadialChartExample = (props: Partial<RadialBarChartProps>) =>
                     >
                       {chartData[0].visitors.toLocaleString()}
                     </tspan>
-                    <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-base-content">
+                    <tspan x={viewBox.cx} y={(viewBox.cy ?? 0) + 24} className="fill-base-content">
                       Visitors
                     </tspan>
                   </text>
@@ -217,12 +217,12 @@ export const StackedRadialChartExample = (props: Partial<RadialBarChartProps>) =
                   <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle">
                     <tspan
                       x={viewBox.cx}
-                      y={(viewBox.cy || 0) - 16}
+                      y={(viewBox.cy ?? 0) - 16}
                       className="fill-foreground text-2xl font-bold"
                     >
                       {totalVisitors.toLocaleString()}
                     </tspan>
-                    <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 4} className="fill-base-content">
+                    <tspan x={viewBox.cx} y={(viewBox.cy ?? 0) + 4} className="fill-base-content">
                       Visitors
                     </tspan>
                   </text>

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

@@ -12,7 +12,7 @@ const chartData = [
   { date: "2024-07-19", running: 600, swimming: 350 },
   { date: "2024-07-20", running: 480, swimming: 400 },
 ];
-export const tooltipChartConfig = {
+const tooltipChartConfig = {
   activities: {
     label: "Activities",
   },

package/src/components/Chart/stories/helpers/index.tsx

@@ -1,4 +1,4 @@
-import type { ArgTypes, StoryContext, StoryFn } from "@storybook/react";
+import type { ArgTypes, StoryContext } from "@storybook/react";
 import type { ComponentProps, ElementType } from "react";
 
 export const categorizeArgs = (args: ArgTypes, category: string) => {
@@ -27,7 +27,7 @@ const getCategorizedArgs = <T,>(args: ArgTypes<T>) => {
   }, {} as ArgTypes);
 };
 
-export const withArgs = <T extends object>(Component: StoryFn, context: StoryContext<T>) => {
+export const withArgs = <T extends object>(Component: React.FC, context: StoryContext<T>) => {
   context.args = getCategorizedArgs(context.args) as T;
 
   return <Component />;
@@ -70,6 +70,6 @@ export const getArgsFromArgTypes = <T extends ArgTypes>(argsTypes: T) => {
 export const renderer = <T extends ElementType>(Component: T) => {
   const component = <G,>(props: G) => <Component {...(props as ComponentProps<T>)} />;
   component.displayName =
-    (Component as React.FC<unknown>).displayName || (Component as React.FC<unknown>).name;
+    (Component as React.FC<unknown>).displayName ?? (Component as React.FC<unknown>).name;
   return component;
 };

package/src/components/Chart/types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/consistent-indexed-object-style */
 import type { ComponentProps, ComponentType, ReactNode } from "react";
 import { LegendProps, ResponsiveContainer, Tooltip } from "recharts";
 import { type Theme } from "../../utilities";

package/src/components/DatePicker/types.ts

@@ -15,7 +15,7 @@ export type DatePickerProps = BaseDatePickerProps &
     }: {
       date: Date | undefined;
       setDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
-    }) => JSX.Element | null;
+    }) => React.JSX.Element | null;
     defaultDate?: Date;
     getDateLabel?: (date: Date | undefined) => string | undefined;
     getDateValue?: (date: Date | undefined) => string | undefined;
@@ -28,12 +28,12 @@ export type DateRangePickerProps = BaseDatePickerProps &
       from: string | undefined;
       to: string | undefined;
     };
-    getRangeLabel?: (range: DateRange | undefined) => string | JSX.Element | undefined;
+    getRangeLabel?: (range: DateRange | undefined) => string | React.JSX.Element | undefined;
   };
 
 export type MultipleDatesPickerProps = BaseDatePickerProps &
   Omit<PropsMulti, "mode"> & {
     defaultDates?: Date[];
     getDatesValue?: (dates: Date[] | undefined) => string[] | undefined;
-    getDatesLabel?: (dates: Date[] | undefined) => string | JSX.Element | undefined;
+    getDatesLabel?: (dates: Date[] | undefined) => string | React.JSX.Element | undefined;
   };

package/src/components/DragAndDrop/Draggable/types.ts

@@ -13,7 +13,7 @@ export enum DraggableAxis {
   Horizontal,
 }
 
-export type DraggableHandleElement = JSX.Element | null;
+export type DraggableHandleElement = React.JSX.Element | null;
 
 export type DraggableActionsArgs = {
   draggable: {

package/src/components/DragAndDrop/Droppable/Droppable.tsx

@@ -29,7 +29,7 @@ export const Droppable = ({
       className={cn(className, getDroppableClasses({ isDragging, isOver, isEmpty }))}
       data-empty={isEmpty}
       data-draggable-over={isOver || undefined}
-      data-draggable-active={isDragging || undefined}
+      data-draggable-active={isDragging ?? undefined}
       {...props}
     >
       {children}

package/src/components/Form/MultiSelect/MultiSelect.tsx

@@ -18,6 +18,7 @@ import { Badge } from "../../Badge";
 import { Command } from "../../Command";
 import {
   getMultiSelectClasses,
+  getMultiSelectInputClasses,
   getMultiSelectItemClasses,
   getMultiSelectListClasses,
   getMultiSelectTagClasses,
@@ -247,7 +248,7 @@ export const MultiSelectTrigger = ({
 
 MultiSelectTrigger.displayName = "MultiSelectTrigger";
 
-const MultiSelectInput = ({ className, ...props }: MultiSelectInputProps) => {
+const MultiSelectInput = ({ className, size, ...props }: MultiSelectInputProps) => {
   const {
     setOpen,
     inputValue,
@@ -270,9 +271,9 @@ const MultiSelectInput = ({ className, ...props }: MultiSelectInputProps) => {
       onFocus={() => setOpen(true)}
       onClick={() => setActiveIndex(-1)}
       className={cn(
-        "bg-transparent outline-none flex-1",
-        className,
-        activeIndex !== -1 && "caret-transparent"
+        getMultiSelectInputClasses({ size }),
+        { "caret-transparent": activeIndex !== -1 },
+        className
       )}
     />
   );
@@ -309,7 +310,7 @@ const MultiSelectList = forwardRef<ComponentRef<typeof Command.List>, MultiSelec
 MultiSelectList.displayName = "MultiSelectList";
 
 const MultiSelectItem = forwardRef<ComponentRef<typeof Command.Item>, MultiSelectItemProps>(
-  ({ className, value, label, children, size, disabled, ...props }, ref) => {
+  ({ className, value, label, children, size, disabled, variant, ...props }, ref) => {
     const { values: options, onValueChange, setInputValue } = useMultiSelect();
 
     const mousePreventDefault = useCallback((e: MouseEvent) => {
@@ -327,7 +328,7 @@ const MultiSelectItem = forwardRef<ComponentRef<typeof Command.Item>, MultiSelec
           onValueChange(value, label);
           setInputValue("");
         }}
-        className={cn(getMultiSelectItemClasses({ included, disabled, size }), className)}
+        className={cn(getMultiSelectItemClasses({ included, disabled, variant, size }), className)}
         onMouseDown={mousePreventDefault}
       >
         {children}

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

@@ -1,18 +1,15 @@
 import { cva } from "../../../libs";
 
-export const getMultiSelectClasses = cva(
-  "overflow-visible bg-transparent flex flex-col h-fit w-fit"
-);
+export const getMultiSelectClasses = cva("overflow-visible bg-transparent flex flex-col h-fit");
 
 export const getMultiSelectTriggerClasses = cva(
-  "flex items-center flex-wrap gap-1 h-fit px-1 py-2 rounded-md transition-all overflow-hidden",
+  "flex items-center flex-wrap gap-1 h-fit w-fit px-1 py-2 rounded-md transition-all overflow-hidden",
   {
     variants: {
       variant: {
         default: "border-0",
         accent: "border border-accent",
         error: "border border-error",
-        ghost: "border border-ghost",
         info: "border border-info",
         primary: "border border-primary",
         secondary: "border border-secondary",
@@ -55,7 +52,7 @@ export const getMultiSelectTriggerClasses = cva(
 );
 
 export const getMultiSelectItemClasses = cva(
-  "rounded-md cursor-pointer px-2 py-1 transition-colors flex justify-between",
+  "cursor-pointer transition-colors flex justify-between aria-selected:bg-base-300 aria-selected:text-base-content rounded-sm py-1.5 px-2 text-sm outline-none",
   {
     variants: {
       included: {
@@ -70,12 +67,22 @@ export const getMultiSelectItemClasses = cva(
         md: "px-2 text-sm",
         lg: "px-3 text-lg",
       },
+      variant: {
+        default: "aria-selected:bg-transparent aria-selected:text-base-content",
+        primary: "aria-selected:bg-primary aria-selected:text-primary-content",
+        secondary: "aria-selected:bg-secondary aria-selected:text-secondary-content",
+        accent: "aria-selected:bg-accent aria-selected:text-accent-content",
+        success: "aria-selected:bg-success aria-selected:text-success-content",
+        warning: "aria-selected:bg-warning aria-selected:text-warning-content",
+        info: "aria-selected:bg-info aria-selected:text-info-content",
+        error: "aria-selected:bg-error aria-selected:text-error-content",
+      },
     },
   }
 );
 
 export const getMultiSelectListClasses = cva(
-  "p-2 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-0",
+  "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",
   {
     variants: {
       size: {
@@ -101,3 +108,14 @@ export const getMultiSelectTagClasses = cva(
     },
   }
 );
+
+export const getMultiSelectInputClasses = cva("bg-transparent outline-none flex-1", {
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-md",
+      lg: "text-lg",
+    },
+  },
+});

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

@@ -2,6 +2,7 @@ import { ComponentPropsWithoutRef, HTMLAttributes } from "react";
 import { VariantProps } from "../../../libs";
 import { Command } from "../../Command";
 import {
+  getMultiSelectInputClasses,
   getMultiSelectItemClasses,
   getMultiSelectListClasses,
   getMultiSelectTriggerClasses,
@@ -28,14 +29,15 @@ export type MultiSelectContextProps = {
   setInputValue: React.Dispatch<React.SetStateAction<string>>;
   activeIndex: number;
   setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
-  ref: React.RefObject<HTMLInputElement>;
+  ref: React.RefObject<HTMLInputElement | null>;
   handleSelect: (e: React.SyntheticEvent<HTMLInputElement>) => void;
 };
 
 export type MultiSelectTriggerProps = HTMLAttributes<HTMLDivElement> &
   VariantProps<typeof getMultiSelectTriggerClasses>;
 
-export type MultiSelectInputProps = ComponentPropsWithoutRef<typeof Command.Input>;
+export type MultiSelectInputProps = Omit<ComponentPropsWithoutRef<typeof Command.Input>, "size"> &
+  VariantProps<typeof getMultiSelectInputClasses>;
 
 export type MultiSelectContentProps = HTMLAttributes<HTMLDivElement>;
 

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

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

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

@@ -47,7 +47,7 @@ export const getSelectTriggerClasses = cva(
 );
 
 export const getSelectItemClasses = cva(
-  "relative flex w-full cursor-pointer select-none items-center focus:bg-neutral focus:text-neutral-content rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  "relative flex w-full cursor-pointer select-none items-center focus:bg-base-300 focus:text-base-content rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
   {
     variants: {
       variant: {
@@ -66,6 +66,17 @@ export const getSelectItemClasses = cva(
 
 export const getSelectLabelClasses = cva("px-2 py-1.5 text-sm font-semibold");
 
+export const getSelectValueClasses = cva("", {
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-md",
+      lg: "text-lg",
+    },
+  },
+});
+
 export const getSelectSeparatorClasses = cva("-mx-1 my-1 h-px bg-muted");
 
 export const getSelectContentClasses = cva(

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

@@ -1,6 +1,10 @@
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { type VariantProps } from "../../../libs";
-import { getSelectContentClasses, getSelectTriggerClasses } from "./constants";
+import {
+  getSelectContentClasses,
+  getSelectTriggerClasses,
+  getSelectValueClasses,
+} from "./constants";
 
 export type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &
   VariantProps<typeof getSelectTriggerClasses>;
@@ -10,3 +14,6 @@ export type SelectItemProps = React.ComponentPropsWithoutRef<typeof SelectPrimit
 
 export type SelectContentProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> &
   VariantProps<typeof getSelectContentClasses>;
+
+export type SelectValueProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value> &
+  VariantProps<typeof getSelectValueClasses>;

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

@@ -3,7 +3,7 @@ import { getFormControlClasses } from "./constants";
 
 export type As = "div" | "span" | "label";
 
-type AllowedElements = Pick<JSX.IntrinsicElements, As>;
+type AllowedElements = Pick<React.JSX.IntrinsicElements, As>;
 
 export type FormControlProps<T extends As> = (T extends "label"
   ? React.LabelHTMLAttributes<HTMLLabelElement>

package/src/components/Text/types.ts

@@ -3,7 +3,7 @@ import { getTextClasses } from "./constants";
 
 export type As = "h1" | "h2" | "h3" | "h4" | "h5" | "p" | "span";
 
-type AllowedElements = Pick<JSX.IntrinsicElements, As>;
+type AllowedElements = Pick<React.JSX.IntrinsicElements, As>;
 
 export type TextProps<T extends As> = React.HTMLAttributes<HTMLElement & AllowedElements[T]> &
   VariantProps<typeof getTextClasses> & {

package/src/components/ThemeSwitch/types.ts

@@ -6,5 +6,5 @@ export type ThemeSwitchProps = React.ComponentPropsWithoutRef<"label"> & {
   render?: (params: {
     theme: Theme | null;
     setTheme: React.Dispatch<React.SetStateAction<Theme | null>>;
-  }) => JSX.Element;
+  }) => React.JSX.Element;
 };