@toptal/picasso-checkbox 2.0.7 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist-package/src/CheckboxGroup/CheckboxGroup.d.ts +2 -3
  2. package/dist-package/src/CheckboxGroup/CheckboxGroup.d.ts.map +1 -1
  3. package/dist-package/src/CheckboxGroup/CheckboxGroup.js +5 -13
  4. package/dist-package/src/CheckboxGroup/CheckboxGroup.js.map +1 -1
  5. package/package.json +8 -7
  6. package/src/Checkbox/__snapshots__/test.tsx.snap +20 -20
  7. package/src/CheckboxGroup/CheckboxGroup.tsx +13 -20
  8. package/dist-package/src/CheckboxGroup/styles.d.ts +0 -3
  9. package/dist-package/src/CheckboxGroup/styles.d.ts.map +0 -1
  10. package/dist-package/src/CheckboxGroup/styles.js +0 -11
  11. package/dist-package/src/CheckboxGroup/styles.js.map +0 -1
  12. package/src/CheckboxGroup/styles.ts +0 -13
package/dist-package/src/CheckboxGroup/CheckboxGroup.d.ts CHANGED
@@ -1,8 +1,7 @@
1
- /// <reference types="react" />
2
- import type { FormGroupProps } from '@material-ui/core';
1
+ import type { HTMLAttributes } from 'react';
3
2
  import type { GridSizeProps, GridProps } from '@toptal/picasso-grid';
4
3
  declare type GridSpacing = GridProps['spacing'];
