/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { getStyles } from "../../styles/styler.js";
import { createSlot } from "../../utils/createSlot.js";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/components/client/Pressable.tsx
const Slot = createSlot();
/**
* **🖲️ A primitive component for creating button interactions with accessibility support**
*
* @componentType Client component
*
* @description
* The Pressable component is a primitive component that can be used
* to create button interactions with accessibility support. It can be used
* to trigger an action, such as submitting a form, navigating to a new page,
* or adding interactivity to a section or card.
*
* @example
* ```tsx
* import { Pressable } from '@yahoo/uds';
*
* <Pressable
*   backgroundColor="secondary"
*   borderWidth="thin"
*   borderColor="primary"
*   borderRadius="lg"
*   onPress={() => console.log('Pressed!')}
*  >
*    <Text variant="body1" color="primary" spacingHorizontal="7" spacingVertical="5">Click me...</Text>
* </Pressable>
* ```
*
* @usage
* - If you need to add interactivity to a section or card.
* - If you need a highly customized version of [Button](./button)
*
* @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
*
* @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/docs/components/icon-button)
*
*/
const Pressable = forwardRef(function Pressable({ className, asChild, onPress, onClick, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, dropShadow, insetShadow, ...props }, ref) {
	const handleClick = onPress || onClick ? (e) => {
		onClick?.(e);
		onPress?.();
	} : void 0;
	const styles = getStyles({
		backgroundColor,
		borderRadius,
		borderTopStartRadius,
		borderTopEndRadius,
		borderBottomStartRadius,
		borderBottomEndRadius,
		borderColor,
		borderStartColor,
		borderEndColor,
		borderTopColor,
		borderBottomColor,
		borderWidth,
		borderVerticalWidth,
		borderHorizontalWidth,
		borderStartWidth,
		borderEndWidth,
		borderTopWidth,
		borderBottomWidth,
		alignContent,
		alignItems,
		alignSelf,
		flex,
		flexDirection,
		flexGrow,
		flexShrink,
		flexWrap,
		justifyContent,
		flexBasis,
		display,
		overflow,
		overflowX,
		overflowY,
		position,
		spacing,
		spacingHorizontal,
		spacingVertical,
		spacingBottom,
		spacingEnd,
		spacingStart,
		spacingTop,
		offset,
		offsetVertical,
		offsetHorizontal,
		offsetBottom,
		offsetEnd,
		offsetStart,
		offsetTop,
		columnGap,
		rowGap,
		width,
		height,
		dropShadow,
		insetShadow,
		className
	});
	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
		className: styles,
		ref,
		onClick: handleClick,
		tabIndex: 0,
		...props
	});
});
Pressable.displayName = "Pressable";
//#endregion
export { Pressable };
