@toptal/picasso-form-label 1.0.1

package/dist-package/src/FormControlLabel/FormControlLabel.d.ts

@@ -0,0 +1,23 @@
+import type { ReactElement, ReactNode, LabelHTMLAttributes } from 'react';
+import React from 'react';
+import type { FormControlLabelProps } from '@material-ui/core/FormControlLabel';
+import type { StandardProps, TextLabelProps } from '@toptal/picasso-shared';
+import type { RequiredDecoration } from '../FormLabel';
+export declare type FormControlLabelAttributesType = LabelHTMLAttributes<HTMLLabelElement> & Pick<FormControlLabelProps, 'onChange'>;
+export interface Props extends StandardProps, TextLabelProps, FormControlLabelAttributesType {
+    /** A control element. For instance, it can be be a Radio or a Checkbox */
+    control: ReactElement;
+    /** The text to be used in an enclosing label element */
+    label?: ReactNode;
+    /** Shows whether label is disabled or not */
+    disabled?: boolean;
+    /** Whether to show asterisk or (optional) postfix as a 'required' decoration */
+    requiredDecoration?: RequiredDecoration;
+    classes?: {
+        root?: string;
+        label?: string;
+    };
+}
+declare const FormControlLabel: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLabelElement>>;
+export default FormControlLabel;
+//# sourceMappingURL=FormControlLabel.d.ts.map

package/dist-package/src/FormControlLabel/FormControlLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControlLabel.d.ts","sourceRoot":"","sources":["../../../src/FormControlLabel/FormControlLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AACzE,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAA;AAC/E,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAI3E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAGtD,oBAAY,8BAA8B,GACxC,mBAAmB,CAAC,gBAAgB,CAAC,GACnC,IAAI,CAAC,qBAAqB,EAAE,UAAU,CAAC,CAAA;AAE3C,MAAM,WAAW,KACf,SAAQ,aAAa,EACnB,cAAc,EACd,8BAA8B;IAChC,0EAA0E;IAC1E,OAAO,EAAE,YAAY,CAAA;IACrB,wDAAwD;IACxD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,CAAA;CACF;AAED,QAAA,MAAM,gBAAgB,gFA+CrB,CAAA;AAID,eAAe,gBAAgB,CAAA"}

package/dist-package/src/FormControlLabel/FormControlLabel.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from 'react';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
+import { useFieldsLayoutContext } from '@toptal/picasso-form-layout';
+import { FormLabel } from '../FormLabel';
+const FormControlLabel = forwardRef(function FormControlLabel(props, ref) {
+    const { control, label, className, style, disabled, requiredDecoration, titleCase, classes } = props, rest = __rest(props, ["control", "label", "className", "style", "disabled", "requiredDecoration", "titleCase", "classes"]);
+    const { layout } = useFieldsLayoutContext();
+    const isHorizontalLayout = layout === 'horizontal';
+    return (React.createElement("label", Object.assign({}, rest, { ref: ref, className: twMerge('inline-flex items-center', 'max-w-full', 'align-middle', '-webkit-tap-highlight-color-transparent', 'mx-0', disabled ? 'cursor-default' : 'cursor-pointer', isHorizontalLayout && 'col-start-1 col-span-2', classes === null || classes === void 0 ? void 0 : classes.root, className), style: style }),
+        React.cloneElement(control, { disabled }),
+        React.createElement(FormLabel, { className: twMerge(disabled && 'pointer-events-auto', classes === null || classes === void 0 ? void 0 : classes.label), as: 'span', requiredDecoration: requiredDecoration, disabled: disabled, titleCase: titleCase }, label)));
+});
+FormControlLabel.displayName = 'FormControlLabel';
+export default FormControlLabel;
+//# sourceMappingURL=FormControlLabel.js.map

