TypeScript Usage

{
  "compilerOptions": {
    "target": "es6",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,                           // Strict mode enabled
    "skipLibCheck": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "declaration": true,                      // Generate .d.ts files
    "sourceMap": true,
    "outDir": "dist",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "emitDeclarationOnly": true,
    "resolveJsonModule": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "noFallthroughCasesInSwitch": true,
    "isolatedModules": true,
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@constants/*": ["src/constants/*"],
      "@assets/*": ["src/assets/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["src/**/*.stories.tsx", "src/**/*.stories.ts"]
}

import React, { ComponentPropsWithoutRef, useEffect, useState } from "react";
import styled from "styled-components";
import { Player } from "@lottiefiles/react-lottie-player";

// Path aliases for cross-directory imports
import AnimationCheck from "@assets/animations/button-check.json";
import AnimationLoading from "@assets/animations/button-loading.json";
import Text from "@components/Text/Text";
import Color from "@constants/Color";

const ButtonPrimary = styled.button<{
  $size?: "small" | "normal";
  $loading?: boolean;
  $success?: boolean;
}>`
  background-color: ${(props) =>
    props.$success ? Color.status.color.success : Color.background.primary};
  // ... rest of styles
`;

import { ComponentPropsWithoutRef } from "react";

/**
 * Button component with multiple visual variants and built-in loading/success states.
 *
 * @example
 * ```tsx
 * <Button design="primary" loading={isLoading}>
 *   Submit
 * </Button>
 * ```
 */
export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
  /** Visual variant: `primary` for main actions, `secondary` for less emphasis */
  design?: "primary" | "secondary" | "text" | "image" | "call-to-action";
  /** Button size: `normal` (default) or `small` for compact layouts */
  size?: "small" | "normal";
  icon?: React.ReactElement;
  iconPosition?: "left" | "right";
  /** Shows animated loading spinner (Lottie animation) */
  loading?: boolean;
  disabled?: boolean;
  /** Triggers success animation (Lottie checkmark) */
  success?: boolean;
  /** Delay in milliseconds before showing loading animation */
  animationDelay?: number;
  /** Duration in milliseconds for success animation before callback */
  animationTime?: number;
  /** Time in seconds to display countdown on button */
  countdown?: number;
  /** Callback fired when success animation completes */
  onSuccess?: (success: boolean) => void;
  /** Callback fired when countdown reaches zero */
  onCountdownEnd?: () => void;
}

/**
 * Unified typography component that renders headers (h1-h6, d1), 
 * paragraphs (p, p2, c1, c2, o1, o2), or button text (b1, b2, b3).
 * Automatically chooses the correct semantic HTML element based on the `type` prop.
 *
 * @example
 * ```tsx
 * <Text type="h1" weight="bold">Page Title</Text>
 * <Text type="p" color={ColorV2.text.neutralMedium}>Body text</Text>
 * <Text type="b1">Button text</Text>
 * ```
 */
export type TextProps = HeaderProps | ParagraphProps | ButtonProps;

export interface Props extends ComponentPropsWithoutRef<"button"> {
  size?: "small" | "normal";
  icon?: React.ReactElement;
  iconPosition?: "left" | "right";
  loading?: boolean;
  success?: boolean;
  animationDelay?: number;
  animationTime?: number;
  countdown?: number;
  onSuccess?: (success: boolean) => void;
  onCountdownEnd?: () => void;
}

import { ButtonProps } from "@adoptaunabuelo/react-components";
import type { ComponentPropsWithoutRef } from "react";

interface MyCustomButtonProps extends ButtonProps {
  customProp?: string;
}

const MyButton: React.FC<MyCustomButtonProps> = (props) => {
  return <Button {...props} />;
};