@mbao01/common 0.0.23 → 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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.23",
+  "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": "ba76159ca3d5d96cbdcbc04b7dbd545f071027b6"
+  "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

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