@mbao01/common 0.0.11 → 0.0.13

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

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

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

@@ -0,0 +1,4 @@
+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;

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

@@ -0,0 +1,2 @@
+export { toast } from "sonner";
+export { Toaster } from "./Toaster";

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

@@ -0,0 +1,5 @@
+/// <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>;

package/dist/types/index.d.ts

@@ -8,6 +8,7 @@ export * from "./components/Card";
 export * from "./components/Description";
 export * from "./components/Progress";
 export * from "./components/Separator";
+export * from "./components/Sonner";
 export * from "./components/Text";
 /** data input */
 export * from "./components/Form";

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

@@ -1,2 +1,3 @@
+export * from "./theme";
 export { cn } from "./cn";
 export { getSubpaths } from "./getSubpaths";

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

@@ -0,0 +1,4 @@
+type Theme = "dark" | "light" | "system";
+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.11",
+  "version": "0.0.13",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -79,6 +79,7 @@
     "date-fns": "^3.6.0",
     "react-day-picker": "^8.10.0",
     "react-international-phone": "^4.2.6",
+    "sonner": "^1.4.41",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7"
   },
@@ -127,5 +128,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "148ac0de002cadbfa9129b6056a72b7e132f0110"
+  "gitHead": "31c04f4f5c54ec1f18037c38274603bd55785355"
 }

package/src/components/Sonner/Toaster.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Toaster as Sonner } from "sonner";
+import { type ToasterProps } from "./types";
+import { cn } from "../../utilities";
+import { getToastClasses } from "./constants";
+
+export const Toaster = ({
+  theme,
+  variant,
+  outline,
+  className,
+  ...props
+}: ToasterProps) => {
+  return (
+    <Sonner
+      theme={theme}
+      className={cn("toaster group", className)}
+      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 })
+          ),
+          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

@@ -0,0 +1,39 @@
+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",
+    },
+  }
+);

package/src/components/Sonner/index.ts

@@ -0,0 +1,2 @@
+export { toast } from "sonner";
+export { Toaster } from "./Toaster";

package/src/components/Sonner/types.ts

@@ -0,0 +1,6 @@
+import { Toaster } from "sonner";
+import { type VariantProps } from "../../libs";
+import { getToastClasses } from "./constants";
+
+export type ToasterProps = React.ComponentProps<typeof Toaster> &
+  VariantProps<typeof getToastClasses>;

package/src/index.ts

@@ -9,6 +9,7 @@ export * from "./components/Card";
 export * from "./components/Description";
 export * from "./components/Progress";
 export * from "./components/Separator";
+export * from "./components/Sonner";
 export * from "./components/Text";
 
 /** data input */

package/src/utilities/index.ts

@@ -1,2 +1,3 @@
+export * from "./theme";
 export { cn } from "./cn";
 export { getSubpaths } from "./getSubpaths";

package/src/utilities/theme.ts

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