Add default values to jsdoc (#238)

packages/components/src/Label/src/Label.tsx

@@ -31,7 +31,7 @@ function Label(props:LabelProps, ref: ForwardedRef<HTMLLabelElement>) {
     const { stylingProps, ...ownProps } = useStyledSystem(props);
     const { className, size: sizeProp, children, style, ...otherProps } = ownProps;
 
-    const size = useResponsiveValue(sizeProp ?? "md");
+    const size = useResponsiveValue(sizeProp) ?? "md";
 
     const classNames = clsx(
         className,

packages/components/src/Link/src/Link.tsx

@@ -20,11 +20,13 @@ const DefaultLinkSlot = "link";
 export interface LinkProps extends StyledComponentProps<RACLinkProps>{
     /**
      * The visual style of the link.
+     * @default "primary"
      */
     variant?: "primary" | "secondary";
 
     /**
      * Size of the link.
+     * @default "inherit"
      */
     size?: ResponsiveProp<"inherit" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl">;
 
@@ -54,7 +56,7 @@ function Link(props:LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
     const {
         className,
         children: childrenProp,
-        size: sizeProp = "inherit",
+        size: sizeProp,
         style: styleProp,
         isQuiet,
         isExternal,

packages/components/src/Spinner/src/Spinner.tsx

@@ -15,6 +15,7 @@ export const GlobalSpinnerCssSelector = "hop-Spinner";
 export interface SpinnerProps extends StyledSystemProps, BaseComponentProps {
     /**
      * What the Spinner's diameter should be.
+     * @default "md"
      */
     size?: ResponsiveProp<"sm" | "md" | "lg">;
 }

packages/components/src/buttons/src/Button.tsx

@@ -23,11 +23,13 @@ const DefaultButtonSlot = "button";
 export interface ButtonProps extends StyledComponentProps<RACButtonProps> {
     /**
      * The visual style of the button.
+     * * @default "primary"
      */
     variant?: "primary" | "secondary" | "danger" | "upsell" | "ghost-primary" | "ghost-secondary" | "ghost-danger";
 
     /**
      * A button can vary in size.
+     * @default "md"
      */
     size?: ResponsiveProp<"sm" | "md">;
 
@@ -37,7 +39,7 @@ export interface ButtonProps extends StyledComponentProps<RACButtonProps> {
     fluid?: ResponsiveProp<boolean>;
 
     // A button can show a loading indicator.
-    isLoading?:boolean;
+    isLoading?: boolean;
 
     /** A URL to link to. Setting this makes the component render an `a` tag instead of a `button` */
     href?: string;

packages/components/src/errorMessage/src/ErrorMessage.tsx

@@ -17,7 +17,6 @@ export const GlobalErrorMessageCssSelector = "hop-ErrorMessage";
 export interface ErrorMessageProps extends StyledComponentProps<RACFieldErrorProps>, Omit<TextProps, "style" | "className" | "children" | "color" | "content"> {
     /**
      * Whether or not to hide the error message icon.
-     * @default true
      */
     hideIcon?: boolean;
 }
@@ -27,7 +26,7 @@ function ErrorMessage(props: ErrorMessageProps, ref: ForwardedRef<HTMLSpanElemen
     if (!validation?.isInvalid) {
         return null;
     }
-    
+
     return <ErrorMessageInner {...props} ref={ref} />;
 }
 

packages/components/src/helperMessage/src/HelperMessage.tsx

@@ -15,7 +15,6 @@ export const GlobalHelperMessageCssSelector = "hop-HelperMessage";
 export interface HelperMessageProps extends StyledComponentProps<Omit<TextProps, "size">> {
     /**
      * Whether or not to hide the helper message icon.
-     * @default true
      */
     hideIcon?: boolean;
 }

packages/icons/src/Icon.tsx

@@ -18,6 +18,7 @@ const DefaultIconSlot = "icon";
 export interface IconProps extends SlotProps, StyledComponentProps<"svg"> {
     /**
     * The size of the icon.
+    * @default "md"
     */
     size?: ResponsiveProp<"sm" | "md" | "lg">;
     /**

packages/icons/src/RichIcon.tsx

@@ -18,10 +18,12 @@ const DefaultRichIconSlot = "richicon";
 export interface RichIconProps extends SlotProps, StyledComponentProps<"svg"> {
     /**
      * The visual style of the icon.
+     * @default "option7"
      */
     variant?: "option1" | "option2" | "option3" | "option4" | "option5" | "option6" | "option7" | "option8";
     /**
     * The size of the icon.
+    * @default "lg"
     */
     size?: ResponsiveProp<"md" | "lg" | "xl">;
     /**

packages/styled-system/src/StyledSystemProvider.tsx

@@ -23,17 +23,20 @@ export interface StyledSystemProviderProps extends BreakpointProviderProps, DivP
 
     /**
      * The color scheme to use.
+     * @default "light"
      */
     colorScheme: ColorSchemeOrSystem;
 
     /**
      * Default color scheme to use when a user preferred color scheme (system) is not available.
+     * @default "light"
      */
     defaultColorScheme?: ColorScheme;
 
     /**
      * Determines whether token CSS variables should be added to the document's head
      * By default, it is set to `true`, you should not change it unless you want to manage CSS variables via `.css` files
+     * @default true
     */
     withCssVariables?: boolean;
 }

packages/styled-system/src/responsive/BreakpointProvider.tsx

@@ -9,7 +9,12 @@ import { Breakpoints, type Breakpoint } from "./Breakpoints.ts";
 export const DefaultUnsupportedMatchMediaBreakpoint: Breakpoint = "lg";
 
 export interface BreakpointProviderProps {
+    /** The children of the component */
     children: ReactNode;
+    /**
+     * The breakpoint to use when the browser does not support matchMedia.
+     * @default "lg"
+     */
     unsupportedMatchMediaBreakpoint?: Breakpoint;
 }