@grandbazar/ui-baza 1.1.5 → 1.2.0

package/dist/index.cjs

@@ -20,6 +20,27 @@ function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 
+function composeEventHandlers(childHandler, parentHandler) {
+  return (event) => {
+    childHandler?.(event);
+    if (!event.defaultPrevented) {
+      parentHandler?.(event);
+    }
+  };
+}
+
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref != null) {
+        ref.current = node;
+      }
+    }
+  };
+}
+
 function createRange(start, length) {
   return Array.from({ length }, (_, index) => start + index);
 }
@@ -604,26 +625,44 @@ const styles$r = {
 	defaultSeparator: defaultSeparator
 };
 
+function isEventHandler(key) {
+  return /^on[A-Z]/.test(key);
+}
+
 function Slot({
   children,
+  ref,
   ...props
 }) {
   if (React.isValidElement(children)) {
     const childProps = children.props;
-    const parentProps = props;
-    const mergedProps = {
-      ...childProps,
-      ...parentProps,
-      style: {
-        ...childProps.style,
-        ...parentProps.style
-      },
-      className: classNames(childProps.className, parentProps.className)
-    };
+    const mergedProps = { ...childProps };
+    for (const key of Object.keys(props)) {
+      const parentValue = props[key];
+      const childValue = childProps[key];
+      if (key === "style") {
+        mergedProps.style = {
+          ...childValue,
+          ...parentValue
+        };
+      } else if (key === "className") {
+        mergedProps.className = classNames(childValue, parentValue);
+      } else if (isEventHandler(key) && typeof childValue === "function") {
+        mergedProps[key] = composeEventHandlers(
+          childValue,
+          parentValue
+        );
+      } else {
+        mergedProps[key] = parentValue;
+      }
+    }
+    if (ref) {
+      mergedProps.ref = composeRefs(childProps.ref, ref);
+    }
     return React.cloneElement(children, mergedProps);
   }
   if (React.Children.count(children) > 1) {
-    React.Children.only(null);
+    throw new Error("Slot expects a single child element");
   }
   return null;
 }
@@ -726,11 +765,19 @@ function Button({
   color = "accent",
   size = "lg",
   mode = "primary",
-  as = "button",
+  asChild,
   ...props
 }) {
-  const commonClassNames = classNames(styles$p.button, styles$p[color], styles$p[size], styles$p[mode], className);
-  return as === "button" ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: commonClassNames, type: "button", ...props, children }) : /* @__PURE__ */ jsxRuntime.jsx("a", { className: commonClassNames, ...props, children });
+  const Component = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      className: classNames(styles$p.button, styles$p[color], styles$p[size], styles$p[mode], className),
+      ...!asChild && { type: "button" },
+      ...props,
+      children
+    }
+  );
 }
 Button.Function = ButtonFunction;
 

package/dist/index.d.ts

@@ -70,18 +70,16 @@ export declare namespace Breadcrumbs {
 }
 
 /**
- * Button renders a clickable button or anchor element with various styles.
- * Supports polymorphic rendering as either a button or anchor based on the 'as' prop.
+ * Button renders a clickable button element with various styles.
+ * Supports the asChild pattern for polymorphic rendering via Slot.
  *
  * @param color - Color variant of the button (accent, neutral)
  * @param size - Size of the button (lg, md, sm)
  * @param mode - Visual mode of the button (primary, secondary, tertiary, line)
- * @param as - Element type to render (button, a)
+ * @param asChild - When true, merges props onto the child element instead of rendering a button
  * @param children - Content to display inside the button
  */
