@toptal/picasso-form 4.1.2 → 4.1.3

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

@@ -13,6 +13,10 @@ export interface Props extends StandardProps, TextLabelProps, FormControlLabelAt
     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;

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

@@ -1 +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;AAG/E,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAG3E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAKtD,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;CACxC;AAMD,QAAA,MAAM,gBAAgB,gFA+CrB,CAAA;AAID,eAAe,gBAAgB,CAAA"}
+{"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;AAG3E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAItD,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

@@ -10,27 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
-import styles from './styles';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { FormCompound as Form } from '../FormCompound';
 import { useFieldsLayoutContext } from '../FieldsLayout';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoFormControlLabel',
-});
 const FormControlLabel = forwardRef(function FormControlLabel(props, ref) {
-    const { control, label, className, style, disabled, requiredDecoration, titleCase, 
-    // Avoid passing external classes inside the rest props
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    classes: externalClasses } = props, rest = __rest(props, ["control", "label", "className", "style", "disabled", "requiredDecoration", "titleCase", "classes"]);
-    const classes = useStyles(props);
+    const { control, label, className, style, disabled, requiredDecoration, titleCase, classes } = props, rest = __rest(props, ["control", "label", "className", "style", "disabled", "requiredDecoration", "titleCase", "classes"]);
     const { layout } = useFieldsLayoutContext();
-    return (React.createElement("label", Object.assign({}, rest, { ref: ref, className: cx(classes.root, {
-            [classes.disabled]: disabled,
-            [classes.horizontalLayout]: layout === 'horizontal',
-        }, className), style: style }),
+    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(Form.Label, { className: classes.label, as: 'span', requiredDecoration: requiredDecoration, disabled: disabled, titleCase: titleCase }, label)));
+        React.createElement(Form.Label, { 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;

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

@@ -1 +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,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,YAAY,IAAI,IAAI,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AAoBxD,MAAM,SAAS,GAAG,UAAU,CAAe,MAAM,EAAE;IACjD,IAAI,EAAE,yBAAyB;CAChC,CAAC,CAAA;AAEF,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;IACT,uDAAuD;IACvD,6DAA6D;IAC7D,OAAO,EAAE,eAAe,KAEtB,KAAK,EADJ,IAAI,UACL,KAAK,EAZH,oGAYL,CAAQ,CAAA;IAET,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAEhC,MAAM,EAAE,MAAM,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAE3C,OAAO,CACL,+CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,OAAO,CAAC,IAAI,EACZ;YACE,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC5B,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE,MAAM,KAAK,YAAY;SACpD,EACD,SAAS,CACV,EACD,KAAK,EAAE,KAAK;QAEX,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,CAAC;QAC1C,oBAAC,IAAI,CAAC,KAAK,IACT,SAAS,EAAE,OAAO,CAAC,KAAK,EACxB,EAAE,EAAC,MAAM,EACT,kBAAkB,EAAE,kBAAkB,EACtC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,IAEnB,KAAK,CACK,CACP,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEjD,eAAe,gBAAgB,CAAA"}
+{"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;AAGxD,OAAO,EAAE,YAAY,IAAI,IAAI,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AAwBxD,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,IAAI,CAAC,KAAK,IACT,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,CACK,CACP,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEjD,eAAe,gBAAgB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-form",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "description": "Toptal UI components library - Form",
   "publishConfig": {
     "access": "public"

package/src/FormControlLabel/FormControlLabel.tsx

@@ -1,13 +1,10 @@
 import type { ReactElement, ReactNode, LabelHTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 import type { FormControlLabelProps } from '@material-ui/core/FormControlLabel'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { StandardProps, TextLabelProps } from '@toptal/picasso-shared'
-import cx from 'classnames'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 import type { RequiredDecoration } from '../FormLabel'
-import styles from './styles'
 import { FormCompound as Form } from '../FormCompound'
 import { useFieldsLayoutContext } from '../FieldsLayout'
 
@@ -27,12 +24,12 @@ export interface Props
   disabled?: boolean
   /** Whether to show asterisk or (optional) postfix as a 'required' decoration */
   requiredDecoration?: RequiredDecoration
+  classes?: {
+    root?: string
+    label?: string
+  }
 }
 
-const useStyles = makeStyles<Theme, Props>(styles, {
-  name: 'PicassoFormControlLabel',
-})
-
 const FormControlLabel = forwardRef<HTMLLabelElement, Props>(
   function FormControlLabel(props, ref) {
     const {
@@ -43,33 +40,33 @@ const FormControlLabel = forwardRef<HTMLLabelElement, Props>(
       disabled,
       requiredDecoration,
       titleCase,
-      // Avoid passing external classes inside the rest props
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      classes: externalClasses,
+      classes,
       ...rest
     } = props
 
-    const classes = useStyles(props)
-
     const { layout } = useFieldsLayoutContext()
+    const isHorizontalLayout = layout === 'horizontal'
 
     return (
       <label
         {...rest}
         ref={ref}
-        className={cx(
-          classes.root,
-          {
-            [classes.disabled]: disabled,
-            [classes.horizontalLayout]: layout === 'horizontal',
-          },
+        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 })}
         <Form.Label
-          className={classes.label}
+          className={twMerge(disabled && 'pointer-events-auto', classes?.label)}
           as='span'
           requiredDecoration={requiredDecoration}
           disabled={disabled}

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

@@ -1,3 +0,0 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "label" | "disabled" | "root" | "horizontalLayout">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/FormControlLabel/styles.ts"],"names":[],"mappings":";AA4BA,wBA0BI"}

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

@@ -1,50 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { PicassoProvider } from '@toptal/picasso-provider';
-PicassoProvider.override(({ palette, typography }) => ({
-    MuiFormControlLabel: {
-        root: {
-            marginLeft: 0,
-            marginRight: 0,
-        },
-        label: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            fontSize: '1em',
-            color: palette.text.primary,
-            lineHeight: '1.5em',
-            fontWeight: typography.fontWeights.regular,
-            cursor: 'pointer',
-            userSelect: 'none',
-            '&$disabled': {
-                pointerEvents: 'auto',
-            },
-        },
-    },
-}));
-export default () => createStyles({
-    root: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        cursor: 'pointer',
-        // For ellipsis
-        maxWidth: '100%',
-        // For correct alignment with the text.
-        verticalAlign: 'middle',
-        WebkitTapHighlightColor: 'transparent',
-        '&$disabled': {
-            cursor: 'default',
-        },
-        marginLeft: 0,
-        marginRight: 0,
-    },
-    label: {
-        '&$disabled': {
-            pointerEvents: 'auto',
-        },
-    },
-    disabled: {},
-    horizontalLayout: {
-        gridColumn: '1 / span 2',
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/FormControlLabel/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAE,UAAU,EAAS,EAAE,EAAE,CAAC,CAAC;IAC5D,mBAAmB,EAAE;QACnB,IAAI,EAAE;YACJ,UAAU,EAAE,CAAC;YACb,WAAW,EAAE,CAAC;SACf;QACD,KAAK,EAAE;YACL,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,QAAQ;YAEpB,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;YAC3B,UAAU,EAAE,OAAO;YACnB,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,OAAO;YAC1C,MAAM,EAAE,SAAS;YACjB,UAAU,EAAE,MAAM;YAElB,YAAY,EAAE;gBACZ,aAAa,EAAE,MAAM;aACtB;SACF;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,SAAS;QACjB,eAAe;QACf,QAAQ,EAAE,MAAM;QAChB,uCAAuC;QACvC,aAAa,EAAE,QAAQ;QACvB,uBAAuB,EAAE,aAAa;QACtC,YAAY,EAAE;YACZ,MAAM,EAAE,SAAS;SAClB;QACD,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,CAAC;KACf;IACD,KAAK,EAAE;QACL,YAAY,EAAE;YACZ,aAAa,EAAE,MAAM;SACtB;KACF;IACD,QAAQ,EAAE,EAAE;IACZ,gBAAgB,EAAE;QAChB,UAAU,EAAE,YAAY;KACzB;CACF,CAAC,CAAA"}

package/src/FormControlLabel/styles.ts

@@ -1,55 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import { PicassoProvider } from '@toptal/picasso-provider'
-
-PicassoProvider.override(({ palette, typography }: Theme) => ({
-  MuiFormControlLabel: {
-    root: {
-      marginLeft: 0,
-      marginRight: 0,
-    },
-    label: {
-      display: 'inline-flex',
-      alignItems: 'center',
-
-      fontSize: '1em',
-      color: palette.text.primary,
-      lineHeight: '1.5em',
-      fontWeight: typography.fontWeights.regular,
-      cursor: 'pointer',
-      userSelect: 'none',
-
-      '&$disabled': {
-        pointerEvents: 'auto',
-      },
-    },
-  },
-}))
-
-export default () =>
-  createStyles({
-    root: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      cursor: 'pointer',
-      // For ellipsis
-      maxWidth: '100%',
-      // For correct alignment with the text.
-      verticalAlign: 'middle',
-      WebkitTapHighlightColor: 'transparent',
-      '&$disabled': {
-        cursor: 'default',
-      },
-      marginLeft: 0,
-      marginRight: 0,
-    },
-    label: {
-      '&$disabled': {
-        pointerEvents: 'auto',
-      },
-    },
-    disabled: {},
-    horizontalLayout: {
-      gridColumn: '1 / span 2',
-    },
-  })