From f39da5f8910220fcfea6589701d98a3d5552e0ea Mon Sep 17 00:00:00 2001
From: Chris Sauve <chrismsauve@gmail.com>
Date: Sun, 5 Jan 2025 15:52:42 -0500
Subject: [PATCH] Remove unnecessary props in React wrapper components

---
 .changeset/young-waves-rest.md                               | 5 +++++
 packages/clips-react/source/components/BlockGrid.tsx         | 2 +-
 packages/clips-react/source/components/BlockStack.tsx        | 2 +-
 packages/clips-react/source/components/Button.tsx            | 2 +-
 packages/clips-react/source/components/Disclosure.tsx        | 2 +-
 packages/clips-react/source/components/Footer.tsx            | 2 +-
 packages/clips-react/source/components/Grid.tsx              | 2 +-
 packages/clips-react/source/components/Header.tsx            | 2 +-
 packages/clips-react/source/components/Heading.tsx           | 2 +-
 packages/clips-react/source/components/Image.tsx             | 2 +-
 packages/clips-react/source/components/InlineGrid.tsx        | 2 +-
 packages/clips-react/source/components/InlineStack.tsx       | 4 ++--
 packages/clips-react/source/components/Modal.tsx             | 2 +-
 packages/clips-react/source/components/Popover.tsx           | 2 +-
 packages/clips-react/source/components/Section.tsx           | 2 +-
 packages/clips-react/source/components/SkeletonButton.tsx    | 2 +-
 packages/clips-react/source/components/SkeletonText.tsx      | 2 +-
 packages/clips-react/source/components/SkeletonTextBlock.tsx | 2 +-
 packages/clips-react/source/components/SkeletonView.tsx      | 2 +-
 packages/clips-react/source/components/Stack.tsx             | 2 +-
 packages/clips-react/source/components/Text.tsx              | 2 +-
 packages/clips-react/source/components/TextBlock.tsx         | 2 +-
 packages/clips-react/source/components/TextField.tsx         | 2 +-
 packages/clips-react/source/components/View.tsx              | 2 +-
 24 files changed, 29 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/young-waves-rest.md

