@dossierhq/design
Version:
The design system for Dossier.
33 lines • 1.43 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { toColorClassName } from '../../config/Colors.js';
import { toClassName } from '../../utils/ClassNameUtils.js';
const LABEL_SIZE_CLASSNAMES = {
small: 'is-small',
medium: 'is-medium',
large: 'is-large',
};
export const Field = ({ grouped, horizontal, children }) => {
return (_jsx("div", { className: toClassName('field', grouped && 'is-grouped', horizontal && 'is-horizontal'), children: children }));
};
Field.displayName = 'Field';
Field.Label = ({ size, children }) => {
return (_jsx("label", { className: toClassName('label', size && LABEL_SIZE_CLASSNAMES[size]), children: children }));
};
Field.Label.displayName = 'Field.Label';
Field.Control = ({ children }) => {
return _jsx("div", { className: "control", children: children });
};
Field.Control.displayName = 'Field.Control';
Field.Help = ({ color, children }) => {
return _jsx("p", { className: toClassName('help', toColorClassName(color)), children: children });
};
Field.Help.displayName = 'Field.Help';
Field.LabelColumn = ({ children }) => {
return _jsx("div", { className: "field-label is-normal", children: children });
};
Field.LabelColumn.displayName = 'Field.LabelColumn';
Field.BodyColumn = ({ children }) => {
return _jsx("div", { className: "field-body", children: children });
};
Field.BodyColumn.displayName = 'Field.BodyColumn';
//# sourceMappingURL=Field.js.map