@mbao01/common 0.7.0 → 0.7.2

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

@@ -1,2 +1,2 @@
 import { ComboboxProps, Item } from './types';
-export declare const Combobox: <T extends Item>({ label, items, classes, emptyText, placeholder, getItemValue, getItemLabel, onSelectItem, }: ComboboxProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Combobox: <T extends Item>({ label, items, classes, emptyText, placeholder, outline, variant, disabled, readOnly, getItemValue, getItemLabel, onSelectItem, }: ComboboxProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,5 @@
+import { ButtonProps } from '../Button/types';
+import { InputProps } from '../Form/Input/types';
 export type Item = Record<string, any>;
 export type ComboboxProps<T extends Item> = {
     label: string;
@@ -17,4 +19,4 @@ export type ComboboxProps<T extends Item> = {
         item: string;
         popoverContent: string;
     }>;
-};
+} & Pick<ButtonProps, "variant" | "disabled" | "outline"> & Pick<InputProps, "readOnly">;

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/Form/Select/Select.d.ts

@@ -9,6 +9,7 @@ declare const Select: {
         outline?: boolean | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         wide?: boolean | undefined;
+        readOnly?: boolean | undefined;
     } & {
         label?: React.ReactNode;
         labelPosition?: "start" | "end" | "floating";
@@ -22,6 +23,7 @@ declare const Select: {
         outline?: boolean | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         wide?: boolean | undefined;
+        readOnly?: boolean | undefined;
     } & React.RefAttributes<HTMLDivElement>>;
     Icon: React.ForwardRefExoticComponent<SelectPrimitive.SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
     ItemText: React.ForwardRefExoticComponent<SelectPrimitive.SelectItemTextProps & React.RefAttributes<HTMLSpanElement>>;

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

@@ -3,6 +3,7 @@ export declare const getSelectTriggerClasses: (props?: ({
     wide?: boolean | null | undefined;
     outline?: boolean | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    readOnly?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const getSelectItemClasses: (props?: ({
     variant?: "accent" | "default" | "error" | "ghost" | "info" | "primary" | "secondary" | "success" | "warning" | null | undefined;

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.2",
   "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": "605c1bb5b1367d8755951d5c5425ca86bcd5dd96"
 }

package/src/components/Combobox/Combobox.tsx

@@ -14,6 +14,10 @@ export const Combobox = <T extends Item>({
   classes,
   emptyText,
   placeholder,
+  outline,
+  variant,
+  disabled,
+  readOnly,
   getItemValue = (item: T) => item.value as string,
   getItemLabel = (item: T) => item.label as string,
   onSelectItem,
@@ -27,9 +31,11 @@ export const Combobox = <T extends Item>({
     <Popover open={open} onOpenChange={setOpen}>
       <Popover.Trigger asChild>
         <Button
-          outline
+          outline={outline}
           role="combobox"
+          variant={variant}
           aria-expanded={open}
+          disabled={disabled}
           className={cn("justify-between", classes?.trigger)}
         >
           {value && currentItem ? getItemLabel(currentItem) : label}
@@ -38,12 +44,18 @@ export const Combobox = <T extends Item>({
       </Popover.Trigger>
       <Popover.Content className={cn("w-[200px] p-0", classes?.popoverContent)}>
         <Command className={cn(classes?.content)}>
-          <Command.Input placeholder={placeholder} className={cn(classes?.input)} />
+          <Command.Input
+            placeholder={placeholder}
+            disabled={disabled}
+            readOnly={readOnly}
+            className={cn(classes?.input)}
+          />
           <Command.Empty className={cn(classes?.empty)}>{emptyText}</Command.Empty>
           <Command.List>
             <Command.Group className={cn(classes?.group)}>
               {items?.map((item) => (
                 <Command.Item
+                  disabled={disabled}
                   key={getItemValue(item)}
                   value={getItemValue(item)}
                   onSelect={(currentValue) => {

package/src/components/Combobox/types.ts

@@ -1,3 +1,6 @@
+import { ButtonProps } from "../Button/types";
+import { InputProps } from "../Form/Input/types";
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Item = Record<string, any>;
 
@@ -19,4 +22,5 @@ export type ComboboxProps<T extends Item> = {
     item: string;
     popoverContent: string;
   }>;
-};
+} & Pick<ButtonProps, "variant" | "disabled" | "outline"> &
+  Pick<InputProps, "readOnly">;

package/src/components/Form/Select/Select.tsx

@@ -55,6 +55,7 @@ const SelectTrigger = React.forwardRef<
       wide,
       variant,
       outline,
+      readOnly,
       ...props
     },
     ref
@@ -67,7 +68,11 @@ const SelectTrigger = React.forwardRef<
             <SelectPrimitive.Trigger
               id={id}
               ref={ref}
-              className={cn(getSelectTriggerClasses({ size, wide, variant, outline }), className)}
+              aria-readonly={readOnly}
+              className={cn(
+                getSelectTriggerClasses({ size, wide, variant, outline, readOnly }),
+                className
+              )}
               {...props}
             >
               {children}
@@ -79,10 +84,13 @@ const SelectTrigger = React.forwardRef<
       return (
         <label
           htmlFor={id}
-          className={cn(getSelectTriggerClasses({ size, wide, variant, outline }), className)}
+          className={cn(
+            getSelectTriggerClasses({ size, wide, variant, outline, readOnly }),
+            className
+          )}
         >
           {labelPosition === "start" && <LabelForSelect>{label}</LabelForSelect>}
-          <SelectPrimitive.Trigger id={id} ref={ref} {...props}>
+          <SelectPrimitive.Trigger id={id} ref={ref} aria-readonly={readOnly} {...props}>
             {children}
           </SelectPrimitive.Trigger>
           {labelPosition === "end" && <LabelForSelect className="me-0!">{label}</LabelForSelect>}
@@ -94,7 +102,11 @@ const SelectTrigger = React.forwardRef<
       <SelectPrimitive.Trigger
         id={id}
         ref={ref}
-        className={cn(getSelectTriggerClasses({ size, wide, variant, outline }), className)}
+        aria-readonly={readOnly}
+        className={cn(
+          getSelectTriggerClasses({ size, wide, variant, outline, readOnly }),
+          className
+        )}
         {...props}
       >
         {children}

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

@@ -29,6 +29,9 @@ export const getSelectTriggerClasses = cva(
         md: "select-md",
         lg: "select-lg",
       },
+      readOnly: {
+        true: "cursor-not-allowed pointer-events-none",
+      },
     }),
     compoundVariants: [
       {

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