@gravity-ui/uikit
Version:
Gravity UI base styling and components
41 lines (40 loc) • 1.94 kB
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { useActionHandlers } from "../../hooks/index.js";
import { Box } from "../layout/index.js";
import { useDefaultProps } from "../theme/useDefaultProps.js";
import { block } from "../utils/cn.js";
import "./Card.css";
const b = block('card');
const roles = {
selection: 'radio',
action: 'button',
container: undefined,
};
export const Card = React.forwardRef(function Card(rawProps, ref) {
const props = useDefaultProps('Card', rawProps);
const { type = 'container', theme, view, size = 'm', children, className, onClick, disabled, selected, ...restProps } = props;
const isTypeAction = type === 'action';
const isTypeSelection = type === 'selection';
const isTypeContainer = type === 'container';
/* Clickable card — only with type 'action' or 'selection' and not selected or disabled */
const hasAction = isTypeAction || isTypeSelection;
const isClickable = hasAction && Boolean(onClick) && !disabled;
/* Theme only with type 'container' */
const defaultTheme = isTypeContainer ? 'normal' : undefined;
/* View only with type 'container' and 'selection' */
const defaultView = isTypeContainer || isTypeSelection ? 'outlined' : undefined;
const handleClick = isClickable ? onClick : undefined;
const { onKeyDown } = useActionHandlers(onClick);
return (_jsx(Box, { ref: ref, role: roles[type], className: b({
theme: theme || defaultTheme,
view: view || defaultView,
type,
selected,
size,
disabled,
clickable: isClickable,
}, className), onClick: handleClick, onKeyDown: isClickable ? onKeyDown : undefined, tabIndex: isClickable ? 0 : undefined, "aria-checked": isTypeSelection ? selected : undefined, ...restProps, children: children }));
});
//# sourceMappingURL=Card.js.map