"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
const require_styles_styler = require('../../styles/styler.cjs');
const require_utils_createSlot = require('../../utils/createSlot.cjs');
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");

//#region src/components/client/Pressable.tsx
const Slot = require_utils_createSlot.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 = (0, react.forwardRef)(function Pressable({ className, asChild, onPress, onClick = onPress, 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, dropShadow, insetShadow, ...props }, ref) {
	const styles = require_styles_styler.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,
		dropShadow,
		insetShadow,
		className
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? Slot : "button", {
		className: styles,
		ref,
		onClick,
		tabIndex: 0,
		...props
	});
});
Pressable.displayName = "Pressable";

//#endregion
exports.Pressable = Pressable;