@mbao01/common 0.6.4 → 0.7.0

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

@@ -1,2 +1,2 @@
 import { BadgeProps } from './types';
-export declare const Badge: ({ size, outline, rounded, variant, className, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ size, outline, rounded, variant, soft, className, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
 export declare const getBadgeClasses: (props?: ({
     variant?: "accent" | "error" | "ghost" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+    soft?: boolean | null | undefined;
     outline?: boolean | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
     rounded?: "xs" | "sm" | "md" | "lg" | null | undefined;

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

@@ -1,7 +1,7 @@
 import { NameType, Payload as TooltipPayload, ValueType } from 'recharts/types/component/DefaultTooltipContent';
 import { LegendPayload } from 'recharts';
 import { ChartConfig } from './types';
-export declare const getPayloadConfigFromPayload: (config: ChartConfig, payload: LegendPayload | TooltipPayload<ValueType, NameType>, key: string) => ({
+export declare const getPayloadConfigFromPayload: (config: ChartConfig, payload: LegendPayload | Omit<TooltipPayload<ValueType, NameType>, "graphicalItemId">, key: string) => ({
     label?: import('react').ReactNode;
     icon?: import('react').ComponentType;
 } & ({

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

@@ -56,6 +56,7 @@ export declare const DatetimeInput: import('react').ForwardRefExoticComponent<{
         broadcastCalendar?: boolean | undefined;
         ISOWeek?: boolean | undefined;
         timeZone?: string | undefined | undefined;
+        noonSafe?: boolean | undefined | undefined;
         components?: Partial<import('react-day-picker').CustomComponents> | undefined;
         initialFocus?: boolean | undefined;
         today?: Date | undefined;

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

@@ -1,2 +1,2 @@
 import { ThemeSwitchProps } from './types';
-export declare const ThemeSwitch: ({ name, render, className, theme: defaultTheme, ...props }: ThemeSwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeSwitch: ({ swap, render, className, theme: defaultTheme, }: ThemeSwitchProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1,7 @@
-export declare const getThemeSwitchClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getThemeSwitchClasses: (props?: ({
+    swap?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getThemeSwitchIconClasses: (props?: ({
+    isActive?: boolean | null | undefined;
+    swap?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,7 +1,18 @@
 import { Theme } from '../../utilities';
-export type ThemeSwitchProps = React.ComponentPropsWithoutRef<"label"> & {
-    name?: string;
+export type SwitchProps = {
+    id: string;
+    icon: React.ReactNode;
+    swap?: boolean;
+    label: string;
+    value: Theme | null;
+    theme: Theme | null;
+    className?: string;
+    changeTheme: (theme: Theme | null) => void;
+};
+export type ThemeSwitchProps = {
+    swap?: boolean;
     theme?: Theme;
+    className?: string;
     render?: (params: {
         theme: Theme | null;
         setTheme: React.Dispatch<React.SetStateAction<Theme | null>>;

package/dist/types/utilities/theme.d.ts

@@ -1,4 +1,4 @@
 export type Theme = "dark" | "light";
 export declare const THEME_COOKIE_NAME = "data-theme";
 export declare const getTheme: () => Theme | null;
-export declare const saveTheme: (theme: Theme) => void;
+export declare const saveTheme: (theme: Theme | null) => null | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.6.4",
+  "version": "0.7.0",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -99,8 +99,8 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
-    "lucide-react": "^0.559.0",
-    "react-day-picker": "^9.12.0",
+    "lucide-react": "^0.562.0",
+    "react-day-picker": "^9.13.0",
     "react-dropzone": "^14.3.8",
     "react-international-phone": "^4.6.1",
     "react-otp-input": "^3.1.1",
@@ -112,51 +112,51 @@
     "vaul": "^1.1.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.2",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
-    "@storybook/addon-a11y": "^10.1.6",
+    "@storybook/addon-a11y": "^10.1.11",
     "@storybook/addon-coverage": "^3.0.0",
-    "@storybook/addon-docs": "^10.1.6",
-    "@storybook/addon-links": "^10.1.6",
-    "@storybook/addon-onboarding": "^10.1.6",
-    "@storybook/addon-themes": "^10.1.6",
-    "@storybook/react-vite": "^10.1.6",
+    "@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/test-runner": "^0.24.2",
-    "@tailwindcss/postcss": "^4.1.17",
-    "@tailwindcss/vite": "^4.1.17",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.18",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@types/node": "^25.0.0",
+    "@types/node": "^25.0.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.49.0",
-    "@typescript-eslint/parser": "^8.49.0",
+    "@typescript-eslint/eslint-plugin": "^8.51.0",
+    "@typescript-eslint/parser": "^8.51.0",
     "@vitejs/plugin-react": "^5.1.2",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
     "axe-playwright": "^2.2.2",
-    "daisyui": "^5.5.11",
-    "eslint": "^9.39.1",
+    "daisyui": "^5.5.14",
+    "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "eslint-plugin-storybook": "^10.1.6",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "eslint-plugin-storybook": "^10.1.11",
     "globals": "^16.5.0",
     "jest-image-snapshot": "^6.5.1",
-    "jsdom": "^27.3.0",
+    "jsdom": "^27.4.0",
     "path": "^0.12.7",
     "postcss": "^8.5.6",
     "prettier": "^3.7.4",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
-    "react-router-dom": "^7.10.1",
-    "recharts": "^3.5.1",
-    "storybook": "^10.1.6",
-    "tailwindcss": "^4.1.17",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-router-dom": "^7.11.0",
+    "recharts": "^3.6.0",
+    "storybook": "^10.1.11",
+    "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.49.0",
+    "typescript-eslint": "^8.51.0",
     "vite": "^6.4.1",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4"
@@ -168,5 +168,5 @@
     "recharts": "2",
     "typescript": "5"
   },
-  "gitHead": "10397a5f4ed4e27e07ed9039ac964c17717dec3d"
+  "gitHead": "412b7c47a5fe2f7fc7e8e17255b6df1dbb3428b5"
 }

package/src/components/Badge/Badge.tsx

@@ -2,10 +2,18 @@ import { cn } from "../../utilities";
 import { getBadgeClasses } from "./constants";
 import { type BadgeProps } from "./types";
 
-export const Badge = ({ size, outline, rounded, variant, className, ...props }: BadgeProps) => {
+export const Badge = ({
+  size,
+  outline,
+  rounded,
+  variant,
+  soft,
+  className,
+  ...props
+}: BadgeProps) => {
   return (
     <span
-      className={cn(getBadgeClasses({ size, variant, outline, rounded }), className)}
+      className={cn(getBadgeClasses({ size, variant, outline, rounded, soft }), className)}
       {...props}
     />
   );

package/src/components/Badge/constants.ts

@@ -14,6 +14,9 @@ export const getBadgeClasses = cva("badge", {
       success: "badge-success",
       warning: "badge-warning",
     },
+    soft: {
+      true: "badge-soft",
+    },
     outline: {
       true: "badge-outline",
     },
@@ -30,21 +33,6 @@ export const getBadgeClasses = cva("badge", {
       lg: "rounded-lg",
     },
   }),
-  compoundVariants: [
-    {
-      size: undefined,
-      className: "text-xs",
-    },
-    {
-      rounded: undefined,
-      className: "rounded-md",
-    },
-    {
-      variant: "ghost",
-      outline: true,
-      className: "border-base-300",
-    },
-  ],
   defaultVariants: {
     variant: "ghost",
   },

package/src/components/Chart/helpers.ts

@@ -9,7 +9,7 @@ import { type ChartConfig } from "./types";
 // Helper to extract item config from a payload.
 export const getPayloadConfigFromPayload = (
   config: ChartConfig,
-  payload: LegendPayload | TooltipPayload<ValueType, NameType>,
+  payload: LegendPayload | Omit<TooltipPayload<ValueType, NameType>, "graphicalItemId">,
   key: string
 ) => {
   if (typeof payload !== "object" || payload === null) {

package/src/components/ThemeSwitch/ThemeSwitch.tsx

@@ -1,69 +1,88 @@
 "use client";
 
-import type { ChangeEvent } from "react";
 import { useLayoutEffect, useState } from "react";
-import { cn, getTheme, saveTheme } from "../../utilities";
-import { getThemeSwitchClasses } from "./constants";
-import { type ThemeSwitchProps } from "./types";
+import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+import type { SwitchProps, ThemeSwitchProps } from "./types";
+import { cn, getTheme, saveTheme, Theme } from "../../utilities";
+import { getThemeSwitchClasses, getThemeSwitchIconClasses } from "./constants";
 
-const MoonIcon = ({ title }: { title: string }) => (
-  <svg
-    className="swap-on h-4 w-4 fill-current"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-  >
-    {title && <title>{title}</title>}
-    <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
-  </svg>
-);
+const Switcher = ({ id, icon, swap, value, label, theme, changeTheme, className }: SwitchProps) => {
+  const isActive = theme === value;
 
-const SunIcon = ({ title }: { title: string }) => (
-  <svg
-    className="swap-off h-4 w-4 fill-current"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    xlinkTitle="sun-icon"
-  >
-    {title && <title>{title}</title>}
-    <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
-  </svg>
-);
+  return (
+    <span
+      className={cn("h-full", {
+        hidden: swap && isActive,
+      })}
+    >
+      <input
+        hidden
+        id={id}
+        role="checkbox"
+        type="checkbox"
+        className="theme-controller"
+        checked={isActive}
+        onChange={() => changeTheme(value)}
+      />
+      <label htmlFor={id} className={cn(getThemeSwitchIconClasses({ isActive, swap }), className)}>
+        <span className="sr-only">{label}</span>
+        {icon}
+      </label>
+    </span>
+  );
+};
 
 export const ThemeSwitch = ({
-  name,
+  swap = false,
   render,
   className,
   theme: defaultTheme,
-  ...props
 }: ThemeSwitchProps) => {
-  const [theme, setTheme] = useState(defaultTheme ?? getTheme);
+  const [theme, setTheme] = useState(() => defaultTheme ?? getTheme());
 
   useLayoutEffect(() => {
-    if (theme) saveTheme(theme);
+    saveTheme(theme);
   }, [theme]);
 
   if (render) {
     return render({ theme, setTheme });
   }
 
-  const changeTheme = (e: ChangeEvent<HTMLInputElement>) => {
-    const t = e.target.checked ? "light" : "dark";
-    setTheme(t);
+  const changeTheme = (theme: Theme | null) => {
+    setTheme(theme);
   };
 
   return (
-    <label className={cn(getThemeSwitchClasses(), className)} {...props}>
-      {/* this hidden checkbox controls the state */}
-      <input
-        hidden
-        name={name}
-        type="checkbox"
-        className="theme-controller"
-        checked={theme === "light"}
-        onChange={changeTheme}
+    <fieldset className={cn(getThemeSwitchClasses({ swap }), className)}>
+      {!swap && (
+        <Switcher
+          id="system"
+          swap={swap}
+          icon={<MonitorIcon className="h-3.5 w-3.5 shrink-0" />}
+          label="Switch to system theme"
+          value={null}
+          theme={theme}
+          changeTheme={changeTheme}
+        />
+      )}
+      <Switcher
+        id="dark"
+        swap={swap}
+        icon={<MoonIcon className="h-3.5 w-3.5 shrink-0" />}
+        label="Switch to dark theme"
+        value="dark"
+        theme={theme}
+        changeTheme={changeTheme}
+      />
+      <Switcher
+        id="light"
+        swap={swap}
+        icon={<SunIcon className="h-3.5 w-3.5 shrink-0" />}
+        label="Switch to light theme"
+        value="light"
+        theme={theme}
+        changeTheme={changeTheme}
       />
-      <MoonIcon title="Switch to dark theme" />
-      <SunIcon title="Switch to light theme" />
-    </label>
+    </fieldset>
   );
 };

package/src/components/ThemeSwitch/constants.ts

@@ -1,3 +1,36 @@
 import { cva } from "../../libs";
 
-export const getThemeSwitchClasses = cva("swap swap-rotate");
+export const getThemeSwitchClasses = cva("", {
+  variants: {
+    swap: {
+      false:
+        "flex flex-row items-center justify-around h-6 w-18 border border-base-content/10 rounded-full",
+    },
+  },
+});
+
+export const getThemeSwitchIconClasses = cva(
+  "cursor-pointer text-base-content/40 hover:text-base-content transition-colors",
+  {
+    variants: {
+      isActive: {
+        true: "rounded-[9999px] outline outline-1 outline-base-content/10",
+      },
+      swap: {
+        false: "flex items-center justify-center w-6 h-full",
+      },
+    },
+    compoundVariants: [
+      {
+        swap: false,
+        isActive: true,
+        className: "text-base-content",
+      },
+      {
+        swap: true,
+        isActive: false,
+        className: "text-base-content",
+      },
+    ],
+  }
+);

package/src/components/ThemeSwitch/types.ts

@@ -1,8 +1,20 @@
 import { type Theme } from "../../utilities";
 
-export type ThemeSwitchProps = React.ComponentPropsWithoutRef<"label"> & {
-  name?: string;
+export type SwitchProps = {
+  id: string;
+  icon: React.ReactNode;
+  swap?: boolean;
+  label: string;
+  value: Theme | null;
+  theme: Theme | null;
+  className?: string;
+  changeTheme: (theme: Theme | null) => void;
+};
+
+export type ThemeSwitchProps = {
+  swap?: boolean;
   theme?: Theme;
+  className?: string;
   render?: (params: {
     theme: Theme | null;
     setTheme: React.Dispatch<React.SetStateAction<Theme | null>>;

package/src/utilities/theme.ts

@@ -4,16 +4,26 @@ export type Theme = "dark" | "light";
 
 export const THEME_COOKIE_NAME = "data-theme";
 
+const getSystemTheme = () => {
+  if (typeof window === "undefined") return null;
+
+  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  return prefersDark ? "dark" : "light";
+};
+
 export const getTheme = () => {
   if (typeof window === "undefined") return null;
 
   const cookies = new Cookies();
-  const theme = cookies.get(THEME_COOKIE_NAME) as Theme;
+  const theme = (cookies.get(THEME_COOKIE_NAME) ?? getSystemTheme()) as Theme | null;
   return theme;
 };
 
-export const saveTheme = (theme: Theme) => {
+export const saveTheme = (theme: Theme | null) => {
+  const newTheme = theme ?? getSystemTheme();
+  if (!newTheme) return null;
+
   const cookies = new Cookies();
-  cookies.set(THEME_COOKIE_NAME, theme, { path: "/", secure: true });
-  document.body.setAttribute(THEME_COOKIE_NAME, theme);
+  cookies.set(THEME_COOKIE_NAME, newTheme, { path: "/", secure: true });
+  document.body.setAttribute(THEME_COOKIE_NAME, newTheme);
 };