package/dist-package/src/FormControlLabel/FormControlLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControlLabel.js","sourceRoot":"","sources":["../../../src/FormControlLabel/FormControlLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAGpE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAwBxC,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,gBAAgB,CAAC,KAAK,EAAE,GAAG;IAClC,MAAM,EACJ,OAAO,EACP,KAAK,EACL,SAAS,EACT,KAAK,EACL,QAAQ,EACR,kBAAkB,EAClB,SAAS,EACT,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,oGAUL,CAAQ,CAAA;IAET,MAAM,EAAE,MAAM,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAC3C,MAAM,kBAAkB,GAAG,MAAM,KAAK,YAAY,CAAA;IAElD,OAAO,CACL,+CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAChB,0BAA0B,EAC1B,YAAY,EACZ,cAAc,EACd,yCAAyC,EACzC,MAAM,EACN,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,EAC9C,kBAAkB,IAAI,wBAAwB,EAC9C,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,EACb,SAAS,CACV,EACD,KAAK,EAAE,KAAK;QAEX,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,CAAC;QAC1C,oBAAC,SAAS,IACR,SAAS,EAAE,OAAO,CAAC,QAAQ,IAAI,qBAAqB,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC,EACrE,EAAE,EAAC,MAAM,EACT,kBAAkB,EAAE,kBAAkB,EACtC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,IAEnB,KAAK,CACI,CACN,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEjD,eAAe,gBAAgB,CAAA"}

package/dist-package/src/FormControlLabel/index.d.ts

@@ -0,0 +1,5 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared';
+import type { Props } from './FormControlLabel';
+export { default as FormControlLabel } from './FormControlLabel';
+export declare type FormControlLabelProps = OmitInternalProps<Props>;
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/FormControlLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FormControlLabel/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAE/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAChE,oBAAY,qBAAqB,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}

package/dist-package/src/FormControlLabel/index.js

@@ -0,0 +1,2 @@
+export { default as FormControlLabel } from './FormControlLabel';
+//# sourceMappingURL=index.js.map

package/dist-package/src/FormControlLabel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/FormControlLabel/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAA"}

package/dist-package/src/FormLabel/FormLabel.d.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import React from 'react';
+import type { BaseProps, TextLabelProps, SizeType } from '@toptal/picasso-shared';
+declare type ComponentType = 'label' | 'span';
+export declare type RequiredDecoration = 'asterisk' | 'optional';
+export declare type Size = SizeType<'medium' | 'large'>;
+export declare type Alignment = 'top' | 'middle';
+export interface Props extends BaseProps, TextLabelProps, HTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
+    /** Content of the label */
+    children: ReactNode;
+    /** Whether to show asterisk or (optional) postfix as a 'required' decoration */
+    requiredDecoration?: RequiredDecoration;
+    /** Is this label for disabled input or not */
+    disabled?: boolean;
+    /** Specifies an id of the input */
+    htmlFor?: string;
+    /** Whether label should act as inline element `display: inline-block` */
+    inline?: boolean;
+    /** Component used for the root node */
+    as?: ComponentType;
+    /** Component size */
+    size?: Size;
+    /** Whether label should be aligned to top of the container or not */
+    alignment?: Alignment;
+    /** Label's end adornment */
+    labelEndAdornment?: ReactNode;
+}
+export declare const FormLabel: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLabelElement>>;
+export default FormLabel;
+//# sourceMappingURL=FormLabel.d.ts.map

package/dist-package/src/FormLabel/FormLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.d.ts","sourceRoot":"","sources":["../../../src/FormLabel/FormLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,QAAQ,EACT,MAAM,wBAAwB,CAAA;AAQ/B,aAAK,aAAa,GAAG,OAAO,GAAG,MAAM,CAAA;AACrC,oBAAY,kBAAkB,GAAG,UAAU,GAAG,UAAU,CAAA;AAExD,oBAAY,IAAI,GAAG,QAAQ,CAAC,QAAQ,GAAG,OAAO,CAAC,CAAA;AAC/C,oBAAY,SAAS,GAAG,KAAK,GAAG,QAAQ,CAAA;AAExC,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,cAAc,CAAC,gBAAgB,GAAG,eAAe,CAAC;IACpD,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAA;IACnB,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,yEAAyE;IACzE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,uCAAuC;IACvC,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,qBAAqB;IACrB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,qEAAqE;IACrE,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,4BAA4B;IAC5B,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAC9B;AAED,eAAO,MAAM,SAAS,gFAmDpB,CAAA;AAUF,eAAe,SAAS,CAAA"}

