@mbao01/common 0.0.21 → 0.0.22

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { TableBodyProps, TableCaptionProps, TableCellProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps } from "./types";
+declare const Table: {
+    ({ className, caption, zebra, size, pinRow, pinColumn, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    Header: import("react").ForwardRefExoticComponent<TableHeaderProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Body: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Footer: import("react").ForwardRefExoticComponent<TableFooterProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Head: import("react").ForwardRefExoticComponent<TableHeadProps & import("react").RefAttributes<HTMLTableCellElement>>;
+    Row: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
+    Cell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+    Caption: import("react").ForwardRefExoticComponent<TableCaptionProps & import("react").RefAttributes<HTMLTableCaptionElement>>;
+};
+export { Table };

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

@@ -0,0 +1,8 @@
+export declare const getTableClasses: (props?: ({
+    caption?: "top" | "bottom" | null | undefined;
+    zebra?: boolean | null | undefined;
+    pinRow?: boolean | null | undefined;
+    pinColumn?: boolean | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const getTableHeaderClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/types/components/Table/index.d.ts

@@ -0,0 +1 @@
+export { Table } from "./Table";

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { VariantProps } from "../../libs";
+import { getTableClasses } from "./constants";
+export type TableProps = React.HTMLAttributes<HTMLTableElement> & VariantProps<typeof getTableClasses>;
+export type TableHeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;
+export type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
+export type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement>;
+export type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>;
+export type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement>;
+export type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement>;
+export type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;

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

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

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

@@ -0,0 +1 @@
+export declare const getThemeSwitchClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

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

@@ -0,0 +1 @@
+export { ThemeSwitch } from "./ThemeSwitch";

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { type Theme } from "../../utilities";
+export type ThemeSwitchProps = React.ComponentPropsWithoutRef<"label"> & {
+    name?: string;
+    theme?: Theme;
+    render?: (params: {
+        theme: Theme | null;
+        setTheme: React.Dispatch<React.SetStateAction<Theme | null>>;
+    }) => JSX.Element;
+};

package/dist/types/index.d.ts

@@ -3,6 +3,7 @@ export * from "./components/Button";
 export * from "./components/Breadcrumbs";
 export * from "./components/Menu";
 export * from "./components/Pagination";
+export * from "./components/ThemeSwitch";
 export * from "./components/Toggle";
 export * from "./components/ToggleGroup";
 /** data display */
@@ -18,6 +19,7 @@ export * from "./components/Progress";
 export * from "./components/ScrollArea";
 export * from "./components/Separator";
 export * from "./components/Sonner";
+export * from "./components/Table";
 export * from "./components/Tabs";
 export * from "./components/Text";
 /** data input */

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

@@ -1,4 +1,3 @@
-type Theme = "dark" | "light" | "system";
+export type Theme = "dark" | "light";
 export declare const getTheme: () => Theme | null;
 export declare const saveTheme: (theme: Theme) => void;
-export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.21",
+  "version": "0.0.22",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -142,5 +142,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "413c452e832fd947234ffac4d61aaa3dd20c7a0f"
+  "gitHead": "a37cc681238d753608c43c5b47a829826f059c74"
 }

package/src/components/Table/Table.tsx

@@ -0,0 +1,85 @@
+import { forwardRef } from "react";
+import { cn } from "../../utilities";
+import type {
+  TableBodyProps,
+  TableCaptionProps,
+  TableCellProps,
+  TableFooterProps,
+  TableHeadProps,
+  TableHeaderProps,
+  TableProps,
+  TableRowProps,
+} from "./types";
+import { getTableClasses, getTableHeaderClasses } from "./constants";
+
+const Table = ({
+  className,
+  caption,
+  zebra,
+  size,
+  pinRow,
+  pinColumn,
+  ...props
+}: TableProps) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      className={cn(
+        getTableClasses({ caption, zebra, size, pinRow, pinColumn }),
+        className
+      )}
+      {...props}
+    />
+  </div>
+);
+Table.displayName = "Table";
+
+const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <thead
+      ref={ref}
+      className={cn(getTableHeaderClasses(), className)}
+      {...props}
+    />
+  )
+);
+TableHeader.displayName = "TableHeader";
+
+const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  (props, ref) => <tbody ref={ref} {...props} />
+);
+TableBody.displayName = "TableBody";
+
+const TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>(
+  (props, ref) => <tfoot ref={ref} {...props} />
+);
+TableFooter.displayName = "TableFooter";
+
+const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+  (props, ref) => <tr ref={ref} {...props} />
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = forwardRef<HTMLTableCellElement, TableHeadProps>(
+  (props, ref) => <th ref={ref} {...props} />
+);
+TableHead.displayName = "TableHead";
+
+const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
+  (props, ref) => <td ref={ref} {...props} />
+);
+TableCell.displayName = "TableCell";
+
+const TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>(
+  (props, ref) => <caption ref={ref} {...props} />
+);
+TableCaption.displayName = "TableCaption";
+
+Table.Header = TableHeader;
+Table.Body = TableBody;
+Table.Footer = TableFooter;
+Table.Head = TableHead;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+Table.Caption = TableCaption;
+
+export { Table };

