@mbao01/common 0.7.0 → 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/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 | null) => null | undefined;
+export declare const saveTheme: (theme: Theme | null) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.7.0",
+  "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": "412b7c47a5fe2f7fc7e8e17255b6df1dbb3428b5"
+  "gitHead": "5ccbce52df9f8411ec194b45909b47a0bc7d5b51"
 }

package/src/components/ThemeSwitch/ThemeSwitch.tsx

@@ -4,6 +4,7 @@ import { useLayoutEffect, useState } from "react";
 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 Switcher = ({ id, icon, swap, value, label, theme, changeTheme, className }: SwitchProps) => {
@@ -38,12 +39,32 @@ export const ThemeSwitch = ({
   className,
   theme: defaultTheme,
 }: ThemeSwitchProps) => {
+  const [isClient, setIsClient] = useState(false);
   const [theme, setTheme] = useState(() => defaultTheme ?? getTheme());
 
   useLayoutEffect(() => {
     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 });
   }

package/src/utilities/theme.ts

@@ -20,10 +20,14 @@ export const getTheme = () => {
 };
 
 export const saveTheme = (theme: Theme | null) => {
-  const newTheme = theme ?? getSystemTheme();
-  if (!newTheme) return null;
-
   const cookies = new Cookies();
-  cookies.set(THEME_COOKIE_NAME, newTheme, { path: "/", secure: true });
-  document.body.setAttribute(THEME_COOKIE_NAME, newTheme);
+
+  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);
 };