Fix extension of props #62 from prismaneui/fix-prop-extension

Fix extension of props

.storybook/storybook.config.js

@@ -4,7 +4,7 @@ import { defineConfig } from "vite";
 import dts from "vite-plugin-dts";
 
 export default defineConfig({
-  plugins: [dts({ insertTypesEntry: true }), react()],
+  plugins: [dts({ insertTypesEntry: true, skipDiagnostics: true }), react()],
   build: {
     lib: {
       entry: resolve(__dirname, "src/index.ts"),

src/components/Accordion/Accordion.tsx

@@ -4,7 +4,7 @@ import Flex, { FlexProps } from "../Flex/Flex";
 // Context
 import { AccordionContextProvider } from "./AccordionContext";
 // Types
-import { PrismaneWithInternal } from "../../types";
+import { PrismaneWithInternal, PrismaneProps } from "../../types";
 // Utils
 import { strip } from "../../utils";
 
@@ -29,9 +29,12 @@ export {
   type AccordionPanelProps,
 };
 
-export type AccordionProps = {
-  defaultValue?: string;
-} & FlexProps;
+export type AccordionProps = PrismaneProps<
+  {
+    defaultValue?: string;
+  },
+  FlexProps
+>;
 
 const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
   ({ defaultValue = null, children, className, ...props }, ref) => {

src/components/Accordion/AccordionControl/AccordionControl.tsx

@@ -5,10 +5,12 @@ import Transition, { TransitionProps } from "../../Transition/Transition";
 // Context
 import { useAccordionContext } from "../AccordionContext";
 import { useAccordionItemContext } from "../AccordionItem/AccordionItemContext";
+// Types
+import { PrismaneProps } from "../../../types";
 // Utils
 import { strip, fr } from "../../../utils";
 
-export type AccordionControlProps = FlexProps & TransitionProps;
+export type AccordionControlProps = PrismaneProps<FlexProps, TransitionProps>;
 
 const AccordionControl = forwardRef<HTMLDivElement, AccordionControlProps>(
   ({ children, className, ...props }, ref) => {

src/components/Accordion/AccordionItem/AccordionItem.tsx

@@ -3,12 +3,17 @@ import { forwardRef } from "react";
 import Flex, { FlexProps } from "../../Flex/Flex";
 // Context
 import { AccordionItemContextProvider } from "./AccordionItemContext";
+// Types
+import { PrismaneProps } from "../../../types";
 // Utils
 import { strip } from "../../../utils";
 
-export type AccordionItemProps = {
-  value?: string | null;
-} & FlexProps;
+export type AccordionItemProps = PrismaneProps<
+  {
+    value?: string | null;
+  },
+  FlexProps
+>;
 
 const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
   ({ value = null, children, className, ...props }, ref) => {

src/components/Alert/Alert.tsx

@@ -13,7 +13,11 @@ import CloseButton from "../CloseButton/CloseButton";
 import useAnimation from "../../hooks/useAnimation";
 import usePresence from "../../hooks/usePresence";
 // Types
-import { PrismaneActions, PrismaneWithInternal } from "../../types";
+import {
+  PrismaneActions,
+  PrismaneWithInternal,
+  PrismaneProps,
+} from "../../types";
 // Utils
 import { strip, variants, fr } from "../../utils";
 
@@ -25,13 +29,15 @@ import AlertDescription, {
 
 export { type AlertTitleProps, type AlertDescriptionProps };
 
-export type AlertProps = {
-  variant?: PrismaneActions;
-  icon?: ReactNode;
-  action?: ReactNode;
-  closable?: boolean;
-} & AnimationProps &
-  FlexProps;
+export type AlertProps = PrismaneProps<
+  {
+    variant?: PrismaneActions;
+    icon?: ReactNode;
+    action?: ReactNode;
+    closable?: boolean;
+  },
+  AnimationProps & FlexProps
+>;
 
 const Alert = forwardRef<HTMLDivElement, AlertProps>(
   (

src/components/Alert/AlertTitle/AlertTitle.tsx

@@ -4,7 +4,7 @@ import Text, { TextProps } from "../../Text/Text";
 // Utils
 import { strip } from "../../../utils";
 
-export type AlertTitleProps = TextProps<"span">;
+export type AlertTitleProps = TextProps;
 
 const AlertTitle = forwardRef<HTMLSpanElement, AlertTitleProps>(
   ({ children, className, ...props }, ref) => {

src/components/Animation/Animation.tsx

@@ -8,6 +8,7 @@ import {
   Versatile,
   PrismaneVersatile,
   PrismaneVersatileRef,
+  PrismaneProps,
 } from "../../types";
 // Utils
 import { strip } from "../../utils";
@@ -23,13 +24,13 @@ export interface Animations {
 
 export type AnimationProps<E extends Versatile = "div"> = PrismaneVersatile<
   E,
-  {
-    animation?: PrismaneAnimations | Animation;
-    transition?: PrismaneTransitions | string;
-    duration?: number;
-    animated?: boolean;
-    delay?: number;
-  } & TransitionProps<E>
+  PrismaneProps<
+    {
+      animation?: PrismaneAnimations | Animation;
+      animated?: boolean;
+    },
+    TransitionProps
+  >
 >;
 
 type AnimationComponent = <E extends Versatile = "div">(
@@ -40,9 +41,9 @@ const Animation: AnimationComponent = forwardRef(
   <E extends Versatile = "div">(
     {
       animation = "fade",
-      transition = "all",
-      duration = 150,
-      delay = 0,
+      transition,
+      duration,
+      delay,
       timing = "ease-in-out",
       animated = true,
       className,

src/components/AspectRatio/AspectRatio.tsx

@@ -2,14 +2,17 @@ import { forwardRef } from "react";
 // Components
 import Box, { BoxProps } from "../Box/Box";
 // Types
-import { PrismaneStyles } from "../../types";
+import { PrismaneStyles, PrismaneProps } from "../../types";
 // Utils
 import { strip } from "../../utils";
 
-export type AspectRatioProps = {
-  ratio?: string;
-  size?: PrismaneStyles;
-} & BoxProps;
+export type AspectRatioProps = PrismaneProps<
+  {
+    ratio?: string;
+    size?: PrismaneStyles;
+  },
+  BoxProps
+>;
 
 const AspectRatio = forwardRef<HTMLDivElement, AspectRatioProps>(
   ({ ratio, size, children, className, style, ...props }, ref) => {

src/components/AutocompleteField/AutocompleteField.tsx

@@ -3,12 +3,17 @@ import { forwardRef, useState, useEffect } from "react";
 import SelectField, { SelectFieldProps } from "../SelectField/SelectField";
 // Hooks
 import useDebounce from "../../hooks/useDebounce";
+// Types
+import { PrismaneProps } from "../../types";
 // Utils
 import { strip } from "../../utils";
 
-export type AutocompleteFieldProps = {
-  filter?: Function;
-} & SelectFieldProps;
+export type AutocompleteFieldProps = PrismaneProps<
+  {
+    filter?: Function;
+  },
+  SelectFieldProps
+>;
 
 /**
     AutocompleteField component displays a dropdown menu to select an option from a list.

src/components/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, ForwardedRef } from "react";
+import { forwardRef } from "react";
 import { UserCircle } from "@phosphor-icons/react";
 // Components
 import Center from "../Center/Center";
@@ -13,20 +13,24 @@ import {
   Versatile,
   PrismaneVersatile,
   PrismaneVersatileRef,
+  PrismaneProps,
 } from "../../types";
 // Utils
 import { strip, variants, fr } from "../../utils";
 
 export type AvatarProps<E extends Versatile = "div"> = PrismaneVersatile<
   E,
-  {
-    src?: string;
-    srcSet?: string;
-    alt?: string;
-    sizes?: string;
-    color?: PrismaneColors;
-    size?: PrismaneBreakpoints;
-  } & CircleProps<E>
+  PrismaneProps<
+    {
+      src?: string;
+      srcSet?: string;
+      alt?: string;
+      sizes?: string;
+      color?: PrismaneColors;
+      size?: PrismaneBreakpoints;
+    },
+    CircleProps
+  >
 >;
 
 type AvatarComponent = <E extends Versatile = "div">(

src/components/Badge/Badge.tsx

@@ -10,18 +10,22 @@ import {
   Versatile,
   PrismaneVersatile,
   PrismaneVersatileRef,
+  PrismaneProps,
 } from "../../types";
 // Utils
 import { strip, variants, fr } from "../../utils";
 
 export type BadgeProps<E extends Versatile = "div"> = PrismaneVersatile<
   E,
-  {
-    label?: ReactNode;
-    position?: PrismanePositions;
-    color?: PrismaneColors;
-    size?: PrismaneBreakpoints;
-  } & CenterProps<E>
+  PrismaneProps<
+    {
+      label?: ReactNode;
+      position?: PrismanePositions;
+      color?: PrismaneColors;
+      size?: PrismaneBreakpoints;
+    },
+    CenterProps
+  >
 >;
 
 type BadgeComponent = <E extends Versatile = "div">(

src/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.tsx

@@ -12,7 +12,7 @@ import {
 import { strip } from "../../../utils";
 
 export type BreadcrumbItemProps<E extends Versatile = typeof Link> =
-  PrismaneVersatile<E, FlexProps<E>>;
+  PrismaneVersatile<E, FlexProps>;
 
 const BreadcrumbItem = forwardRef(
   <E extends Versatile = typeof Link>(

src/components/Button/Button.tsx

@@ -11,25 +11,29 @@ import {
   Versatile,
   PrismaneVersatile,
   PrismaneVersatileRef,
+  PrismaneProps,
 } from "../../types";
 // Utils
 import { strip, variants, fr } from "../../utils";
 
 export type ButtonProps<E extends Versatile = "button"> = PrismaneVersatile<
   E,
-  {
-    icon?: ReactNode;
-    iconPosition?: "left" | "right";
-    type?: "submit" | "reset" | "button";
-    loading?: boolean;
-    disabled?: boolean;
-    variant?: "primary" | "secondary" | "tertiary" | "text";
-    color?: PrismaneColors;
-    size?: PrismaneBreakpoints;
-    full?: boolean;
-    shadow?: boolean;
-    fillOnHover?: boolean;
-  } & TransitionProps<E>
+  PrismaneProps<
+    {
+      icon?: ReactNode;
+      iconPosition?: "left" | "right";
+      type?: "submit" | "reset" | "button";
+      loading?: boolean;
+      disabled?: boolean;
+      variant?: "primary" | "secondary" | "tertiary" | "text";
+      color?: PrismaneColors;
+      size?: PrismaneBreakpoints;
+      full?: boolean;
+      shadow?: boolean;
+      fillOnHover?: boolean;
+    },
+    TransitionProps
+  >
 >;
 
 type ButtonComponent = <E extends Versatile = "button">(

src/components/Card/Card.tsx

@@ -19,7 +19,7 @@ export { type CardHeaderProps, type CardFooterProps };
 
 export type CardProps<E extends Versatile = "div"> = PrismaneVersatile<
   E,
-  PaperProps<E>
+  PaperProps
 >;
 
 /**

src/components/Center/Center.tsx

@@ -12,7 +12,7 @@ import { strip } from "../../utils";
 
 export type CenterProps<E extends Versatile = "div"> = PrismaneVersatile<
   E,
-  FlexProps<E>
+  FlexProps
 >;
 
 type CenterComponent = <E extends Versatile = "div">(

src/components/Checkbox/Checkbox.tsx

@@ -9,13 +9,14 @@ import Hidden from "../Hidden/Hidden";
 // Hooks
 import { useFieldProps } from "../Field";
 // Types
-import { PrismaneFieldComponent } from "../../types";
+import { PrismaneFieldComponent, PrismaneProps } from "../../types";
 // Utils
 import { strip, variants, fr } from "../../utils";
 
-export type CheckboxProps = { indeterminate?: boolean } & FlexProps &
-  TransitionProps &
-  PrismaneFieldComponent;
+export type CheckboxProps = PrismaneProps<
+  { indeterminate?: boolean },
+  FlexProps & TransitionProps & PrismaneFieldComponent
+>;
 
 /**
  * Checkbox Params

src/components/Chip/Chip.tsx

@@ -5,17 +5,23 @@ import Transition, { TransitionProps } from "../Transition/Transition";
 import Icon from "../Icon/Icon";
 import Text from "../Text/Text";
 // Types
-import { PrismaneColors, PrismaneBreakpoints } from "../../types";
+import {
+  PrismaneColors,
+  PrismaneBreakpoints,
+  PrismaneProps,
+} from "../../types";
 // Utils
 import { strip, variants, fr } from "../../utils";
 
-export type ChipProps = {
-  icon?: ReactNode;
-  iconPosition?: "left" | "right";
-  color?: PrismaneColors;
-  size?: PrismaneBreakpoints;
-} & FlexProps &
-  TransitionProps;
+export type ChipProps = PrismaneProps<
+  {
+    icon?: ReactNode;
+    iconPosition?: "left" | "right";
+    color?: PrismaneColors;
+    size?: PrismaneBreakpoints;
+  },
+  FlexProps & TransitionProps
+>;
 
 const Chip = forwardRef<HTMLDivElement, ChipProps>(
   (