{"version":3,"file":"html-box.cjs","sources":["../../../src/components/html-box.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode } from 'react';\nimport { HTMLHost, type HTMLHostProps } from './html-host';\n\nconst BASE_STYLE: CSSProperties = {\n  boxSizing: 'border-box',\n  overflow: 'hidden',\n  textAlign: 'center',\n  wordBreak: 'break-word',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n};\n\nconst AUTO_SIZE_STYLE: CSSProperties = {\n  minWidth: 80,\n  minHeight: 40,\n  maxWidth: 200,\n};\n\n/**\n * Props for {@link HTMLBox}. Same shape as {@link HTMLHostProps}: `className` is\n * merged with the `jj-box` class and `style` is layered on top of the default\n * box styling before reaching the underlying {@link HTMLHost}; the rest pass\n * through unchanged.\n * @expand\n * @group Types\n */\nexport interface HTMLBoxProps extends HTMLHostProps {}\n\n/**\n * Renders a graph element as a pre-styled HTML box. Reach for this inside\n * `<Paper renderElement={...}>` when you want elements that already look good\n * without writing any CSS.\n *\n * Wraps {@link HTMLHost} and adds the `jj-box` class, which themes the box\n * through `--jj-box-*` CSS variables (background, border, radius, padding,\n * font). Like {@link HTMLHost}, it measures its content and syncs the size back\n * to the element by default; set `useModelGeometry` to size it from the model\n * instead. All props reach the underlying {@link HTMLHost}; `className` is merged\n * with the `jj-box` class and `style` is layered on top of the default box\n * styling, while the rest pass through unchanged. Use {@link HTMLHost} directly\n * when you want a blank host with no default styling.\n * @example\n * ```tsx\n * import { Paper, HTMLBox } from '@joint/react';\n *\n * // Each element renders as a ready-styled box showing its label.\n * <Paper renderElement={({ label }) => <HTMLBox>{label}</HTMLBox>} />\n * ```\n * @group Components\n */\nexport function HTMLBox(props: Readonly<HTMLBoxProps> = {}): ReactNode {\n  const { className, style, useModelGeometry, ...rest } = props;\n  const mergedClassName = className ? `jj-box ${className}` : 'jj-box';\n  const baseStyle = useModelGeometry ? BASE_STYLE : { ...BASE_STYLE, ...AUTO_SIZE_STYLE };\n  const mergedStyle = style ? { ...baseStyle, ...style } : baseStyle;\n  return <HTMLHost\n    {...rest}\n    useModelGeometry={useModelGeometry}\n    className={mergedClassName}\n    style={mergedStyle}\n  />;\n}\n"],"names":["jsx","HTMLHost"],"mappings":"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"}