@veracity/vui/dist/definition/definition.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { cs } from "../utils/styles.js";
import { omitThemingProps, useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { DefinitionContent } from "./definitionContent.js";
import { jsx } from "react/jsx-runtime";

//#region src/definition/definition.tsx
/**
* Properties are definition lists
* */
const DefinitionVerticalBase = styled.dlBox`
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(10em, 20em));

  .vui-definitionItemWrapper {
    display: flex;
    flex-direction: column;
  }

  dt {
    display: inline-flex;
  }

  dd {
    white-space: pre-wrap;
  }

  dd > * {
    margin-left: 0 !important;
  }
`;
const DefinitionHorizontalBase = styled.dlBox`
  padding: 10px;
  display: grid;
  gap: 0;

  .vui-definitionItemWrapper {
    display: flex;
    flex-direction: column;
    @media (min-width: 1024px) {
      flex-direction: row;
    }
  }

  dt,
  dd {
    display: inline-flex;
    padding-left: 5px;
  }

  dt {
    width: 20%;
    min-width: 130px;
  }

  dd {
    white-space: pre-wrap;
  }

  dd > * {
    margin-left: 0 !important;
  }
`;
const Definition = vui((props, ref) => {
	const { orientation = "horizontal", className, ...rest } = omitThemingProps(props);
	const styles = useStyleConfig("Definition", props);
	return orientation === "horizontal" ? /* @__PURE__ */ jsx(DefinitionHorizontalBase, {
		className: cs("vui-definition vui-definition-horizontal", className),
		ref,
		...styles.container,
		...rest,
		children: /* @__PURE__ */ jsx(DefinitionContent, {
			orientation: "horizontal",
			...rest
		})
	}) : /* @__PURE__ */ jsx(DefinitionVerticalBase, {
		className: cs("vui-definition vui-definition-vertical", className),
		ref,
		...styles.container,
		...rest,
		children: /* @__PURE__ */ jsx(DefinitionContent, {
			orientation: "vertical",
			...rest
		})
	});
});
Definition.displayName = "Definition";

//#endregion
export { Definition, Definition as default, DefinitionHorizontalBase, DefinitionVerticalBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=definition.js.map