5
- export interface Props extends FormGroupProps, GridSizeProps {
4
+ export interface Props extends HTMLAttributes<HTMLDivElement>, GridSizeProps {
6
5
  /** Align checkboxes horizontally */
7
6
  horizontal?: boolean;
8
7
  /** Defines amount of space between checkbox components (in px) */
package/dist-package/src/CheckboxGroup/CheckboxGroup.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAKvD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAKpE,aAAK,WAAW,GAAG,SAAS,CAAC,SAAS,CAAC,CAAA;AAEvC,MAAM,WAAW,KAAM,SAAQ,cAAc,EAAE,aAAa;IAC1D,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kEAAkE;IAClE,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB;AAMD,QAAA,MAAM,aAAa;YAAW,KAAK;;;;CAsClC,CAAA;AAMD,eAAe,aAAa,CAAA"}
1
+ {"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAIpE,aAAK,WAAW,GAAG,SAAS,CAAC,SAAS,CAAC,CAAA;AAEvC,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,cAAc,CAAC,EAAE,aAAa;IAC1E,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kEAAkE;IAClE,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB;AAID,QAAA,MAAM,aAAa;YAAW,KAAK;;;;CAsClC,CAAA;AAMD,eAAe,aAAa,CAAA"}
package/dist-package/src/CheckboxGroup/CheckboxGroup.js CHANGED
@@ -9,25 +9,17 @@ var __rest = (this && this.__rest) || function (s, e) {
9
9
  }
10
10
  return t;
11
11
  };
12
- /* eslint-disable react/no-array-index-key */
13
12
  import React from 'react';
14
- import { FormGroup } from '@material-ui/core';
15
- import { makeStyles, useTheme } from '@material-ui/core/styles';
16
- import cx from 'classnames';
17
13
  import { GridCompound as Grid } from '@toptal/picasso-grid';
18
- import styles from './styles';
19
- const useStyles = makeStyles(styles, {
20
- name: 'PicassoCheckboxGroup',
21
- });
14
+ import { twMerge } from '@toptal/picasso-tailwind-merge';
15
+ const HORIZONTAL_SPACING = 16;
22
16
  const CheckboxGroup = (props) => {
23
17
  const { horizontal, spacing, xs, sm, md, lg, xl, className } = props, rest = __rest(props, ["horizontal", "spacing", "xs", "sm", "md", "lg", "xl", "className"]);
24
- const classes = useStyles();
25
- const { spacing: themeSpacing } = useTheme();
26
18
  const direction = horizontal ? 'row' : 'column';
27
- const gridSpacing = (spacing !== null && spacing !== void 0 ? spacing : horizontal) ? themeSpacing(2) : 0;
19
+ const gridSpacing = (spacing !== null && spacing !== void 0 ? spacing : horizontal) ? HORIZONTAL_SPACING : 0;
28
20
  const children = React.Children.toArray(rest.children);
29
- return (React.createElement(FormGroup, Object.assign({}, rest, { classes: classes, className: cx(classes.root, className) }),
30
- React.createElement(Grid, { direction: direction, spacing: gridSpacing, className: 'mt-0 mb-0' }, children.map((child, index) => (React.createElement(Grid.Item, { key: index, className: 'leading-none [&&]:pt-0 [&&]:pb-0', xs: xs, sm: sm, md: md, lg: lg, xl: xl }, child))))));
21
+ return (React.createElement("div", Object.assign({}, rest, { className: twMerge('flex flex-col flex-wrap -mr-[0.5em] -mb-[0.5em]', horizontal && 'flex-row', className) }),
22
+ React.createElement(Grid, { direction: direction, spacing: gridSpacing, className: 'mt-0 mb-0' }, children.map((child, index) => (React.createElement(Grid.Item, { key: index, className: 'leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]', xs: xs, sm: sm, md: md, lg: lg, xl: xl }, child))))));
31
23
  };
32
24
  CheckboxGroup.defaultProps = {
33
25
  horizontal: false,
package/dist-package/src/CheckboxGroup/CheckboxGroup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,6CAA6C;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAC/D,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,YAAY,IAAI,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3D,OAAO,MAAM,MAAM,UAAU,CAAA;AAW7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,sBAAsB;CAC7B,CAAC,CAAA;AAEF,MAAM,aAAa,GAAG,CAAC,KAAY,EAAE,EAAE;IACrC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAvE,oEAA+D,CAAQ,CAAA;IAE7E,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE5C,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAA;IAC/C,MAAM,WAAW,GAAG,CAAA,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,UAAU,EAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAE/D,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAEtD,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC;QAEtC,oBAAC,IAAI,IACH,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,WAA0B,EACnC,SAAS,EAAC,WAAW,IAEpB,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,oBAAC,IAAI,CAAC,IAAI,IACR,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,kCAAkC,EAC5C,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,IAEL,KAAK,CACI,CACb,CAAC,CACG,CACG,CACb,CAAA;AACH,CAAC,CAAA;AAED,aAAa,CAAC,YAAY,GAAG;IAC3B,UAAU,EAAE,KAAK;CAClB,CAAA;AAED,eAAe,aAAa,CAAA"}
1
+ {"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,YAAY,IAAI,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAWxD,MAAM,kBAAkB,GAAG,EAAE,CAAA;AAE7B,MAAM,aAAa,GAAG,CAAC,KAAY,EAAE,EAAE;IACrC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAvE,oEAA+D,CAAQ,CAAA;IAE7E,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAA;IAC/C,MAAM,WAAW,GAAG,CAAA,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,UAAU,EAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAA;IAElE,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAEtD,OAAO,CACL,6CACM,IAAI,IACR,SAAS,EAAE,OAAO,CAChB,iDAAiD,EACjD,UAAU,IAAI,UAAU,EACxB,SAAS,CACV;QAED,oBAAC,IAAI,IACH,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,WAA0B,EACnC,SAAS,EAAC,WAAW,IAEpB,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,oBAAC,IAAI,CAAC,IAAI,IACR,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,yDAAyD,EACnE,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,IAEL,KAAK,CACI,CACb,CAAC,CACG,CACH,CACP,CAAA;AACH,CAAC,CAAA;AAED,aAAa,CAAC,YAAY,GAAG;IAC3B,UAAU,EAAE,KAAK;CAClB,CAAA;AAED,eAAe,aAAa,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-checkbox",
3
- "version": "2.0.7",
3
+ "version": "3.0.0",
4
4
  "description": "Toptal UI components library - Checkbox",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -22,13 +22,12 @@
22
22
  },
23
23
  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
24
24
  "dependencies": {
25
- "@toptal/picasso-container": "1.0.3",
26
- "@toptal/picasso-form": "3.0.7",
27
- "@toptal/picasso-grid": "3.0.6",
25
+ "@toptal/picasso-container": "2.0.0",
26
+ "@toptal/picasso-form": "4.0.0",
27
+ "@toptal/picasso-grid": "4.0.0",
28
28
  "@toptal/picasso-shared": "15.0.0",
29
29
  "@toptal/picasso-utils": "1.0.3",
30
30
  "ap-style-title-case": "^1.1.2",
31
- "tailwind-merge": "^2.2.2",
32
31
  "classnames": "^2.5.1"
33
32
  },
34
33
  "sideEffects": [
@@ -38,11 +37,13 @@
38
37
  "peerDependencies": {
39
38
  "@material-ui/core": "4.12.4",
40
39
  "@toptal/picasso-provider": "*",
40
+ "@toptal/picasso-tailwind-merge": "^1.0.1",
41
41
  "react": ">=16.12.0 < 19.0.0",
42
- "@toptal/picasso-tailwind": ">=2.4.0"
42
+ "@toptal/picasso-tailwind": ">=2.7"
43
43
  },
44
44
  "devDependencies": {
45
- "@toptal/picasso-provider": "4.2.1",
45
+ "@toptal/picasso-provider": "5.0.0",
46
+ "@toptal/picasso-tailwind-merge": "1.2.0",
46
47
  "@toptal/picasso-test-utils": "1.1.1",
47
48
  "styled-components": "^6.1.1"
48
49
  },
package/src/Checkbox/__snapshots__/test.tsx.snap CHANGED
@@ -6,19 +6,19 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
6
6
  class="Picasso-root"
7
7
  >
8
8
  <div
9
- class="MuiFormGroup-root PicassoCheckboxGroup-root PicassoCheckboxGroup-root"
9
+ class="flex flex-wrap -mr -mb flex-row"
10
10
  >
11
11
  <div
12
12
  class="box-border flex flex-row flex-wrap items-start justify-start w-[calc(100%+16px)] -m mt-0 mb-0"
13
13
  >
14
14
  <div
15
- class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
15
+ class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
16
16
  >
17
17
  <label
18
18
  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
19
19
  >
20
20
  <span
21
- class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
21
+ class="inline-flex PicassoCheckbox-checkboxWrapper"
22
22
  >
23
23
  <span
24
24
  aria-disabled="false"
@@ -51,13 +51,13 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
51
51
  </label>
52
52
  </div>
53
53
  <div
54
- class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
54
+ class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
55
55
  >
56
56
  <label
57
57
  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
58
58
  >
59
59
  <span
60
- class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
60
+ class="inline-flex PicassoCheckbox-checkboxWrapper"
61
61
  >
62
62
  <span
63
63
  aria-disabled="false"
@@ -90,13 +90,13 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
90
90
  </label>
91
91
  </div>
92
92
  <div
93
- class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
93
+ class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
94
94
  >
95
95
  <label
96
96
  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
97
97
  >
98
98
  <span
99
- class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
99
+ class="inline-flex PicassoCheckbox-checkboxWrapper"
100
100
  >
101
101
  <span
102
102
  aria-disabled="false"
@@ -129,13 +129,13 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
129
129
  </label>
130
130
  </div>
131
131
  <div
132
- class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
132
+ class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
133
133
  >
134
134
  <label
135
135
  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
136
136
  >
137
137
  <span
138
- class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
138
+ class="inline-flex PicassoCheckbox-checkboxWrapper"
139
139
  >
140
140
  <span
141
141
  aria-disabled="false"
@@ -168,13 +168,13 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
168
168
  </label>
169
169
  </div>
170
170
  <div
171
- class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
171
+ class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
172
172
  >
173
173
  <label
174
174
  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
175
175
  >
176
176
  <span
177
- class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
177
+ class="inline-flex PicassoCheckbox-checkboxWrapper"
178
178
  >
179
179
  <span
180
180
  aria-disabled="false"
@@ -207,13 +207,13 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
207
207
  </label>
208
208
  </div>
209
209
  <div
210
- class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none [&&]:pt-0 [&&]:pb-0"
210
+ class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
211
211
  >
212
212
  <label
213
213
  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
214
214
  >
215
215
  <span
216
- class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
216
+ class="inline-flex PicassoCheckbox-checkboxWrapper"
217
217
  >
218
218
  <span
219
219
  aria-disabled="false"
@@ -260,7 +260,7 @@ exports[`Checkbox checkbox interaction should render checked checkbox 1`] = `
260
260
  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
261
261
  >
262
262
  <span
263
- class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
263
+ class="inline-flex PicassoCheckbox-checkboxWrapper"
264
264
  >
265
265
  <span
266
266
  aria-disabled="false"
@@ -301,7 +301,7 @@ exports[`Checkbox renders default checkbox without label 1`] = `
301
301
  class="Picasso-root"
302
302
  >
303
303
  <span
304
- class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
304
+ class="inline-flex PicassoCheckbox-checkboxWrapper"
305
305
  >
306
306
  <span
307
307
  aria-disabled="false"
@@ -332,7 +332,7 @@ exports[`Checkbox renders disabled state 1`] = `
332
332
  class="Picasso-root"
333
333
  >
334
334
  <span
335
- class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
335
+ class="inline-flex PicassoCheckbox-checkboxWrapper"
336
336
  >
337
337
  <span
338
338
  aria-disabled="true"
@@ -365,7 +365,7 @@ exports[`Checkbox renders indeterminate state 1`] = `
365
365
  class="Picasso-root"
366
366
  >
367
367
  <span
368
- class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
368
+ class="inline-flex PicassoCheckbox-checkboxWrapper"
369
369
  >
370
370
  <span
371
371
  aria-disabled="false"
@@ -396,7 +396,7 @@ exports[`Checkbox renders with (optional) 1`] = `
396
396
  class="Picasso-root"
397
397
  >
398
398
  <span
399
- class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
399
+ class="inline-flex PicassoCheckbox-checkboxWrapper"
400
400
  >
401
401
  <span
402
402
  aria-disabled="false"
@@ -427,7 +427,7 @@ exports[`Checkbox renders with asterisk 1`] = `
427
427
  class="Picasso-root"
428
428
  >
429
429
  <span
430
- class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
430
+ class="inline-flex PicassoCheckbox-checkboxWrapper"
431
431
  >
432
432
  <span
433
433
  aria-disabled="false"
@@ -461,7 +461,7 @@ exports[`Checkbox should render default checkbox with label 1`] = `
461
461
  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
462
462
  >
463
463
  <span
464
- class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
464
+ class="inline-flex PicassoCheckbox-checkboxWrapper"
465
465
  >
466
466
  <span
467
467
  aria-disabled="false"
package/src/CheckboxGroup/CheckboxGroup.tsx CHANGED
@@ -1,44 +1,37 @@
1
1
  /* eslint-disable react/no-array-index-key */
2
+ import type { HTMLAttributes } from 'react'
2
3
  import React from 'react'
3
- import type { FormGroupProps } from '@material-ui/core'
4
- import { FormGroup } from '@material-ui/core'
5
- import type { Theme } from '@material-ui/core/styles'
6
- import { makeStyles, useTheme } from '@material-ui/core/styles'
7
- import cx from 'classnames'
8
4
  import type { GridSizeProps, GridProps } from '@toptal/picasso-grid'
9
5
  import { GridCompound as Grid } from '@toptal/picasso-grid'
10
-
11
- import styles from './styles'
6
+ import { twMerge } from '@toptal/picasso-tailwind-merge'
12
7
 
13
8
  type GridSpacing = GridProps['spacing']
14
9
 
15
- export interface Props extends FormGroupProps, GridSizeProps {
10
+ export interface Props extends HTMLAttributes<HTMLDivElement>, GridSizeProps {
16
11
  /** Align checkboxes horizontally */
17
12
  horizontal?: boolean
18
13
  /** Defines amount of space between checkbox components (in px) */
19
14
  spacing?: GridSpacing
20
15
  }
21
16
 
22
- const useStyles = makeStyles<Theme>(styles, {
23
- name: 'PicassoCheckboxGroup',
24
- })
17
+ const HORIZONTAL_SPACING = 16
25
18
 
26
19
  const CheckboxGroup = (props: Props) => {
27
20
  const { horizontal, spacing, xs, sm, md, lg, xl, className, ...rest } = props
28
21
 
29
- const classes = useStyles()
30
- const { spacing: themeSpacing } = useTheme()
31
-
32
22
  const direction = horizontal ? 'row' : 'column'
33
- const gridSpacing = spacing ?? horizontal ? themeSpacing(2) : 0
23
+ const gridSpacing = spacing ?? horizontal ? HORIZONTAL_SPACING : 0
34
24
 
35
25
  const children = React.Children.toArray(rest.children)
36
26
 
37
27
  return (
38
- <FormGroup
28
+ <div
39
29
  {...rest}
40
- classes={classes}
41
- className={cx(classes.root, className)}
30
+ className={twMerge(
31
+ 'flex flex-col flex-wrap -mr-[0.5em] -mb-[0.5em]',
32
+ horizontal && 'flex-row',
33
+ className
34
+ )}
42
35
  >
43
36
  <Grid
44
37
  direction={direction}
@@ -48,7 +41,7 @@ const CheckboxGroup = (props: Props) => {
48
41
  {children.map((child, index) => (
49
42
  <Grid.Item
50
43
  key={index}
51
- className='leading-none [&&]:pt-0 [&&]:pb-0'
44
+ className='leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]'
52
45
  xs={xs}
53
46
  sm={sm}
54
47
  md={md}
@@ -59,7 +52,7 @@ const CheckboxGroup = (props: Props) => {
59
52
  </Grid.Item>
60
53
  ))}
61
54
  </Grid>
62
- </FormGroup>
55
+ </div>
63
56
  )
64
57
  }
65
58
 
package/dist-package/src/CheckboxGroup/styles.d.ts DELETED
@@ -1,3 +0,0 @@
1
- declare const _default: () => import("@material-ui/styles").StyleRules<{}, "root">;
2
- export default _default;
3
- //# sourceMappingURL=styles.d.ts.map
package/dist-package/src/CheckboxGroup/styles.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/CheckboxGroup/styles.ts"],"names":[],"mappings":";AAEA,wBAUI"}
package/dist-package/src/CheckboxGroup/styles.js DELETED
@@ -1,11 +0,0 @@
1
- import { createStyles } from '@material-ui/core/styles';
2
- export default () => createStyles({
3
- root: {
4
- marginRight: '-0.5em',
5
- marginBottom: '-0.5em',
6
- '& .picasso-checkbox': {
7
- marginBottom: '0.5em',
8
- },
9
- },
10
- });
11
- //# sourceMappingURL=styles.js.map
package/dist-package/src/CheckboxGroup/styles.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/CheckboxGroup/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,WAAW,EAAE,QAAQ;QACrB,YAAY,EAAE,QAAQ;QAEtB,qBAAqB,EAAE;YACrB,YAAY,EAAE,OAAO;SACtB;KACF;CACF,CAAC,CAAA"}
package/src/CheckboxGroup/styles.ts DELETED
@@ -1,13 +0,0 @@
1
- import { createStyles } from '@material-ui/core/styles'
2
-
3
- export default () =>
4
- createStyles({
5
- root: {
6
- marginRight: '-0.5em',
7
- marginBottom: '-0.5em',
8
-
9
- '& .picasso-checkbox': {
10
- marginBottom: '0.5em',
11
- },
12
- },
13
- })