@mbao01/common 0.0.21 → 0.0.23

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

@@ -0,0 +1 @@
+export { Slot } from "@radix-ui/react-slot";

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

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

package/dist/types/components/Sonner/Toaster.d.ts

@@ -1,2 +1,2 @@
 import { type ToasterProps } from "./types";
-export declare const Toaster: ({ theme, variant, outline, className, ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toaster: ({ theme, variant, actionButton, cancelButton, closeButton, showCloseButton, outline, ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,3 +2,7 @@ export declare const getToastClasses: (props?: ({
     variant?: "accent" | "default" | "error" | "ghost" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
     outline?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const getToastButtonClasses: (props?: ({
+    variant?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "base" | null | undefined;
+    outline?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 import { Toaster } from "sonner";
 import { type VariantProps } from "../../libs";
-import { getToastClasses } from "./constants";
-export type ToasterProps = React.ComponentProps<typeof Toaster> & VariantProps<typeof getToastClasses>;
+import { getToastButtonClasses, getToastClasses } from "./constants";
+type ToastButtonVariantProps = VariantProps<typeof getToastButtonClasses>;
+export type ToasterProps = Omit<React.ComponentProps<typeof Toaster>, "closeButton"> & VariantProps<typeof getToastClasses> & Partial<Record<"actionButton" | "cancelButton" | "closeButton", ToastButtonVariantProps>> & {
+    showCloseButton?: boolean;
+};
+export {};

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 */
@@ -34,3 +36,4 @@ export * from "./components/Command";
 export * from "./components/Dialog";
 export * from "./components/HoverCard";
 export * from "./components/Popover";
+export * from "./components/Slot";

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.23",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -142,5 +142,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "413c452e832fd947234ffac4d61aaa3dd20c7a0f"
+  "gitHead": "ba76159ca3d5d96cbdcbc04b7dbd545f071027b6"
 }

package/src/components/Slot/Slot.tsx

@@ -0,0 +1 @@
+export { Slot } from "@radix-ui/react-slot";

package/src/components/Slot/index.ts

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

package/src/components/Sonner/Toaster.tsx

@@ -3,30 +3,36 @@
 import { Toaster as Sonner } from "sonner";
 import { type ToasterProps } from "./types";
 import { cn } from "../../utilities";
-import { getToastClasses } from "./constants";
+import { getToastButtonClasses, getToastClasses } from "./constants";
 
 export const Toaster = ({
   theme,
   variant,
+  actionButton,
+  cancelButton,
+  closeButton,
+  showCloseButton,
   outline,
-  className,
   ...props
 }: ToasterProps) => {
   return (
     <Sonner
       theme={theme}
-      className={cn("toaster group", className)}
+      closeButton={showCloseButton}
       toastOptions={{
         classNames: {
-          toast: cn(
-            "group sonn group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-            getToastClasses({ variant, outline })
+          toast: cn(getToastClasses({ variant, outline })),
+          actionButton: cn(getToastButtonClasses(actionButton)),
+          cancelButton: cn(
+            getToastButtonClasses({
+              outline: true,
+              variant: "base",
+              ...cancelButton,
+            })
+          ),
+          closeButton: cn(
+            getToastButtonClasses({ variant: "neutral", ...closeButton })
           ),
-          description: "group-[.sonn]:text-muted-foreground",
-          actionButton:
-            "group-[.sonn]:bg-primary group-[.sonn]:text-primary-foreground",
-          cancelButton:
-            "group-[.sonn]:bg-muted group-[.sonn]:text-muted-foreground",
         },
       }}
       {...props}

package/src/components/Sonner/constants.ts

@@ -1,39 +1,107 @@
 import { cva } from "../../libs";
 
-export const getToastClasses = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-inherit",
-  {
-    variants: {
-      variant: {
-        accent: "bg-accent text-accent-content border-accent",
-        default: "bg-default text-default-content border-default",
-        error: "bg-error text-error-content border-error",
-        ghost: "bg-ghost text-ghost-content border-transparent",
-        info: "bg-info text-info-content border-info",
-        neutral: "bg-neutral text-neutral-content border-neutral",
-        primary: "bg-primary text-primary-content border-primary",
-        secondary: "bg-secondary text-secondary-content border-secondary",
-        success: "bg-success text-success-content border-success",
-        warning: "bg-warning text-warning-content border-warning",
-      },
-      outline: {
-        true: "border bg-default",
-      },
-    },
-    compoundVariants: [
-      { outline: true, variant: "accent", className: "text-accent" },
-      { outline: true, variant: "default", className: "text-default" },
-      { outline: true, variant: "error", className: "text-error" },
-      { outline: true, variant: "ghost", className: "text-ghost" },
-      { outline: true, variant: "info", className: "text-info" },
-      { outline: true, variant: "neutral", className: "text-neutral" },
-      { outline: true, variant: "primary", className: "text-primary" },
-      { outline: true, variant: "secondary", className: "text-secondary" },
-      { outline: true, variant: "success", className: "text-success" },
-      { outline: true, variant: "warning", className: "text-warning" },
-    ],
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
+export const getToastClasses = cva("sonner group", {
+  variants: {
+    variant: {
+      accent: "bg-accent text-accent-content border-accent",
+      default: "bg-default text-default-content border-default",
+      error: "bg-error text-error-content border-error",
+      ghost: "bg-ghost text-ghost-content border-transparent",
+      info: "bg-info text-info-content border-info",
+      neutral: "bg-neutral text-neutral-content border-neutral",
+      primary: "bg-primary text-primary-content border-primary",
+      secondary: "bg-secondary text-secondary-content border-secondary",
+      success: "bg-success text-success-content border-success",
+      warning: "bg-warning text-warning-content border-warning",
+    },
+    outline: {
+      true: "border bg-default",
+    },
+  },
+  compoundVariants: [
+    { outline: true, variant: "accent", className: "text-accent" },
+    { outline: true, variant: "default", className: "text-default" },
+    { outline: true, variant: "error", className: "text-error" },
+    { outline: true, variant: "ghost", className: "text-ghost" },
+    { outline: true, variant: "info", className: "text-info" },
+    { outline: true, variant: "neutral", className: "text-neutral" },
+    { outline: true, variant: "primary", className: "text-primary" },
+    { outline: true, variant: "secondary", className: "text-secondary" },
+    { outline: true, variant: "success", className: "text-success" },
+    { outline: true, variant: "warning", className: "text-warning" },
+  ],
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export const getToastButtonClasses = cva("", {
+  variants: {
+    variant: {
+      base: "group-[.sonner]:!bg-base-300 group-[.sonner]:!text-base-content",
+      accent: "group-[.sonner]:!bg-accent group-[.sonner]:!text-accent-content",
+      error: "group-[.sonner]:!bg-error group-[.sonner]:!text-error-content",
+      info: "group-[.sonner]:!bg-info group-[.sonner]:!text-info-content",
+      neutral:
+        "group-[.sonner]:!bg-neutral group-[.sonner]:!text-neutral-content",
+      primary:
+        "group-[.sonner]:!bg-primary group-[.sonner]:!text-primary-content",
+      secondary:
+        "group-[.sonner]:!bg-secondary group-[.sonner]:!text-secondary-content",
+      success:
+        "group-[.sonner]:!bg-success group-[.sonner]:!text-success-content",
+      warning:
+        "group-[.sonner]:!bg-warning group-[.sonner]:!text-warning-content",
+    },
+    outline: {
+      true: "group-[.sonner]:!border group-[.sonner]:!border-solid group-[.sonner]:!bg-transparent",
+    },
+  },
+  compoundVariants: [
+    {
+      outline: true,
+      variant: "accent",
+      className: "group-[.sonner]:!border-accent group-[.sonner]:!text-accent",
+    },
+    {
+      outline: true,
+      variant: "error",
+      className: "group-[.sonner]:!border-error group-[.sonner]:!text-error",
+    },
+    {
+      outline: true,
+      variant: "info",
+      className: "group-[.sonner]:!text-info",
+    },
+    {
+      outline: true,
+      variant: "neutral",
+      className:
+        "group-[.sonner]:!border-neutral group-[.sonner]:!text-neutral",
+    },
+    {
+      outline: true,
+      variant: "primary",
+      className:
+        "group-[.sonner]:!border-primary group-[.sonner]:!text-primary",
+    },
+    {
+      outline: true,
+      variant: "secondary",
+      className:
+        "group-[.sonner]:!border-secondary group-[.sonner]:!text-secondary",
+    },
+    {
+      outline: true,
+      variant: "success",
+      className:
+        "group-[.sonner]:!border-success group-[.sonner]:!text-success",
+    },
+    {
+      outline: true,
+      variant: "warning",
+      className:
+        "group-[.sonner]:!border-warning group-[.sonner]:!text-warning",
+    },
+  ],
+});

package/src/components/Sonner/types.ts

@@ -1,6 +1,17 @@
 import { Toaster } from "sonner";
 import { type VariantProps } from "../../libs";
-import { getToastClasses } from "./constants";
+import { getToastButtonClasses, getToastClasses } from "./constants";
 
-export type ToasterProps = React.ComponentProps<typeof Toaster> &
-  VariantProps<typeof getToastClasses>;
+type ToastButtonVariantProps = VariantProps<typeof getToastButtonClasses>;
+
+export type ToasterProps = Omit<
+  React.ComponentProps<typeof Toaster>,
+  "closeButton"
+> &
+  VariantProps<typeof getToastClasses> &
+  Partial<
+    Record<
+      "actionButton" | "cancelButton" | "closeButton",
+      ToastButtonVariantProps
+    >
+  > & { showCloseButton?: boolean };

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,3 @@
+import { cva } from "../../libs";
+
+export const getThemeSwitchClasses = cva("swap swap-rotate");

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";
 
@@ -38,3 +40,4 @@ export * from "./components/Command";
 export * from "./components/Dialog";
 export * from "./components/HoverCard";
 export * from "./components/Popover";
+export * from "./components/Slot";

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