package/dist-package/src/FormLabel/FormLabel.js

@@ -0,0 +1,37 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from 'react';
+import { useTitleCase } from '@toptal/picasso-shared';
+import { toTitleCase } from '@toptal/picasso-utils';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
+import { useFieldsLayoutContext } from '@toptal/picasso-form-layout';
+import { classesBySize, getRootClasses } from './styles';
+export const FormLabel = forwardRef(function FormLabel(props, ref) {
+    const { children, disabled, htmlFor, className, style, inline, as: Component = 'label', titleCase: propsTitleCase, requiredDecoration, size = 'medium', alignment = 'middle', labelEndAdornment } = props, rest = __rest(props, ["children", "disabled", "htmlFor", "className", "style", "inline", "as", "titleCase", "requiredDecoration", "size", "alignment", "labelEndAdornment"]);
+    const isInline = inline || Component === 'span';
+    const titleCase = useTitleCase(propsTitleCase);
+    const { layout } = useFieldsLayoutContext();
+    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, htmlFor: htmlFor, className: twMerge(getRootClasses({ disabled, isInline, layout, alignment }), className), style: style }),
+        React.createElement("span", { className: isInline ? 'align-top text-[0.8125rem]' : classesBySize[size] },
+            requiredDecoration === 'asterisk' && (React.createElement("span", { className: 'align-top text-red-500 mr-[0.3125em]' }, "*")),
+            titleCase ? toTitleCase(children) : children,
+            requiredDecoration === 'optional' && ' (optional)',
+            labelEndAdornment)));
+});
+FormLabel.defaultProps = {
+    as: 'label',
+    inline: false,
+    size: 'medium',
+};
+FormLabel.displayName = 'FormLabel';
+export default FormLabel;
+//# sourceMappingURL=FormLabel.js.map

package/dist-package/src/FormLabel/FormLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.js","sourceRoot":"","sources":["../../../src/FormLabel/FormLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAMzC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAEpE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAgCxD,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAA0B,SAAS,SAAS,CAC7E,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EACN,EAAE,EAAE,SAAS,GAAG,OAAO,EACvB,SAAS,EAAE,cAAc,EACzB,kBAAkB,EAClB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,QAAQ,EACpB,iBAAiB,KAEf,KAAK,EADJ,IAAI,UACL,KAAK,EAdH,sJAcL,CAAQ,CAAA;IACT,MAAM,QAAQ,GAAG,MAAM,IAAI,SAAS,KAAK,MAAM,CAAA;IAC/C,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,CAAC,CAAA;IAC9C,MAAM,EAAE,MAAM,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAE3C,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,OAAO,CAChB,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EACzD,SAAS,CACV,EACD,KAAK,EAAE,KAAK;QAEZ,8BACE,SAAS,EACP,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC;YAG9D,kBAAkB,KAAK,UAAU,IAAI,CACpC,8BAAM,SAAS,EAAC,sCAAsC,QAAS,CAChE;YAEA,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ;YAE5C,kBAAkB,KAAK,UAAU,IAAI,aAAa;YAElD,iBAAiB,CACb,CACG,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,SAAS,CAAC,YAAY,GAAG;IACvB,EAAE,EAAE,OAAO;IACX,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,QAAQ;CACf,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}

package/dist-package/src/FormLabel/index.d.ts

@@ -0,0 +1,6 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared';
+import type { Props } from './FormLabel';
+export { default as FormLabel } from './FormLabel';
+export type { RequiredDecoration } from './FormLabel';
+export declare type FormLabelProps = OmitInternalProps<Props>;
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/FormLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FormLabel/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAExC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,YAAY,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AACrD,oBAAY,cAAc,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}

package/dist-package/src/FormLabel/index.js

@@ -0,0 +1,2 @@
+export { default as FormLabel } from './FormLabel';
+//# sourceMappingURL=index.js.map

package/dist-package/src/FormLabel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/FormLabel/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA"}