diff --git a/.changeset/young-waves-rest.md b/.changeset/young-waves-rest.md
new file mode 100644
index 00000000..fbebada8
--- /dev/null
+++ b/.changeset/young-waves-rest.md
@@ -0,0 +1,5 @@
+---
+'@watching/clips-react': patch
+---
+
+Remove unnecessary props in React wrapper components
diff --git a/packages/clips-react/source/components/BlockGrid.tsx b/packages/clips-react/source/components/BlockGrid.tsx
index 116efa87..59c72d69 100644
--- a/packages/clips-react/source/components/BlockGrid.tsx
+++ b/packages/clips-react/source/components/BlockGrid.tsx
@@ -27,6 +27,6 @@ declare module 'react' {
 export const BlockGrid = forwardRef<BlockGridElement, BlockGridProps>(
   function BlockGrid(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-block-grid {...props} ref={wrapperRef} />;
+    return <ui-block-grid ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/BlockStack.tsx b/packages/clips-react/source/components/BlockStack.tsx
index 08c8a67e..a65e66d9 100644
--- a/packages/clips-react/source/components/BlockStack.tsx
+++ b/packages/clips-react/source/components/BlockStack.tsx
@@ -27,6 +27,6 @@ declare module 'react' {
 export const BlockStack = forwardRef<BlockStackElement, BlockStackProps>(
   function BlockStack(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-block-stack {...props} ref={wrapperRef} />;
+    return <ui-block-stack ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Button.tsx b/packages/clips-react/source/components/Button.tsx
index b486db26..ce8b99c2 100644
--- a/packages/clips-react/source/components/Button.tsx
+++ b/packages/clips-react/source/components/Button.tsx
@@ -43,7 +43,7 @@ export const Button = forwardRef<ButtonElement, ButtonProps>(function Button(
   const wrapperRef = useCustomElementProperties(allProps, ref);
 
   return (
-    <ui-button {...allProps} ref={wrapperRef}>
+    <ui-button ref={wrapperRef}>
       {children}
       {overlay && isValidElement(overlay)
         ? cloneElement<any>(overlay, {slot: 'overlay'})
diff --git a/packages/clips-react/source/components/Disclosure.tsx b/packages/clips-react/source/components/Disclosure.tsx
index 532c991d..19b72e7a 100644
--- a/packages/clips-react/source/components/Disclosure.tsx
+++ b/packages/clips-react/source/components/Disclosure.tsx
@@ -44,7 +44,7 @@ export const Disclosure = forwardRef<DisclosureElement, DisclosureProps>(
     const wrapperRef = useCustomElementProperties(allProps, ref);
 
     return (
-      <ui-disclosure {...props} ref={wrapperRef}>
+      <ui-disclosure ref={wrapperRef}>
         {children}
         {labelElement}
       </ui-disclosure>
diff --git a/packages/clips-react/source/components/Footer.tsx b/packages/clips-react/source/components/Footer.tsx
index 30dbd30a..d8265392 100644
--- a/packages/clips-react/source/components/Footer.tsx
+++ b/packages/clips-react/source/components/Footer.tsx
@@ -25,6 +25,6 @@ declare module 'react' {
 export const Footer = forwardRef<FooterElement, FooterProps>(
   function Footer(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-footer {...props} ref={wrapperRef} />;
+    return <ui-footer ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Grid.tsx b/packages/clips-react/source/components/Grid.tsx
index c0a22245..538fdd80 100644
--- a/packages/clips-react/source/components/Grid.tsx
+++ b/packages/clips-react/source/components/Grid.tsx
@@ -28,6 +28,6 @@ declare module 'react' {
 export const Grid = forwardRef<GridElement, GridProps>(
   function Grid(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-grid {...props} ref={wrapperRef} />;
+    return <ui-grid ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Header.tsx b/packages/clips-react/source/components/Header.tsx
index 11fdb6ee..afb9a3a8 100644
--- a/packages/clips-react/source/components/Header.tsx
+++ b/packages/clips-react/source/components/Header.tsx
@@ -22,6 +22,6 @@ declare module 'react' {
 export const Header = forwardRef<HeaderElement, HeaderProps>(
   function Header(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-header {...props} ref={wrapperRef} />;
+    return <ui-header ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Heading.tsx b/packages/clips-react/source/components/Heading.tsx
index 618181ca..65ae988e 100644
--- a/packages/clips-react/source/components/Heading.tsx
+++ b/packages/clips-react/source/components/Heading.tsx
@@ -27,6 +27,6 @@ declare module 'react' {
 export const Heading = forwardRef<HeadingElement, HeadingProps>(
   function Heading(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-heading {...props} ref={wrapperRef} />;
+    return <ui-heading ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Image.tsx b/packages/clips-react/source/components/Image.tsx
index 7412360d..ff0b42e7 100644
--- a/packages/clips-react/source/components/Image.tsx
+++ b/packages/clips-react/source/components/Image.tsx
@@ -24,6 +24,6 @@ declare module 'react' {
 export const Image = forwardRef<ImageElement, ImageProps>(
   function Image(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-image {...props} ref={wrapperRef} />;
+    return <ui-image ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/InlineGrid.tsx b/packages/clips-react/source/components/InlineGrid.tsx
index cb027937..08104e0b 100644
--- a/packages/clips-react/source/components/InlineGrid.tsx
+++ b/packages/clips-react/source/components/InlineGrid.tsx
@@ -27,6 +27,6 @@ declare module 'react' {
 export const InlineGrid = forwardRef<InlineGridElement, InlineGridProps>(
   function InlineGrid(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-inline-grid {...props} ref={wrapperRef} />;
+    return <ui-inline-grid ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/InlineStack.tsx b/packages/clips-react/source/components/InlineStack.tsx
index 481fe827..583cfab9 100644
--- a/packages/clips-react/source/components/InlineStack.tsx
+++ b/packages/clips-react/source/components/InlineStack.tsx
@@ -27,6 +27,6 @@ declare module 'react' {
 export const InlineStack = forwardRef<InlineStackElement, InlineStackProps>(
   function InlineStack(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-inline-stack {...props} ref={wrapperRef} />;
+    return <ui-inline-stack ref={wrapperRef} />;
   },
-);
+);
\ No newline at end of file
diff --git a/packages/clips-react/source/components/Modal.tsx b/packages/clips-react/source/components/Modal.tsx
index 24f8f00a..cb11947a 100644
--- a/packages/clips-react/source/components/Modal.tsx
+++ b/packages/clips-react/source/components/Modal.tsx
@@ -24,6 +24,6 @@ declare module 'react' {
 export const Modal = forwardRef<ModalElement, ModalProps>(
   function Modal(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-modal {...props} ref={wrapperRef} />;
+    return <ui-modal ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Popover.tsx b/packages/clips-react/source/components/Popover.tsx
index f1c6c7d5..35a42c1f 100644
--- a/packages/clips-react/source/components/Popover.tsx
+++ b/packages/clips-react/source/components/Popover.tsx
@@ -23,6 +23,6 @@ declare module 'react' {
 export const Popover = forwardRef<PopoverElement, PopoverProps>(
   function Popover(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-popover {...props} ref={wrapperRef} />;
+    return <ui-popover ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Section.tsx b/packages/clips-react/source/components/Section.tsx
index 52c17096..1742e7ab 100644
--- a/packages/clips-react/source/components/Section.tsx
+++ b/packages/clips-react/source/components/Section.tsx
@@ -22,6 +22,6 @@ declare module 'react' {
 export const Section = forwardRef<SectionElement, SectionProps>(
   function Section(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-section {...props} ref={wrapperRef} />;
+    return <ui-section ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/SkeletonButton.tsx b/packages/clips-react/source/components/SkeletonButton.tsx
index 748221ea..0ff5cc66 100644
--- a/packages/clips-react/source/components/SkeletonButton.tsx
+++ b/packages/clips-react/source/components/SkeletonButton.tsx
@@ -24,5 +24,5 @@ export const SkeletonButton = forwardRef<
   SkeletonButtonProps
 >(function SkeletonButton(props, ref) {
   const wrapperRef = useCustomElementProperties(props, ref);
-  return <ui-skeleton-button {...props} ref={wrapperRef} />;
+  return <ui-skeleton-button ref={wrapperRef} />;
 });
diff --git a/packages/clips-react/source/components/SkeletonText.tsx b/packages/clips-react/source/components/SkeletonText.tsx
index f228e563..9091563c 100644
--- a/packages/clips-react/source/components/SkeletonText.tsx
+++ b/packages/clips-react/source/components/SkeletonText.tsx
@@ -23,6 +23,6 @@ declare module 'react' {
 export const SkeletonText = forwardRef<SkeletonTextElement, SkeletonTextProps>(
   function SkeletonText(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-skeleton-text {...props} ref={wrapperRef} />;
+    return <ui-skeleton-text ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/SkeletonTextBlock.tsx b/packages/clips-react/source/components/SkeletonTextBlock.tsx
index c9149978..e7e0950d 100644
--- a/packages/clips-react/source/components/SkeletonTextBlock.tsx
+++ b/packages/clips-react/source/components/SkeletonTextBlock.tsx
@@ -24,5 +24,5 @@ export const SkeletonTextBlock = forwardRef<
   SkeletonTextBlockProps
 >(function SkeletonTextBlock(props, ref) {
   const wrapperRef = useCustomElementProperties(props, ref);
-  return <ui-skeleton-text-block {...props} ref={wrapperRef} />;
+  return <ui-skeleton-text-block ref={wrapperRef} />;
 });
diff --git a/packages/clips-react/source/components/SkeletonView.tsx b/packages/clips-react/source/components/SkeletonView.tsx
index f6932488..24c5e134 100644
--- a/packages/clips-react/source/components/SkeletonView.tsx
+++ b/packages/clips-react/source/components/SkeletonView.tsx
@@ -22,6 +22,6 @@ declare module 'react' {
 export const SkeletonView = forwardRef<SkeletonViewElement, SkeletonViewProps>(
   function SkeletonView(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-skeleton-view {...props} ref={wrapperRef} />;
+    return <ui-skeleton-view ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Stack.tsx b/packages/clips-react/source/components/Stack.tsx
index 623e1ef8..7b8ea308 100644
--- a/packages/clips-react/source/components/Stack.tsx
+++ b/packages/clips-react/source/components/Stack.tsx
@@ -28,6 +28,6 @@ declare module 'react' {
 export const Stack = forwardRef<StackElement, StackProps>(
   function Stack(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-stack {...props} ref={wrapperRef} />;
+    return <ui-stack ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Text.tsx b/packages/clips-react/source/components/Text.tsx
index b3a966e6..124550e8 100644
--- a/packages/clips-react/source/components/Text.tsx
+++ b/packages/clips-react/source/components/Text.tsx
@@ -24,6 +24,6 @@ declare module 'react' {
 export const Text = forwardRef<TextElement, TextProps>(
   function Text(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-text {...props} ref={wrapperRef} />;
+    return <ui-text ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/TextBlock.tsx b/packages/clips-react/source/components/TextBlock.tsx
index 970e60b0..5dedffa4 100644
--- a/packages/clips-react/source/components/TextBlock.tsx
+++ b/packages/clips-react/source/components/TextBlock.tsx
@@ -23,6 +23,6 @@ declare module 'react' {
 export const TextBlock = forwardRef<TextBlockElement, TextBlockProps>(
   function TextBlock(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-text-block {...props} ref={wrapperRef} />;
+    return <ui-text-block ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/TextField.tsx b/packages/clips-react/source/components/TextField.tsx
index 44a23e4b..768c6ffa 100644
--- a/packages/clips-react/source/components/TextField.tsx
+++ b/packages/clips-react/source/components/TextField.tsx
@@ -54,7 +54,7 @@ export const TextField = forwardRef<TextFieldElement, TextFieldProps>(
     const wrapperRef = useCustomElementProperties(allProps, ref);
 
     return (
-      <ui-text-field {...allProps} ref={wrapperRef}>
+      <ui-text-field ref={wrapperRef}>
         {labelChild}
       </ui-text-field>
     );
diff --git a/packages/clips-react/source/components/View.tsx b/packages/clips-react/source/components/View.tsx
index 0c691156..a6c8d58a 100644
--- a/packages/clips-react/source/components/View.tsx
+++ b/packages/clips-react/source/components/View.tsx
@@ -37,6 +37,6 @@ declare module 'react' {
 export const View = forwardRef<ViewElement, ViewProps>(
   function View(props, ref) {
     const wrapperRef = useCustomElementProperties(props, ref);
-    return <ui-view {...props} ref={wrapperRef} />;
+    return <ui-view ref={wrapperRef} />;
   },
 );