Replace button primitive wrapper

src/components/ui/Accordion/fragments/AccordionTrigger.tsx

@@ -6,7 +6,7 @@ import { AccordionItemContext } from '../contexts/AccordionItemContext';
 
 import CollapsiblePrimitive from '~/core/primitives/Collapsible';
 import RovingFocusGroup from '~/core/utils/RovingFocusGroup';
-import Primitive from '~/core/primitives/Primitive';
+import ButtonPrimitive from '~/core/primitives/Button';
 
 type AccordionTriggerProps = {
   children: React.ReactNode;
@@ -43,7 +43,7 @@ const AccordionTrigger: React.FC<AccordionTriggerProps> = ({ children, index, cl
     return (
         <RovingFocusGroup.Item>
             <CollapsiblePrimitive.Trigger disabled={disabled} asChild>
-                <Primitive.button
+                <ButtonPrimitive
                     className={clsx(`${rootClass}-trigger`, className)}
                     ref={triggerRef}
                     aria-disabled={disabled}
@@ -52,7 +52,7 @@ const AccordionTrigger: React.FC<AccordionTriggerProps> = ({ children, index, cl
                     aria-controls={`content-${index}`}
                 >
                     {children}
-                </Primitive.button>
+                </ButtonPrimitive>
             </CollapsiblePrimitive.Trigger>
         </RovingFocusGroup.Item>
     );

src/components/ui/Switch/fragments/SwitchRoot.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import Primitive from '~/core/primitives/Primitive';
+import ButtonPrimitive from '~/core/primitives/Button';
 import { customClassSwitcher } from '~/core';
 import { SwitchContext } from '../context/SwitchContext';
 import { useCreateDataAttribute, useComposeAttributes, useCreateDataAccentColorAttribute } from '~/core/hooks/createDataAttribute';
@@ -26,7 +26,7 @@ const SwitchRoot = ({ children, customRootClass, color = '', variant, size }: Sw
 
     return (
         <SwitchContext.Provider value={{ checked, setChecked, rootClass }}>
-            <Primitive.button onClick={() => setChecked(!checked)} className={rootClass} data-state={checked ? 'checked' : 'unchecked'} {...composedAttributes()}>{children}</Primitive.button>
+            <ButtonPrimitive onClick={() => setChecked(!checked)} className={rootClass} data-state={checked ? 'checked' : 'unchecked'} {...composedAttributes()}>{children}</ButtonPrimitive>
         </SwitchContext.Provider>
     );
 };

src/components/ui/Tooltip/fragments/TooltipTrigger.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, forwardRef } from 'react';
 
 import TooltipContext from '../context/TooltipContext';
-import Primitive from '~/core/primitives/Primitive';
+import ButtonPrimitive from '~/core/primitives/Button';
 import { useMergeRefs } from '@floating-ui/react';
 
 const TooltipTrigger = forwardRef(({ children, asChild, ...props }: { children: React.ReactNode, asChild?: boolean } & JSX.IntrinsicElements['button'], propRef: React.Ref<HTMLButtonElement>) => {
@@ -20,9 +20,9 @@ const TooltipTrigger = forwardRef(({ children, asChild, ...props }: { children:
     const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
 
     return (
-        <Primitive.button asChild={asChild} ref={ref} data-state={isOpen ? 'open' : 'closed'} {...getReferenceProps(props)} >
+        <ButtonPrimitive asChild={asChild} ref={ref} data-state={isOpen ? 'open' : 'closed'} {...getReferenceProps(props)} >
             {children}
-        </Primitive.button>
+        </ButtonPrimitive>
     );
 });
 

src/core/primitives/Button/index.tsx

@@ -17,7 +17,7 @@ import Primitive from '~/core/primitives/Primitive';
 
  */
 
-const ButtonPrimitive = forwardRef(({ role = 'button', label = '', description = '', disabled = false, children, ...props }:any, ref) => {
+const ButtonPrimitive = forwardRef(({ role = 'button', type = 'button', label = '', description = '', disabled = false, children, ...props }:any, ref) => {
     if (label) {
         // If we have a label, we should set the aria-label attribute
         // This is usually generated automatically by the screen reader
@@ -42,6 +42,7 @@ const ButtonPrimitive = forwardRef(({ role = 'button', label = '', description =
     return <Primitive.button
         ref={ref}
         role={role}
+        type={type}
         disabled={disabled}
         {...props}
         // We allow the user to pass any other props they want

src/core/primitives/Checkbox/fragments/CheckboxPrimitiveTrigger.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { HTMLAttributes } from 'react';
-import Primitive from '~/core/primitives/Primitive';
+import ButtonPrimitive from '~/core/primitives/Button';
 import CheckboxPrimitiveContext from '../context/CheckboxPrimitiveContext';
 
 export type CheckboxPrimitiveTriggerProps = {
@@ -11,7 +11,7 @@ export type CheckboxPrimitiveTriggerProps = {
 
 const CheckboxPrimitiveTrigger = ({ children, className = '', ...props }: CheckboxPrimitiveTriggerProps) => {
     const { isChecked, setIsChecked, id, required, disabled } = React.useContext(CheckboxPrimitiveContext);
-    return <Primitive.button onClick={() => setIsChecked(!isChecked)} role="checkbox" id={id} aria-checked={isChecked} aria-required={required} data-checked={isChecked} disabled={disabled} data-disabled={disabled} {...props} className={className}>{children}</Primitive.button>;
+    return <ButtonPrimitive onClick={() => setIsChecked(!isChecked)} role="checkbox" id={id} aria-checked={isChecked} aria-required={required} data-checked={isChecked} disabled={disabled} data-disabled={disabled} {...props} className={className}>{children}</ButtonPrimitive>;
 };
 
 export default CheckboxPrimitiveTrigger;

src/core/primitives/Collapsible/fragments/CollapsiblePrimitiveTrigger.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Primitive from '~/core/primitives/Primitive';
+import ButtonPrimitive from '~/core/primitives/Button';
 import { useCollapsiblePrimitiveContext } from '../contexts/CollapsiblePrimitiveContext';
 
 export type CollapsiblePrimitiveTriggerProps = {
@@ -33,7 +33,7 @@ const CollapsiblePrimitiveTrigger = React.forwardRef<HTMLButtonElement, Collapsi
         };
 
         return (
-            <Primitive.button
+            <ButtonPrimitive
                 aria-controls={contentId}
                 aria-expanded={open}
                 data-state={open ? 'open' : 'closed'}
@@ -44,7 +44,7 @@ const CollapsiblePrimitiveTrigger = React.forwardRef<HTMLButtonElement, Collapsi
                 {...props}
             >
                 {children}
-            </Primitive.button>
+            </ButtonPrimitive>
         );
     }
 );

src/core/primitives/Menu/fragments/MenuPrimitiveTrigger.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import Floater from '~/core/primitives/Floater';
 import MenuPrimitiveRootContext from '../contexts/MenuPrimitiveRootContext';
-import Primitive from '../../Primitive';
+import ButtonPrimitive from '../../Button';
 
 export type MenuPrimitiveTriggerProps = {
     children: React.ReactNode
@@ -16,7 +16,7 @@ const MenuPrimitiveTrigger = ({ children, className, asChild, ...props }: MenuPr
     const { ref, index } = Floater.useListItem();
 
     return (
-        <Primitive.button
+        <ButtonPrimitive
             className={className}
             tabIndex={
                 !isNested ? undefined : activeIndex === index ? 0 : -1
@@ -28,7 +28,7 @@ const MenuPrimitiveTrigger = ({ children, className, asChild, ...props }: MenuPr
             {...props}
         >
             {children}
-        </Primitive.button>
+        </ButtonPrimitive>
     );
 };
 export default MenuPrimitiveTrigger;