package/dist-package/src/FormLabel/styles.d.ts

@@ -0,0 +1,12 @@
+import type { FieldLayout } from '@toptal/picasso-form-layout';
+import type { Alignment, Size } from './FormLabel';
+export declare const classesBySize: Record<Size, string>;
+declare type GetRootClassesOptions = {
+    disabled?: boolean;
+    isInline: boolean;
+    layout: FieldLayout;
+    alignment: Alignment;
+};
+export declare const getRootClasses: ({ disabled, isInline, layout, alignment, }: GetRootClassesOptions) => string;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/FormLabel/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/FormLabel/styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAE9D,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAElD,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAG9C,CAAA;AAED,aAAK,qBAAqB,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE,WAAW,CAAA;IACnB,SAAS,EAAE,SAAS,CAAA;CACrB,CAAA;AAqCD,eAAO,MAAM,cAAc,+CAKxB,qBAAqB,WAQvB,CAAA"}

package/dist-package/src/FormLabel/styles.js

@@ -0,0 +1,24 @@
+import { twJoin } from '@toptal/picasso-tailwind-merge';
+export const classesBySize = {
+    medium: 'text-[0.875rem]',
+    large: 'text-[1rem]',
+};
+const getDisplayClasses = ({ isInline, layout, alignment, }) => {
+    if (layout === 'horizontal' && alignment === 'top') {
+        return 'flex items-start';
+    }
+    if (layout === 'horizontal') {
+        return 'flex items-center';
+    }
+    if (isInline) {
+        return 'inline-block';
+    }
+    return 'block';
+};
+const getMarginClasses = ({ layout, isInline, }) => layout === 'horizontal' || isInline ? 'mb-0' : 'mb-[0.5em]';
+const getPaddingsClasses = ({ layout, alignment, }) => layout === 'horizontal' && alignment === 'top' ? 'pt-2' : '';
+const getColorClasses = ({ disabled }) => disabled ? 'text-graphite-700/[0.48]' : 'text-graphite-700';
+export const getRootClasses = ({ disabled, isInline, layout, alignment, }) => {
+    return twJoin(getDisplayClasses({ isInline, layout, alignment }), 'leading-[1em]', getMarginClasses({ layout, isInline }), getColorClasses({ disabled }), getPaddingsClasses({ layout, alignment }));
+};
+//# sourceMappingURL=styles.js.map

package/dist-package/src/FormLabel/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/FormLabel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAKvD,MAAM,CAAC,MAAM,aAAa,GAAyB;IACjD,MAAM,EAAE,iBAAiB;IACzB,KAAK,EAAE,aAAa;CACrB,CAAA;AASD,MAAM,iBAAiB,GAAG,CAAC,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,GACsB,EAAE,EAAE;IACnC,IAAI,MAAM,KAAK,YAAY,IAAI,SAAS,KAAK,KAAK,EAAE;QAClD,OAAO,kBAAkB,CAAA;KAC1B;IAED,IAAI,MAAM,KAAK,YAAY,EAAE;QAC3B,OAAO,mBAAmB,CAAA;KAC3B;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,cAAc,CAAA;KACtB;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,EACxB,MAAM,EACN,QAAQ,GACuB,EAAE,EAAE,CACnC,MAAM,KAAK,YAAY,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAA;AAE7D,MAAM,kBAAkB,GAAG,CAAC,EAC1B,MAAM,EACN,SAAS,GACsB,EAAE,EAAE,CACnC,MAAM,KAAK,YAAY,IAAI,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAA;AAE9D,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAkC,EAAE,EAAE,CACvE,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,mBAAmB,CAAA;AAE7D,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,GACa,EAAE,EAAE;IAC1B,OAAO,MAAM,CACX,iBAAiB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EAClD,eAAe,EACf,gBAAgB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EACtC,eAAe,CAAC,EAAE,QAAQ,EAAE,CAAC,EAC7B,kBAAkB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAC1C,CAAA;AACH,CAAC,CAAA"}

package/dist-package/src/index.d.ts