package/src/components/Table/constants.ts

@@ -0,0 +1,27 @@
+import { cva } from "../../libs";
+
+export const getTableClasses = cva("table", {
+  variants: {
+    caption: {
+      top: "caption-top",
+      bottom: "caption-bottom",
+    },
+    zebra: {
+      true: "table-zebra",
+    },
+    pinRow: {
+      true: "table-pin-rows",
+    },
+    pinColumn: {
+      true: "table-pin-cols",
+    },
+    size: {
+      xs: "table-xs",
+      sm: "table-sm",
+      md: "table-md",
+      lg: "table-lg",
+    },
+  },
+});
+
+export const getTableHeaderClasses = cva("[&_tr]:border-b");

package/src/components/Table/index.ts

@@ -0,0 +1 @@
+export { Table } from "./Table";

package/src/components/Table/types.ts

@@ -0,0 +1,19 @@
+import { VariantProps } from "../../libs";
+import { getTableClasses } from "./constants";
+
+export type TableProps = React.HTMLAttributes<HTMLTableElement> &
+  VariantProps<typeof getTableClasses>;
+
+export type TableHeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;
+
+export type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
+
+export type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement>;
+
+export type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>;
+
+export type TableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement>;
+
+export type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement>;
+
+export type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;

package/src/components/ThemeSwitch/ThemeSwitch.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { type ChangeEvent, useLayoutEffect, useState } from "react";
+import { type ThemeSwitchProps } from "./types";
+import { cn, getTheme, saveTheme } from "../../utilities";
+import { getThemeSwitchClasses } 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 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>
+);
+
+export const ThemeSwitch = ({
+  name,
+  render,
+  className,
+  theme: defaultTheme,
+  ...props
+}: ThemeSwitchProps) => {
+  const [theme, setTheme] = useState(defaultTheme ?? getTheme);
+
+  useLayoutEffect(() => {
+    if (theme) saveTheme(theme);
+  }, [theme]);
+
+  if (render) {
+    return render({ theme, setTheme });
+  }
+
+  const changeTheme = (e: ChangeEvent<HTMLInputElement>) => {
+    const t = e.target.checked ? "light" : "dark";
+    setTheme(t);
+  };
+
+  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}
+      />
+      <MoonIcon title="Switch to dark theme" />
+      <SunIcon title="Switch to light theme" />
+    </label>
+  );
+};

package/src/components/ThemeSwitch/constants.ts

@@ -0,0 +1,5 @@
+import { cva } from "../../libs";
+
+export const getThemeSwitchClasses = cva(
+  "swap swap-rotate flex items-center gap-4"
+);

package/src/components/ThemeSwitch/index.ts

@@ -0,0 +1 @@
+export { ThemeSwitch } from "./ThemeSwitch";

package/src/components/ThemeSwitch/types.ts

@@ -0,0 +1,10 @@
+import { type Theme } from "../../utilities";
+
+export type ThemeSwitchProps = React.ComponentPropsWithoutRef<"label"> & {
+  name?: string;
+  theme?: Theme;
+  render?: (params: {
+    theme: Theme | null;
+    setTheme: React.Dispatch<React.SetStateAction<Theme | null>>;
+  }) => JSX.Element;
+};

package/src/index.ts

@@ -3,6 +3,7 @@ export * from "./components/Button";
 export * from "./components/Breadcrumbs";
 export * from "./components/Menu";
 export * from "./components/Pagination";
+export * from "./components/ThemeSwitch";
 export * from "./components/Toggle";
 export * from "./components/ToggleGroup";
 
@@ -19,6 +20,7 @@ export * from "./components/Progress";
 export * from "./components/ScrollArea";
 export * from "./components/Separator";
 export * from "./components/Sonner";
+export * from "./components/Table";
 export * from "./components/Tabs";
 export * from "./components/Text";
 

package/src/utilities/theme.ts

@@ -1,4 +1,4 @@
-type Theme = "dark" | "light" | "system";
+export type Theme = "dark" | "light";
 
 export const getTheme = () => {
   if (typeof window === "undefined") return null;
@@ -7,13 +7,11 @@ export const getTheme = () => {
   if (!t)
     t = window.matchMedia("(prefers-color-scheme: dark)")?.matches
       ? "dark"
-      : window.matchMedia("(prefers-color-scheme: light)")?.matches
-        ? "light"
-        : "system";
+      : "light";
   return t;
 };
 
 export const saveTheme = (theme: Theme) => {
   document.body.setAttribute("data-theme", theme);
-  localStorage.setItem("__theme", theme);
+  window.localStorage.setItem("__theme", theme);
 };