@mbao01/common 0.0.22 → 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/index.d.ts

@@ -36,3 +36,4 @@ export * from "./components/Command";
 export * from "./components/Dialog";
 export * from "./components/HoverCard";
 export * from "./components/Popover";
+export * from "./components/Slot";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.22",
+  "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": "a37cc681238d753608c43c5b47a829826f059c74"
+  "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/ThemeSwitch/constants.ts

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

package/src/index.ts

@@ -40,3 +40,4 @@ export * from "./components/Command";
 export * from "./components/Dialog";
 export * from "./components/HoverCard";
 export * from "./components/Popover";
+export * from "./components/Slot";