UNPKG

@trail-ui/react

Version:
112 lines (110 loc) 4.11 kB
"use strict"; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // src/card/card.tsx var card_exports = {}; __export(card_exports, { Card: () => _Card, CardContext: () => CardContext }); module.exports = __toCommonJS(card_exports); var import_shared_utils = require("@trail-ui/shared-utils"); var import_theme = require("@trail-ui/theme"); var import_utils = require("@react-aria/utils"); var import_react = require("react"); var import_react_aria = require("react-aria"); var import_react_aria_components = require("react-aria-components"); var import_jsx_runtime = require("react/jsx-runtime"); var CardContext = (0, import_react.createContext)({}); function Card(props, ref) { [props, ref] = (0, import_react_aria_components.useContextProps)(props, ref, CardContext); const ctx = props; const { elementType, children, autoFocus, className, classNames, onPress, ...cardProps } = props; const variantProps = (0, import_theme.filterVariantProps)(props, import_theme.card.variantKeys); const Component = elementType || (props.isPressable ? "button" : "div"); let componentProps = cardProps; if (typeof Component === "string") { componentProps = (0, import_utils.filterDOMProps)(cardProps); } const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className); const { buttonProps, isPressed } = (0, import_react_aria.useButton)( { elementType: Component, onPress, isDisabled: !props.isPressable, ...cardProps }, ref ); const { focusProps, isFocused, isFocusVisible } = (0, import_react_aria.useFocusRing)({ autoFocus }); const { hoverProps, isHovered } = (0, import_react_aria.useHover)({ isDisabled: !props.isHoverable, ...cardProps }); const slots = (0, import_react.useMemo)( () => (0, import_theme.card)({ ...variantProps }), [variantProps] ); const context = (0, import_react.useMemo)( () => ({ isPressable: ctx.isPressable, isDisabled: ctx.isDisabled, isFooterBlurred: ctx.isFooterBlurred, disableAnimation: ctx.disableAnimation, fullWidth: ctx.fullWidth, slots, classNames }), [ ctx.isPressable, ctx.isDisabled, ctx.isFooterBlurred, ctx.disableAnimation, ctx.fullWidth, slots, classNames ] ); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( Component, { ...(0, import_utils.mergeProps)( props.isPressable ? { ...buttonProps, ...focusProps, role: "button" } : {}, props.isHoverable ? hoverProps : {}, componentProps ), ref, className: slots.base({ class: baseStyles }), tabIndex: props.isPressable ? 0 : -1, "data-disabled": (0, import_shared_utils.dataAttr)(props.isDisabled), "data-pressed": (0, import_shared_utils.dataAttr)(isPressed), "data-hovered": (0, import_shared_utils.dataAttr)(isHovered), "data-focused": (0, import_shared_utils.dataAttr)(isFocused), "data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContext.Provider, { value: context, children }) } ); } var _Card = (0, import_react.forwardRef)(Card); // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { Card, CardContext });