@ozen-ui/kit
Version:
React component library
21 lines (20 loc) • 2 kB
JavaScript
import { __assign, __rest } from "tslib";
import './Card.css';
import React from 'react';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
import { Paper } from '../Paper';
import { matchBackgroundColorPaperToCard, matchBorderRadiusPaperToCard, } from './utils';
export var cnCard = cn('Card');
export var Card = polymorphicComponentWithRef(function (inProps, ref) {
var props = useThemeProps({ props: inProps, name: 'Card' });
var _a = props.size, size = _a === void 0 ? 'm' : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.interactive, interactive = _c === void 0 ? false : _c, _d = props.borderWidth, borderWidth = _d === void 0 ? 's' : _d, _e = props.borderVariant, borderVariant = _e === void 0 ? 'solid' : _e, _f = props.borderColor, borderColor = _f === void 0 ? 'standard' : _f, _g = props.backgroundColor, backgroundColor = _g === void 0 ? 'standard' : _g, _h = props.as, Tag = _h === void 0 ? 'div' : _h, className = props.className, children = props.children, other = __rest(props, ["size", "disabled", "interactive", "borderWidth", "borderVariant", "borderColor", "backgroundColor", "as", "className", "children"]);
var shouldBeInteractive = !disabled && interactive;
var shouldShowBorder = borderWidth !== 'none';
return (React.createElement(Paper, __assign({ as: Tag, radius: matchBorderRadiusPaperToCard[size], background: matchBackgroundColorPaperToCard[backgroundColor] }, (shouldBeInteractive && { tabIndex: 0 }), { "aria-disabled": disabled }, other, { ref: ref, className: cnCard(__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
borderVariant: borderVariant,
borderColor: borderColor,
})), [className]) }), children));
});
Card.displayName = 'Card';