@mbao01/common 0.0.22 → 0.0.24

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

@@ -6,6 +6,6 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     isLoading?: boolean | undefined;
 } & {
-    as?: "a" | "span" | "p" | undefined;
+    asChild?: boolean | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { Button };

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

@@ -2,5 +2,5 @@ import { type VariantProps } from "../../libs";
 import { type ButtonHTMLAttributes } from "react";
 import { getButtonClasses } from "./constants";
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof getButtonClasses> & {
-    as?: keyof Pick<JSX.IntrinsicElements, "a" | "span" | "p">;
+    asChild?: boolean;
 };

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

@@ -12,7 +12,7 @@ declare const Carousel: {
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         isLoading?: boolean | undefined;
     } & {
-        as?: "a" | "span" | "p" | undefined;
+        asChild?: boolean | undefined;
     } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     Previous: import("react").ForwardRefExoticComponent<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
         variant?: "accent" | "default" | "error" | "ghost" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | undefined;
@@ -21,7 +21,7 @@ declare const Carousel: {
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         isLoading?: boolean | undefined;
     } & {
-        as?: "a" | "span" | "p" | undefined;
+        asChild?: boolean | undefined;
     } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 };
 export { Carousel };

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

@@ -8,7 +8,7 @@ declare const Command: {
         ref?: React.Ref<HTMLInputElement> | undefined;
     } & {
         asChild?: boolean | undefined;
-    }, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+    }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
         value?: string | undefined;
         onValueChange?: ((search: string) => void) | undefined;
     } & React.RefAttributes<HTMLInputElement>, "ref"> & {} & React.RefAttributes<HTMLInputElement>>;
@@ -18,7 +18,7 @@ declare const Command: {
         ref?: React.Ref<HTMLDivElement> | undefined;
     } & {
         asChild?: boolean | undefined;
-    }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
         label?: string | undefined;
     } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Empty: React.ForwardRefExoticComponent<Omit<{
@@ -27,14 +27,14 @@ declare const Command: {
         ref?: React.Ref<HTMLDivElement> | undefined;
     } & {
         asChild?: boolean | undefined;
-    }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Group: React.ForwardRefExoticComponent<Omit<{
         children?: React.ReactNode;
     } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
         ref?: React.Ref<HTMLDivElement> | undefined;
     } & {
         asChild?: boolean | undefined;
-    }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
         heading?: React.ReactNode;
         value?: string | undefined;
         forceMount?: boolean | undefined;
@@ -45,7 +45,7 @@ declare const Command: {
         ref?: React.Ref<HTMLDivElement> | undefined;
     } & {
         asChild?: boolean | undefined;
-    }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
         disabled?: boolean | undefined;
         onSelect?: ((value: string) => void) | undefined;
         value?: string | undefined;
@@ -60,7 +60,7 @@ declare const Command: {
         ref?: React.Ref<HTMLDivElement> | undefined;
     } & {
         asChild?: boolean | undefined;
-    }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
         alwaysRender?: boolean | undefined;
     } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };

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

@@ -0,0 +1 @@
+export { Slot, Slottable } 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.24",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -142,5 +142,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "a37cc681238d753608c43c5b47a829826f059c74"
+  "gitHead": "b95f089ac1b19964127f550809c9943b2766749f"
 }

package/src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot, Slottable } from "@radix-ui/react-slot";
 import { type ButtonProps } from "./types";
 import { getButtonClasses } from "./constants";
 import { Loading } from "../Loading";
@@ -8,7 +8,7 @@ import { cn } from "../../utilities";
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
-      as,
+      asChild,
       className,
       outline,
       children,
@@ -20,8 +20,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref
   ) => {
-    const Comp = as ? Slot : "button";
-    const SlotChild = as ? as : React.Fragment;
+    const Comp = asChild ? Slot : "button";
 
     return (
       <Comp
@@ -32,18 +31,15 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         )}
         {...props}
       >
-        {/* slot merges it's prop into it's immediate child */}
-        <SlotChild>
-          {children}
-          {isLoading ? (
-            <span
-              className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[inherit]"
-              data-testid="loading"
-            >
-              <Loading />
-            </span>
-          ) : null}
-        </SlotChild>
+        <Slottable>{children}</Slottable>
+        {isLoading ? (
+          <span
+            className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[inherit]"
+            data-testid="loading"
+          >
+            <Loading />
+          </span>
+        ) : null}
       </Comp>
     );
   }

package/src/components/Button/types.ts

@@ -4,5 +4,5 @@ import { getButtonClasses } from "./constants";
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof getButtonClasses> & {
-    as?: keyof Pick<JSX.IntrinsicElements, "a" | "span" | "p">;
+    asChild?: boolean;
   };

package/src/components/Slot/Slot.tsx

@@ -0,0 +1 @@
+export { Slot, Slottable } 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";