@mbao01/common 0.6.5 → 0.7.1

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

@@ -4,5 +4,5 @@ export declare const Flex: React.ForwardRefExoticComponent<React.HTMLAttributes<
     align?: "end" | "center" | "start" | "stretch" | "baseline" | undefined;
     justify?: "end" | "center" | "start" | "between" | "around" | "evenly" | undefined;
     wrap?: "wrap" | "wrap-reverse" | "nowrap" | undefined;
-    gap?: 0 | 1 | 4 | 3 | 8 | 2 | 5 | 6 | 10 | 12 | 16 | undefined;
+    gap?: 0 | 1 | 4 | 3 | 8 | 2 | 12 | 16 | 5 | 6 | 10 | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -3,5 +3,5 @@ export declare const getFlexClasses: (props?: ({
     align?: "end" | "center" | "start" | "stretch" | "baseline" | null | undefined;
     justify?: "end" | "center" | "start" | "between" | "around" | "evenly" | null | undefined;
     wrap?: "wrap" | "wrap-reverse" | "nowrap" | null | undefined;
-    gap?: 0 | 1 | 4 | 3 | 8 | 2 | 5 | 6 | 10 | 12 | 16 | null | undefined;
+    gap?: 0 | 1 | 4 | 3 | 8 | 2 | 12 | 16 | 5 | 6 | 10 | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,11 +1,11 @@
 import { default as React } from 'react';
 export declare const Grid: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    gap?: 0 | 1 | 4 | 3 | 8 | 2 | 5 | 6 | 10 | 12 | 16 | undefined;
-    columns?: 1 | 4 | 3 | 8 | 2 | 5 | 6 | 10 | 12 | 7 | 9 | 11 | undefined;
-    rows?: 1 | 4 | 3 | 8 | 2 | 5 | 6 | 10 | 12 | 7 | 9 | 11 | undefined;
+    gap?: 0 | 1 | 4 | 3 | 8 | 2 | 12 | 16 | 5 | 6 | 10 | undefined;
+    columns?: 1 | 4 | 3 | 8 | 2 | 12 | 5 | 6 | 10 | 7 | 9 | 11 | undefined;
+    rows?: 1 | 4 | 3 | 8 | 2 | 12 | 5 | 6 | 10 | 7 | 9 | 11 | undefined;
     flow?: "row" | "col" | "dense" | "row-dense" | "col-dense" | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export declare const GridItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    colSpan?: 1 | 4 | 3 | 8 | 2 | 5 | 6 | 10 | 12 | 7 | 9 | 11 | "full" | undefined;
-    rowSpan?: 1 | 4 | 3 | 2 | 5 | 6 | "full" | undefined;
+    colSpan?: 1 | 4 | 3 | 8 | "full" | 2 | 12 | 5 | 6 | 10 | 7 | 9 | 11 | undefined;
+    rowSpan?: 1 | 4 | 3 | "full" | 2 | 5 | 6 | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,10 +1,10 @@
 export declare const getGridClasses: (props?: ({
-    columns?: 1 | 4 | 3 | 8 | 2 | 5 | 6 | 10 | 12 | 7 | 9 | 11 | null | undefined;
-    rows?: 1 | 4 | 3 | 8 | 2 | 5 | 6 | 10 | 12 | 7 | 9 | 11 | null | undefined;
-    gap?: 0 | 1 | 4 | 3 | 8 | 2 | 5 | 6 | 10 | 12 | 16 | null | undefined;
+    columns?: 1 | 4 | 3 | 8 | 2 | 12 | 5 | 6 | 10 | 7 | 9 | 11 | null | undefined;
+    rows?: 1 | 4 | 3 | 8 | 2 | 12 | 5 | 6 | 10 | 7 | 9 | 11 | null | undefined;
+    gap?: 0 | 1 | 4 | 3 | 8 | 2 | 12 | 16 | 5 | 6 | 10 | null | undefined;
     flow?: "row" | "col" | "dense" | "row-dense" | "col-dense" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const getGridItemClasses: (props?: ({
-    colSpan?: 1 | 4 | 3 | 8 | 2 | 5 | 6 | 10 | 12 | 7 | 9 | 11 | "full" | null | undefined;
-    rowSpan?: 1 | 4 | 3 | 2 | 5 | 6 | "full" | null | undefined;
+    colSpan?: 1 | 4 | 3 | 8 | "full" | 2 | 12 | 5 | 6 | 10 | 7 | 9 | 11 | null | undefined;
+    rowSpan?: 1 | 4 | 3 | "full" | 2 | 5 | 6 | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,6 +1,6 @@
 export declare const getSkeletonClasses: (props?: ({
     animate?: "pulse" | null | undefined;
-    width?: 4 | 8 | 2 | 12 | 16 | "full" | 24 | 32 | 48 | 64 | null | undefined;
-    height?: 4 | 8 | 2 | 12 | 16 | "full" | 24 | 32 | 48 | 64 | null | undefined;
+    width?: 4 | 8 | "full" | 2 | 12 | 16 | 24 | 32 | 48 | 64 | null | undefined;
+    height?: 4 | 8 | "full" | 2 | 12 | 16 | 24 | 32 | 48 | 64 | null | undefined;
     round?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
 export declare const Spacer: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
     axis?: "horizontal" | "vertical" | undefined;
-    gap?: 1 | 4 | 3 | 8 | 2 | 5 | 6 | 10 | 12 | 16 | 20 | 24 | undefined;
+    gap?: 1 | 4 | 3 | 8 | 2 | 12 | 16 | 24 | 5 | 6 | 10 | 20 | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,4 +1,4 @@
 export declare const getSpacerClasses: (props?: ({
     axis?: "horizontal" | "vertical" | null | undefined;
-    gap?: 1 | 4 | 3 | 8 | 2 | 5 | 6 | 10 | 12 | 16 | 20 | 24 | null | undefined;
+    gap?: 1 | 4 | 3 | 8 | 2 | 12 | 16 | 24 | 5 | 6 | 10 | 20 | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,5 +1,5 @@
 export declare const getStatusClasses: (props?: ({
     variant?: "accent" | "default" | "error" | "ghost" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
-    animate?: "ping" | "bounce" | "pulse" | "spin" | null | undefined;
+    animate?: "ping" | "pulse" | "bounce" | "spin" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.6.5",
+  "version": "0.7.1",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -131,8 +131,8 @@
     "@types/node": "^25.0.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.51.0",
-    "@typescript-eslint/parser": "^8.51.0",
+    "@typescript-eslint/eslint-plugin": "^8.52.0",
+    "@typescript-eslint/parser": "^8.52.0",
     "@vitejs/plugin-react": "^5.1.2",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
@@ -151,12 +151,12 @@
     "prettier": "^3.7.4",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "react-router-dom": "^7.11.0",
+    "react-router-dom": "^7.12.0",
     "recharts": "^3.6.0",
     "storybook": "^10.1.11",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.51.0",
+    "typescript-eslint": "^8.52.0",
     "vite": "^6.4.1",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4"
@@ -168,5 +168,5 @@
     "recharts": "2",
     "typescript": "5"
   },
-  "gitHead": "f3359c587061980729e83322e4f6330e04e0815e"
+  "gitHead": "5ccbce52df9f8411ec194b45909b47a0bc7d5b51"
 }

package/src/components/ThemeSwitch/ThemeSwitch.tsx

@@ -1,69 +1,109 @@
 "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 { Skeleton } from "../Skeleton";
+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 [isClient, setIsClient] = useState(false);
+  const [theme, setTheme] = useState(() => defaultTheme ?? getTheme());
 
   useLayoutEffect(() => {
-    if (theme) saveTheme(theme);
+    saveTheme(theme);
   }, [theme]);
 
+  useLayoutEffect(() => {
+    setIsClient(true);
+    const observer = new MutationObserver(() => {
+      const attr = document.body.getAttribute("data-theme");
+      if (attr === "dark" || attr === "light") {
+        setTheme(attr);
+      } else {
+        setTheme(null);
+      }
+    });
+    observer.observe(document.body, { attributes: true, attributeFilter: ["data-theme"] });
+
+    return () => observer.disconnect();
+  }, []);
+
+  if (!isClient) {
+    return <Skeleton width={swap ? 4 : 16} />;
+  }
+
   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,30 @@ 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 cookies = new Cookies();
+
+  if (!theme) {
+    cookies.remove(THEME_COOKIE_NAME);
+    document.body.removeAttribute(THEME_COOKIE_NAME);
+    return;
+  }
+
   cookies.set(THEME_COOKIE_NAME, theme, { path: "/", secure: true });
   document.body.setAttribute(THEME_COOKIE_NAME, theme);
 };