@@ -0,0 +1,5 @@
+export type { FormControlLabelProps } from './FormControlLabel';
+export { FormControlLabel } from './FormControlLabel';
+export type { FormLabelProps, RequiredDecoration } from './FormLabel';
+export { FormLabel } from './FormLabel';
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA"}

package/dist-package/src/index.js

@@ -0,0 +1,3 @@
+export { FormControlLabel } from './FormControlLabel';
+export { FormLabel } from './FormLabel';
+//# sourceMappingURL=index.js.map

package/dist-package/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAGrD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA"}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@toptal/picasso-form-label",
+  "version": "1.0.1",
+  "description": "Toptal UI components library - Form Label",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist-package/src/index.js",
+  "module": "./dist-package/src/index.js",
+  "scripts": {
+    "build:package": "tsc -b tsconfig.json",
+    "prepublishOnly": "yarn build:package"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/toptal/picasso.git"
+  },
+  "author": "Toptal",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/toptal/picasso/issues"
+  },
+  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
+  "dependencies": {
+    "@toptal/picasso-form-layout": "1.0.1",
+    "@toptal/picasso-shared": "15.0.0",
+    "@toptal/picasso-utils": "3.0.0",
+    "ap-style-title-case": "^1.1.2"
+  },
+  "sideEffects": [
+    "**/styles.ts",
+    "**/styles.js"
+  ],
+  "peerDependencies": {
+    "@material-ui/core": "4.12.4",
+    "@toptal/picasso-tailwind": ">=2.7",
+    "@toptal/picasso-tailwind-merge": "^2.0.0",
+    "react": ">=16.12.0 < 19.0.0"
+  },
+  "exports": {
+    ".": "./dist-package/src/index.js",
+    "./src/FormLabel/story": "./src/FormLabel/story"
+  },
+  "devDependencies": {
+    "@toptal/picasso-tailwind-merge": "2.0.2",
+    "@toptal/picasso-test-utils": "1.1.1"
+  },
+  "files": [
+    "dist-package/**",
+    "!dist-package/tsconfig.tsbuildinfo",
+    "src"
+  ]
+}

package/src/FormControlLabel/FormControlLabel.tsx

