
"use client";
import { UniversalButtonProps } from "../../types/dist/index.js";
import { IconPropsWithSVGProps } from "../../tokens/types.js";
import React, { ForwardRefExoticComponent } from "react";
import { HTMLMotionProps } from "motion/react";

//#region src/components/client/Button.d.ts
declare const iconMotionVariants: {
  hide: {
    scale: number;
    opacity: number;
  };
  icon: {
    scale: number[];
    opacity: number[];
    transition: {
      times: number[];
    };
  };
  loading: {
    scale: number;
    opacity: number;
  };
};
declare const loadingMotionVariants: {
  hide: {
    scale: number;
    opacity: number;
  };
  icon: {
    scale: number;
    opacity: number;
  };
  loading: {
    scale: number[];
    opacity: number[];
    transition: {
      times: number[];
    };
  };
};
type HtmlButtonProps = Omit<HTMLMotionProps<'button'>, 'color' | 'name'> & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
type DataAttributes = {
  [name: `data-${string}`]: string;
};
interface ButtonProps extends HtmlButtonProps, UniversalButtonProps {
  /** Props to be passed into various slots within the component. */
  slotProps?: {
    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
    content?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
  };
}
/**
 * **🖲️ A button element that can be used to trigger an action**
 *
 * @componentType Client component
 *
 * @description A button is a fundamental component used to trigger an action or event. Buttons are interactive elements that users can click, tap, or otherwise engage with to submit forms, open dialogues, or perform any other interaction within an application or website. Consider an IconButton for buttons that only contain an icon.
 *
 * @see The {@link https://uds.build/docs/components/button Button Docs} for more info
 *
 * @example
 * ```tsx
 * 'use client';
 * import { Button, HStack } from "@yahoo/uds";
 *
 * export function Demo() {
 *   return (
 *     <HStack gap="2">
 *       <Button onClick={console.log}>Save</Button>
 *       <Button variant="secondary" onClick={console.log}>Cancel</Button>
 *     </HStack>
 *   )
 * }
 * ```
 *
 *
 * @usage
 * Buttons should be used to clearly indicate and initiate actions that users can take.
 *
 * @related [Icon](https://uds.build/docs/components/icon), [IconButton](https://uds.build/docs/components/icon-button), [Pressable](https://uds.build/docs/components/pressable)
 **/
declare const Button: ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
//#endregion
export { Button, type ButtonProps, iconMotionVariants, loadingMotionVariants };