-export declare function Button(props: TButtonAsButtonProps): React.JSX.Element;
-
-export declare function Button(props: TButtonAsAnchorProps): React.JSX.Element;
+export declare function Button({ children, className, color, size, mode, asChild, ...props }: TButtonProps): JSX.Element;
 
 export declare namespace Button {
     var Function: typeof ButtonFunction;
@@ -507,20 +505,11 @@ declare type TBreadcrumbsProps = {
     separator?: default_2.ReactNode;
 };
 
-export declare type TButtonAsAnchorProps = TButtonCommonProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    as: 'a';
-    ref?: React.Ref<HTMLAnchorElement> | null;
-};
-
-export declare type TButtonAsButtonProps = TButtonCommonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    as?: 'button';
-    ref?: React.Ref<HTMLButtonElement> | null;
-};
-
 declare type TButtonCommonProps = {
     color?: TArrayElement<typeof BUTTON_COLORS>;
     size?: TArrayElement<typeof BUTTON_SIZES>;
     mode?: TArrayElement<typeof BUTTON_MODES>;
+    className?: string;
 };
 
 declare type TButtonFunctionProps = TAsChildProps<React.ButtonHTMLAttributes<HTMLButtonElement>> & {
@@ -530,7 +519,7 @@ declare type TButtonFunctionProps = TAsChildProps<React.ButtonHTMLAttributes<HTM
     disabled?: boolean;
 };
 
-export declare type TButtonProps = TButtonAsButtonProps | TButtonAsAnchorProps;
+export declare type TButtonProps = TAsChildProps<React.ButtonHTMLAttributes<HTMLButtonElement>> & TButtonCommonProps;
 
 export declare type TCalendarDay = {
     date: number;

package/dist/index.js

@@ -16,6 +16,27 @@ function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 
+function composeEventHandlers(childHandler, parentHandler) {
+  return (event) => {
+    childHandler?.(event);
+    if (!event.defaultPrevented) {
+      parentHandler?.(event);
+    }
+  };
+}
+
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref != null) {
+        ref.current = node;
+      }
+    }
+  };
+}
+
 function createRange(start, length) {
   return Array.from({ length }, (_, index) => start + index);
 }
@@ -600,26 +621,44 @@ const styles$r = {
 	defaultSeparator: defaultSeparator
 };
 
+function isEventHandler(key) {
+  return /^on[A-Z]/.test(key);
+}
+
 function Slot({
   children,
+  ref,
   ...props
 }) {
   if (isValidElement(children)) {
     const childProps = children.props;
-    const parentProps = props;
-    const mergedProps = {
-      ...childProps,
-      ...parentProps,
-      style: {
-        ...childProps.style,
-        ...parentProps.style
-      },
-      className: classNames(childProps.className, parentProps.className)
-    };
+    const mergedProps = { ...childProps };
+    for (const key of Object.keys(props)) {
+      const parentValue = props[key];
+      const childValue = childProps[key];
+      if (key === "style") {
+        mergedProps.style = {
+          ...childValue,
+          ...parentValue
+        };
+      } else if (key === "className") {
+        mergedProps.className = classNames(childValue, parentValue);
+      } else if (isEventHandler(key) && typeof childValue === "function") {
+        mergedProps[key] = composeEventHandlers(
+          childValue,
+          parentValue
+        );
+      } else {
+        mergedProps[key] = parentValue;
+      }
+    }
+    if (ref) {
+      mergedProps.ref = composeRefs(childProps.ref, ref);
+    }
     return cloneElement(children, mergedProps);
   }
   if (React.Children.count(children) > 1) {
-    React.Children.only(null);
+    throw new Error("Slot expects a single child element");
   }
   return null;
 }
@@ -722,11 +761,19 @@ function Button({
   color = "accent",
   size = "lg",
   mode = "primary",
-  as = "button",
+  asChild,
   ...props
 }) {
-  const commonClassNames = classNames(styles$p.button, styles$p[color], styles$p[size], styles$p[mode], className);
-  return as === "button" ? /* @__PURE__ */ jsx("button", { className: commonClassNames, type: "button", ...props, children }) : /* @__PURE__ */ jsx("a", { className: commonClassNames, ...props, children });
+  const Component = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: classNames(styles$p.button, styles$p[color], styles$p[size], styles$p[mode], className),
+      ...!asChild && { type: "button" },
+      ...props,
+      children
+    }
+  );
 }
 Button.Function = ButtonFunction;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grandbazar/ui-baza",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
   "repository": {
     "type": "git",