@@ -0,0 +1,84 @@
+import type { ReactElement, ReactNode, LabelHTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+import type { FormControlLabelProps } from '@material-ui/core/FormControlLabel'
+import type { StandardProps, TextLabelProps } from '@toptal/picasso-shared'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+import { useFieldsLayoutContext } from '@toptal/picasso-form-layout'
+
+import type { RequiredDecoration } from '../FormLabel'
+import { FormLabel } from '../FormLabel'
+
+export type FormControlLabelAttributesType =
+  LabelHTMLAttributes<HTMLLabelElement> &
+    Pick<FormControlLabelProps, 'onChange'>
+
+export interface Props
+  extends StandardProps,
+    TextLabelProps,
+    FormControlLabelAttributesType {
+  /** A control element. For instance, it can be be a Radio or a Checkbox */
+  control: ReactElement
+  /** The text to be used in an enclosing label element */
+  label?: ReactNode
+  /** Shows whether label is disabled or not */
+  disabled?: boolean
+  /** Whether to show asterisk or (optional) postfix as a 'required' decoration */
+  requiredDecoration?: RequiredDecoration
+  classes?: {
+    root?: string
+    label?: string
+  }
+}
+
+const FormControlLabel = forwardRef<HTMLLabelElement, Props>(
+  function FormControlLabel(props, ref) {
+    const {
+      control,
+      label,
+      className,
+      style,
+      disabled,
+      requiredDecoration,
+      titleCase,
+      classes,
+      ...rest
+    } = props
+
+    const { layout } = useFieldsLayoutContext()
+    const isHorizontalLayout = layout === 'horizontal'
+
+    return (
+      <label
+        {...rest}
+        ref={ref}
+        className={twMerge(
+          'inline-flex items-center',
+          'max-w-full',
+          'align-middle',
+          '-webkit-tap-highlight-color-transparent',
+          'mx-0',
+          disabled ? 'cursor-default' : 'cursor-pointer',
+          isHorizontalLayout && 'col-start-1 col-span-2',
+          classes?.root,
+          className
+        )}
+        style={style}
+      >
+        {React.cloneElement(control, { disabled })}
+        <FormLabel
+          className={twMerge(disabled && 'pointer-events-auto', classes?.label)}
+          as='span'
+          requiredDecoration={requiredDecoration}
+          disabled={disabled}
+          titleCase={titleCase}
+        >
+          {label}
+        </FormLabel>
+      </label>
+    )
+  }
+)
+
+FormControlLabel.displayName = 'FormControlLabel'
+
+export default FormControlLabel

package/src/FormControlLabel/index.ts

@@ -0,0 +1,6 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+
+import type { Props } from './FormControlLabel'
+
+export { default as FormControlLabel } from './FormControlLabel'
+export type FormControlLabelProps = OmitInternalProps<Props>

package/src/FormLabel/FormLabel.tsx

@@ -0,0 +1,106 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import React, { forwardRef } from 'react'
+import type {
+  BaseProps,
+  TextLabelProps,
+  SizeType,
+} from '@toptal/picasso-shared'
+import { useTitleCase } from '@toptal/picasso-shared'
+import { toTitleCase } from '@toptal/picasso-utils'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+import { useFieldsLayoutContext } from '@toptal/picasso-form-layout'
+
+import { classesBySize, getRootClasses } from './styles'
+
+type ComponentType = 'label' | 'span'
+export type RequiredDecoration = 'asterisk' | 'optional'
+
+export type Size = SizeType<'medium' | 'large'>
+export type Alignment = 'top' | 'middle'
+
+export interface Props
+  extends BaseProps,
+    TextLabelProps,
+    HTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
+  /** Content of the label */
+  children: ReactNode
+  /** Whether to show asterisk or (optional) postfix as a 'required' decoration */
+  requiredDecoration?: RequiredDecoration
+  /** Is this label for disabled input or not */
+  disabled?: boolean
+  /** Specifies an id of the input */
+  htmlFor?: string
+  /** Whether label should act as inline element `display: inline-block` */
+  inline?: boolean
+  /** Component used for the root node */
+  as?: ComponentType
+  /** Component size */
+  size?: Size
+  /** Whether label should be aligned to top of the container or not */
+  alignment?: Alignment
+  /** Label's end adornment */
+  labelEndAdornment?: ReactNode
+}
+
+export const FormLabel = forwardRef<HTMLLabelElement, Props>(function FormLabel(
+  props,
+  ref
+) {
+  const {
+    children,
+    disabled,
+    htmlFor,
+    className,
+    style,
+    inline,
+    as: Component = 'label',
+    titleCase: propsTitleCase,
+    requiredDecoration,
+    size = 'medium',
+    alignment = 'middle',
+    labelEndAdornment,
+    ...rest
+  } = props
+  const isInline = inline || Component === 'span'
+  const titleCase = useTitleCase(propsTitleCase)
+  const { layout } = useFieldsLayoutContext()
+
+  return (
+    <Component
+      {...rest}
+      ref={ref}
+      htmlFor={htmlFor}
+      className={twMerge(
+        getRootClasses({ disabled, isInline, layout, alignment }),
+        className
+      )}
+      style={style}
+    >
+      <span
+        className={
+          isInline ? 'align-top text-[0.8125rem]' : classesBySize[size]
+        }
+      >
+        {requiredDecoration === 'asterisk' && (
+          <span className='align-top text-red-500 mr-[0.3125em]'>*</span>
+        )}
+
+        {titleCase ? toTitleCase(children) : children}
+
+        {requiredDecoration === 'optional' && ' (optional)'}
+
+        {labelEndAdornment}
+      </span>
+    </Component>
+  )
+})
+
+FormLabel.defaultProps = {
+  as: 'label',
+  inline: false,
+  size: 'medium',
+}
+
+FormLabel.displayName = 'FormLabel'
+
+export default FormLabel

package/src/FormLabel/__snapshots__/test.tsx.snap

