Fix: Update Primitive Component Types (#143)

* chore: update primitive component types

* ci(changesets): add changesets for type changes and tooltip prop change

* chore: remove unnecessary triggerProps from tooltip component

* fix(examples): remove triggerProps from example demos

* ci(changesets): add changesets for component patches

* fix: remove unnecessary changeset

.changeset/good-laws-confess.md

@@ -0,0 +1,5 @@
+---
+"@animareflection/ui": minor
+---
+
+Update all primitive component types using pattern `ComponentProps<typeof PRIMITIVE>`

.changeset/tender-taxis-live.md

@@ -0,0 +1,5 @@
+---
+"@animareflection/ui": minor
+---
+
+Remove unnecessary `triggerProps` from `Tooltip` props

.changeset/twelve-walls-think.md

@@ -0,0 +1,5 @@
+---
+"@animareflection/ui": minor
+---
+
+Change `content` prop to `tooltipContent` to avoid prop collision

examples/next/src/components/TooltipDemo.tsx

@@ -9,15 +9,18 @@ const TooltipDemo = () => {
         positioning={{
           placement: "top",
         }}
-        trigger={<Text>Open Tooltip</Text>}
-        content="Tooltip Title"
-        triggerProps={{
-          bgColor: "brand.primary.500",
-          p: 3,
-          borderRadius: "md",
-          color: "accent.fg",
-          fontWeight: "bold",
-        }}
+        trigger={
+          <Text
+            bgColor="brand.primary.500"
+            p={3}
+            borderRadius="md"
+            color="accent.fg"
+            fontWeight="bold"
+          >
+            Open Tooltip
+          </Text>
+        }
+        tooltipContent="Tooltip Title"
       />
     </Wrapper>
   );

examples/vite-react/src/components/TooltipDemo.tsx

@@ -9,15 +9,18 @@ const TooltipDemo = () => {
         positioning={{
           placement: "top",
         }}
-        trigger={<Text>Open Tooltip</Text>}
-        content="Tooltip Title"
-        triggerProps={{
-          bgColor: "brand.primary.500",
-          p: 3,
-          borderRadius: "md",
-          color: "accent.fg",
-          fontWeight: "bold",
-        }}
+        trigger={
+          <Text
+            bgColor="brand.primary.500"
+            p={3}
+            borderRadius="md"
+            color="accent.fg"
+            fontWeight="bold"
+          >
+            Open Tooltip
+          </Text>
+        }
+        tooltipContent="Tooltip Title"
       />
     </Wrapper>
   );

src/components/core/Tooltip/Tooltip.stories.tsx

@@ -37,15 +37,15 @@ const TooltipTemplate = ({ placement }: { placement: Placement }) => (
         {placement}
       </Text>
     }
-    content="Tooltip Title"
+    tooltipContent="Tooltip Title"
   />
 );
 
 export const Default: Story = {
   render: () => (
     <Tooltip
       trigger={<Text fontWeight="bold">Tooltip</Text>}
-      content="Tooltip Title"
+      tooltipContent="Tooltip Title"
     />
   ),
 };
