@compositive/components-controls/dist/Button.js

Compositive component library including form controls.

import { jsx } from 'react/jsx-runtime';
import { Type } from '@compositive/components-typography';
import { StaticStyle, useSurface, Style } from '@compositive/foundation';

const cursorStyle = new StaticStyle({
    cursor: "pointer",
});
/**
 * A Button allows users to perform an action or to navigate to another page.
 *
 * They have multiple styles for various needs, and are ideal for calling attention
 * to where a user needs to do something in order to move forward in a flow.
 */
const Button = ({ children, palette, onPress, onPressIn, onPressOut, onHoverStart, onHoverEnd, state, sx, }) => {
    // TODO: The properties should be inferred from the theme
    const ButtonSurface = useSurface($Button.surface);
    return (jsx(ButtonSurface, { as: "button", palette: palette, onPress: onPress, onPressIn: onPressIn, onPressOut: onPressOut, onHoverStart: onHoverStart, onHoverEnd: onHoverEnd, state: state, sx: Style.concat(cursorStyle, sx), children: jsx(Type, { spec: $Button.typography, children: children }) }));
};
const $Button = {
    surface: [Symbol("Button"), "button", "default"],
    typography: [Symbol("Button"), "button", "default"],
};

export { $Button, Button };
//# sourceMappingURL=Button.js.map