@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormLabel disabled 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <form
+      class=""
+    >
+      <div
+        class="text-[1rem] [&+&]:mt-4"
+        data-field-has-error="false"
+      >
+        <label
+          class="block leading-[1em] mb-[0.5em] text-graphite"
+        >
+          <span
+            class="text-[0.875rem]"
+          >
+            Label
+          </span>
+        </label>
+      </div>
+    </form>
+  </div>
+</div>
+`;
+
+exports[`FormLabel renders 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <form
+      class=""
+    >
+      <div
+        class="text-[1rem] [&+&]:mt-4"
+        data-field-has-error="false"
+      >
+        <label
+          class="block leading-[1em] mb-[0.5em] text-graphite"
+        >
+          <span
+            class="text-[0.875rem]"
+          >
+            Label
+          </span>
+        </label>
+      </div>
+    </form>
+  </div>
+</div>
+`;
+
+exports[`FormLabel required with (optional) 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <form
+      class=""
+    >
+      <div
+        class="text-[1rem] [&+&]:mt-4"
+        data-field-has-error="false"
+      >
+        <label
+          class="block leading-[1em] mb-[0.5em] text-graphite"
+        >
+          <span
+            class="text-[0.875rem]"
+          >
+            Label
+             (optional)
+          </span>
+        </label>
+      </div>
+    </form>
+  </div>
+</div>
+`;
+
+exports[`FormLabel required with (optional) and with \`labelEndAdornment\` 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <form
+      class=""
+    >
+      <div
+        class="text-[1rem] [&+&]:mt-4"
+        data-field-has-error="false"
+      >
+        <label
+          class="block leading-[1em] mb-[0.5em] text-graphite"
+        >
+          <span
+            class="text-[0.875rem]"
+          >
+            Label
+             (optional)
+            <span>
+              label end adornment
+            </span>
+          </span>
+        </label>
+      </div>
+    </form>
+  </div>
+</div>
+`;
+
+exports[`FormLabel required with asterisk 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <form
+      class=""
+    >
+      <div
+        class="text-[1rem] [&+&]:mt-4"
+        data-field-has-error="false"
+      >
+        <label
+          class="block leading-[1em] mb-[0.5em] text-graphite"
+        >
+          <span
+            class="text-[0.875rem]"
+          >
+            <span
+              class="align-top text-red mr-[0.3125em]"
+            >
+              *
+            </span>
+            Label
+          </span>
+        </label>
+      </div>
+    </form>
+  </div>
+</div>
+`;

package/src/FormLabel/index.ts

@@ -0,0 +1,7 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+
+import type { Props } from './FormLabel'
+
+export { default as FormLabel } from './FormLabel'
+export type { RequiredDecoration } from './FormLabel'
+export type FormLabelProps = OmitInternalProps<Props>

package/src/FormLabel/story/index.jsx

@@ -0,0 +1,6 @@
+import { FormLabel } from '../FormLabel'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const componentDocs = PicassoBook.createComponentDocs(FormLabel, 'Form.Label')
+
+export default { componentDocs }

package/src/FormLabel/styles.ts

@@ -0,0 +1,66 @@
+import { twJoin } from '@toptal/picasso-tailwind-merge'
+import type { FieldLayout } from '@toptal/picasso-form-layout'
+
+import type { Alignment, Size } from './FormLabel'
+
+export const classesBySize: Record<Size, string> = {
+  medium: 'text-[0.875rem]',
+  large: 'text-[1rem]',
+}
+
+type GetRootClassesOptions = {
+  disabled?: boolean
+  isInline: boolean
+  layout: FieldLayout
+  alignment: Alignment
+}
+
+const getDisplayClasses = ({
+  isInline,
+  layout,
+  alignment,
+}: Partial<GetRootClassesOptions>) => {
+  if (layout === 'horizontal' && alignment === 'top') {
+    return 'flex items-start'
+  }
+
+  if (layout === 'horizontal') {
+    return 'flex items-center'
+  }
+
+  if (isInline) {
+    return 'inline-block'
+  }
+
+  return 'block'
+}
+
+const getMarginClasses = ({
+  layout,
+  isInline,
+}: Partial<GetRootClassesOptions>) =>
+  layout === 'horizontal' || isInline ? 'mb-0' : 'mb-[0.5em]'
+
+const getPaddingsClasses = ({
+  layout,
+  alignment,
+}: Partial<GetRootClassesOptions>) =>
+  layout === 'horizontal' && alignment === 'top' ? 'pt-2' : ''
+
+const getColorClasses = ({ disabled }: Partial<GetRootClassesOptions>) =>
+  disabled ? 'text-graphite-700/[0.48]' : 'text-graphite-700'
+
+export const getRootClasses = ({
+  disabled,
+  isInline,
+  layout,
+  alignment,
+}: GetRootClassesOptions) => {
+  return twJoin(
+    getDisplayClasses({ isInline, layout, alignment }),
+    'leading-[1em]',
+    getMarginClasses({ layout, isInline }),
+    getColorClasses({ disabled }),
+    getPaddingsClasses({ layout, alignment })
+  )
+}

package/src/FormLabel/test.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import { render } from '@toptal/picasso-test-utils'
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+import * as titleCaseModule from 'ap-style-title-case'
+import { FormCompound as Form } from '@toptal/picasso-form'
+
+import type { Props } from './FormLabel'
+import { FormLabel } from './FormLabel'
+
+jest.mock('ap-style-title-case')
+
+const TestFormLabel = ({
+  children,
+  requiredDecoration,
+  disabled,
+  titleCase,
+  htmlFor,
+  inline,
+  labelEndAdornment,
+}: OmitInternalProps<Props>) => {
+  return (
+    <Form>
+      <Form.Field>
+        <FormLabel
+          requiredDecoration={requiredDecoration}
+          disabled={disabled}
+          titleCase={titleCase}
+          htmlFor={htmlFor}
+          inline={inline}
+          labelEndAdornment={labelEndAdornment}
+        >
+          {children}
+        </FormLabel>
+      </Form.Field>
+    </Form>
+  )
+}
+
+let spiedOnTitleCase: jest.SpyInstance
+
+describe('FormLabel', () => {
+  beforeEach(() => {
+    spiedOnTitleCase = jest.spyOn(titleCaseModule, 'default')
+  })
+  afterEach(() => {
+    spiedOnTitleCase.mockReset()
+  })
+
+  it('renders', () => {
+    const { container } = render(<TestFormLabel>Label</TestFormLabel>)
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('disabled', () => {
+    const { container } = render(<TestFormLabel disabled>Label</TestFormLabel>)
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('required with (optional)', () => {
+    const { container } = render(
+      <TestFormLabel requiredDecoration='optional'>Label</TestFormLabel>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('required with (optional) and with `labelEndAdornment`', () => {
+    const { container } = render(
+      <TestFormLabel
+        labelEndAdornment={<span>label end adornment</span>}
+        requiredDecoration='optional'
+      >
+        Label
+      </TestFormLabel>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('required with asterisk', () => {
+    const { container } = render(
+      <TestFormLabel requiredDecoration='asterisk'>Label</TestFormLabel>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should transform text to title case when Picasso titleCase property is true', () => {
+    const TEXT_CONTENT = 'Test kb8'
+
+    render(<TestFormLabel>{TEXT_CONTENT}</TestFormLabel>, undefined, {
+      titleCase: true,
+    })
+
+    expect(spiedOnTitleCase).toHaveBeenCalledWith(TEXT_CONTENT)
+  })
+
+  it('should not transform text to title case when Picasso titleCase property is true but the component property overrides it', () => {
+    render(
+      <TestFormLabel titleCase={false}>
+        some text with-the-edge case for TEST
+      </TestFormLabel>,
+      undefined,
+      { titleCase: true }
+    )
+
+    expect(spiedOnTitleCase).toHaveBeenCalledTimes(0)
+  })
+})

package/src/index.ts

@@ -0,0 +1,5 @@
+export type { FormControlLabelProps } from './FormControlLabel'
+export { FormControlLabel } from './FormControlLabel'
+
+export type { FormLabelProps, RequiredDecoration } from './FormLabel'
+export { FormLabel } from './FormLabel'