@mbao01/common 0.6.5 → 0.7.0

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.5",
+  "version": "0.7.0",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -168,5 +168,5 @@
     "recharts": "2",
     "typescript": "5"
   },
-  "gitHead": "f3359c587061980729e83322e4f6330e04e0815e"
+  "gitHead": "412b7c47a5fe2f7fc7e8e17255b6df1dbb3428b5"
 }

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);
 };