UNPKG

@kopexa/preview-card

Version:

Part of the Kopexa Sight Design System.

119 lines (117 loc) 4.05 kB
"use client"; "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/preview-card.tsx var preview_card_exports = {}; __export(preview_card_exports, { PreviewCard: () => PreviewCard, PreviewCardAction: () => PreviewCardAction }); module.exports = __toCommonJS(preview_card_exports); var import_button = require("@kopexa/button"); var import_icons = require("@kopexa/icons"); var import_react_utils = require("@kopexa/react-utils"); var import_theme = require("@kopexa/theme"); var import_react_slot = require("@radix-ui/react-slot"); var import_jsx_runtime = require("react/jsx-runtime"); var [Provider, useProvider] = (0, import_react_utils.createContext)(); var PreviewCardRoot = (props) => { const { className, children, asChild, size, border, hoverBorder, hoverBg, hoverTitle, showAction, ...rest } = props; const Component = asChild ? import_react_slot.Slot : "div"; const styles = (0, import_theme.previewCard)({ size, border, hoverBorder, hoverBg, hoverTitle, showAction }); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { className: styles.root({ className }), ...rest, children }) }); }; function PreviewCardIcon(props) { const { className, children, ...rest } = props; const { styles } = useProvider(); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.icon({ className }), ...rest, children }); } function PreviewCardContent(props) { const { className, children, ...rest } = props; const { styles } = useProvider(); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.content({ className }), ...rest, children }); } function PreviewCardTitle({ className, ...props }) { const { styles } = useProvider(); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: styles.title({ className }), ...props }); } function PreviewCardDescription({ className, ...props }) { const { styles } = useProvider(); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: styles.description({ className }), ...props }); } var PreviewCardAction = ({ className, onClick, ...props }) => { const { styles } = useProvider(); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_button.IconButton, { variant: "ghost", size: "sm", className: styles.action({ className }), onClick: (e) => { e.stopPropagation(); e.preventDefault(); onClick == null ? void 0 : onClick(e); }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseIcon, {}) } ); }; function PreviewCardTags({ className, ...props }) { const { styles } = useProvider(); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.tags({ className }), ...props }); } var PreviewCard = Object.assign(PreviewCardRoot, { Icon: PreviewCardIcon, Content: PreviewCardContent, Title: PreviewCardTitle, Description: PreviewCardDescription, Action: PreviewCardAction, Tags: PreviewCardTags }); // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { PreviewCard, PreviewCardAction });