@@ -75,7 +75,7 @@ export const Variants: Story = {
   render: () => (
     <Tooltip
       trigger={<Text fontWeight="bold">Rounded</Text>}
-      content="Tooltip Title"
+      tooltipContent="Tooltip Title"
       variant="rounded"
     />
   ),

src/components/core/Tooltip/Tooltip.tsx

@@ -11,19 +11,15 @@ import {
 import { tooltip } from "generated/panda/recipes";
 import { useIsMounted } from "lib/hooks";
 
-import type {
-  PrimitiveTooltipProps,
-  PrimitiveTooltipTriggerProps,
-} from "components/primitives";
+import type { PrimitiveTooltipProps } from "components/primitives";
 import type { TooltipVariantProps } from "generated/panda/recipes";
 import type { JsxStyleProps } from "generated/panda/types";
 import type { ReactNode } from "react";
 
 export interface Props extends PrimitiveTooltipProps, TooltipVariantProps {
   trigger?: ReactNode;
-  content: ReactNode;
+  tooltipContent: ReactNode;
   bgColor?: JsxStyleProps["bgColor"];
-  triggerProps?: PrimitiveTooltipTriggerProps;
   arrow?: boolean;
 }
 
@@ -32,12 +28,11 @@ export interface Props extends PrimitiveTooltipProps, TooltipVariantProps {
  */
 const Tooltip = ({
   trigger,
-  content,
+  tooltipContent,
   openDelay = 0,
   closeDelay = 0,
   bgColor = "bg.default",
   variant,
-  triggerProps,
   arrow = true,
   ...rest
 }: Props) => {
@@ -52,11 +47,7 @@ const Tooltip = ({
       {({ isOpen }) => (
         <>
           {trigger && (
-            <PrimitiveTooltipTrigger
-              asChild
-              className={classNames.trigger}
-              {...triggerProps}
-            >
+            <PrimitiveTooltipTrigger asChild className={classNames.trigger}>
               {trigger}
             </PrimitiveTooltipTrigger>
           )}
@@ -79,7 +70,7 @@ const Tooltip = ({
                     bgColor={bgColor}
                     className={classNames.content}
                   >
-                    {content}
+                    {tooltipContent}
                   </PrimitiveTooltipContent>
                 </>
               )}

src/components/primitives/Accordion/Accordion.tsx

@@ -7,28 +7,29 @@ import {
 
 import { panda } from "generated/panda/jsx";
 
-import type {
-  AccordionProps,
-  AccordionItemProps,
-  AccordionTriggerProps,
-  AccordionContentProps,
-} from "@ark-ui/react";
 import type { PandaComponent } from "generated/panda/types/jsx";
+import type { ComponentProps } from "react";
 
 /**
  * Core UI accordion primitives.
  */
-export type PrimitiveAccordionProps = AccordionProps;
+export type PrimitiveAccordionProps = ComponentProps<typeof PrimitiveAccordion>;
 const PrimitiveAccordion: PandaComponent<typeof Accordion> = panda(Accordion);
 
-export type PrimitiveAccordionItemProps = AccordionItemProps;
+export type PrimitiveAccordionItemProps = ComponentProps<
+  typeof PrimitiveAccordionItem
+>;
 export const PrimitiveAccordionItem: PandaComponent<typeof AccordionItem> =
   panda(AccordionItem);
 
-export type PrimitiveAccordionTriggerProps = AccordionTriggerProps;
+export type PrimitiveAccordionTriggerProps = ComponentProps<
+  typeof PrimitiveAccordionTrigger
+>;
 export const PrimitiveAccordionTrigger = panda(AccordionTrigger);
 
-export type PrimitiveAccordionContentProps = AccordionContentProps;
+export type PrimitiveAccordionContentProps = ComponentProps<
+  typeof PrimitiveAccordionContent
+>;
 export const PrimitiveAccordionContent = panda(AccordionContent);
 
 export default PrimitiveAccordion;

src/components/primitives/Avatar/Avatar.tsx

@@ -2,23 +2,23 @@ import { Avatar, AvatarFallback, AvatarImage } from "@ark-ui/react";
 
 import { panda } from "generated/panda/jsx";
 
-import type {
-  AvatarProps,
-  AvatarFallbackProps,
-  AvatarImageProps,
-} from "@ark-ui/react";
 import type { PandaComponent } from "generated/panda/types/jsx";
+import type { ComponentProps } from "react";
 
 /**
  * Core UI avatar primitives.
  */
-export type PrimitiveAvatarProps = AvatarProps;
+export type PrimitiveAvatarProps = ComponentProps<typeof PrimitiveAvatar>;
 const PrimitiveAvatar: PandaComponent<typeof Avatar> = panda(Avatar);
 
-export type PrimitiveAvatarFallbackProps = AvatarFallbackProps;
+export type PrimitiveAvatarFallbackProps = ComponentProps<
+  typeof PrimitiveAvatarFallback
+>;
 export const PrimitiveAvatarFallback = panda(AvatarFallback);
 
-export type PrimitiveAvatarImageProps = AvatarImageProps;
+export type PrimitiveAvatarImageProps = ComponentProps<
+  typeof PrimitiveAvatarImage
+>;
 export const PrimitiveAvatarImage = panda(AvatarImage);
 
 export default PrimitiveAvatar;

src/components/primitives/Carousel/Carousel.tsx

@@ -12,56 +12,60 @@ import {
 
 import { panda } from "generated/panda/jsx";
 
-import type {
-  CarouselProps,
-  CarouselControlProps,
-  CarouselNextSlideTriggerProps,
-  CarouselPrevSlideTriggerProps,
-  CarouselSlideProps,
-  CarouselSlideGroupProps,
-  CarouselViewportProps,
-  CarouselIndicatorProps,
-  CarouselIndicatorGroupProps,
-} from "@ark-ui/react";
 import type { PandaComponent } from "generated/panda/jsx";
+import type { ComponentProps } from "react";
 
 /**
  * Core UI carousel primitives.
  */
-export type PrimitiveCarouselProps = CarouselProps;
+export type PrimitiveCarouselProps = ComponentProps<typeof PrimitiveCarousel>;
 const PrimitiveCarousel: PandaComponent<typeof Carousel> = panda(Carousel);
 
-export type PrimitiveCarouselControlProps = CarouselControlProps;
+export type PrimitiveCarouselControlProps = ComponentProps<
+  typeof PrimitiveCarouselControl
+>;
 export const PrimitiveCarouselControl = panda(CarouselControl);
 
-export type PrimitiveCarouselNextSlideTriggerProps =
-  CarouselNextSlideTriggerProps;
+export type PrimitiveCarouselNextSlideTriggerProps = ComponentProps<
+  typeof PrimitiveCarouselNextSlideTrigger
+>;
 export const PrimitiveCarouselNextSlideTrigger = panda(
   CarouselNextSlideTrigger,
 );
 
-export type PrimitiveCarouselPrevSlideTriggerProps =
-  CarouselPrevSlideTriggerProps;
+export type PrimitiveCarouselPrevSlideTriggerProps = ComponentProps<
+  typeof PrimitiveCarouselPrevSlideTrigger
+>;
 export const PrimitiveCarouselPrevSlideTrigger = panda(
   CarouselPrevSlideTrigger,
 );
 
-export type PrimitiveCarouselSlideProps = CarouselSlideProps;
+export type PrimitiveCarouselSlideProps = ComponentProps<
+  typeof PrimitiveCarouselSlide
+>;
 export const PrimitiveCarouselSlide: PandaComponent<typeof CarouselSlide> =
   panda(CarouselSlide);
 
-export type PrimitiveCarouselSlideGroupProps = CarouselSlideGroupProps;
+export type PrimitiveCarouselSlideGroupProps = ComponentProps<
+  typeof PrimitiveCarouselSlideGroup
+>;
 export const PrimitiveCarouselSlideGroup = panda(CarouselSlideGroup);
 
-export type PrimitiveCarouselViewportProps = CarouselViewportProps;
+export type PrimitiveCarouselViewportProps = ComponentProps<
+  typeof PrimitiveCarouselViewport
+>;
 export const PrimitiveCarouselViewport = panda(CarouselViewport);
 
-export type PrimitiveCarouselIndicatorProps = CarouselIndicatorProps;
+export type PrimitiveCarouselIndicatorProps = ComponentProps<
+  typeof PrimitiveCarouselIndicator
+>;
 export const PrimitiveCarouselIndicator: PandaComponent<
   typeof CarouselIndicator
 > = panda(CarouselIndicator);
 
-export type PrimitiveCarouselIndicatorGroupProps = CarouselIndicatorGroupProps;
+export type PrimitiveCarouselIndicatorGroupProps = ComponentProps<
+  typeof PrimitiveCarouselIndicatorGroup
+>;
 export const PrimitiveCarouselIndicatorGroup = panda(CarouselIndicatorGroup);
 
 export default PrimitiveCarousel;

src/components/primitives/Checkbox/Checkbox.tsx

@@ -2,22 +2,22 @@ import { Checkbox, CheckboxControl, CheckboxLabel } from "@ark-ui/react";
 
 import { panda } from "generated/panda/jsx";
 
-import type {
-  CheckboxProps,
-  CheckboxControlProps,
-  CheckboxLabelProps,
-} from "@ark-ui/react";
+import type { ComponentProps } from "react";
 
 /**
  * Core UI checkbox primitives.
  */
-export type PrimitiveCheckboxProps = CheckboxProps;
+export type PrimitiveCheckboxProps = ComponentProps<typeof PrimitiveCheckbox>;
 const PrimitiveCheckbox = panda(Checkbox);
 
-export type PrimitiveCheckboxControlProps = CheckboxControlProps;
+export type PrimitiveCheckboxControlProps = ComponentProps<
+  typeof PrimitiveCheckboxControl
+>;
 export const PrimitiveCheckboxControl = panda(CheckboxControl);
 
-export type PrimitiveCheckboxLabelProps = CheckboxLabelProps;
+export type PrimitiveCheckboxLabelProps = ComponentProps<
+  typeof PrimitiveCheckboxLabel
+>;
 export const PrimitiveCheckboxLabel = panda(CheckboxLabel);
 
 export default PrimitiveCheckbox;