@toptal/picasso-switch 5.0.1 → 5.0.2-alpha-pf-fix-alpha-release-4de9263c3.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 (6) hide show
  1. package/dist-package/src/Switch/Switch.d.ts.map +1 -1
  2. package/dist-package/src/Switch/Switch.js +12 -25
  3. package/dist-package/src/Switch/Switch.js.map +1 -1
  4. package/package.json +11 -10
  5. package/src/Switch/Switch.tsx +50 -49
  6. package/src/Switch/__snapshots__/test.tsx.snap +69 -28
package/dist-package/src/Switch/Switch.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvE,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC5D,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACpE,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,OAAO,EAAE,OAAO,KACb,IAAI,CAAA;CACV;AAED,eAAO,MAAM,MAAM,iFAsFjB,CAAA;AAIF,eAAe,MAAM,CAAA"}
1
+ {"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEvE,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC5D,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACpE,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,OAAO,EAAE,OAAO,KACb,IAAI,CAAA;CACV;AAED,eAAO,MAAM,MAAM,iFAsFjB,CAAA;AAIF,eAAe,MAAM,CAAA"}
package/dist-package/src/Switch/Switch.js CHANGED
@@ -9,33 +9,20 @@ var __rest = (this && this.__rest) || function (s, e) {
9
9
  }
10
10
  return t;
11
11
  };
12
- import { Switch as MUISwitch } from '@mui/base/Switch';
12
+ import { Switch as BaseUISwitch } from '@base-ui/react/switch';
13
+ import { toReactChangeEvent } from '@toptal/picasso-shared';
13
14
  import React, { forwardRef } from 'react';
14
15
  import { FormControlLabel } from '@toptal/picasso-form-label';
15
- import cx from 'classnames';
16
- export const Switch = forwardRef(function Switch(_a, ref) {
17
- var { disabled = false, onChange = () => { } } = _a, props = __rest(_a, ["disabled", "onChange"]);
18
- const { label, id, className, style, checked, titleCase, color, // eslint-disable-line
19
- 'data-testid': dataTestId } = props, rest = __rest(props, ["label", "id", "className", "style", "checked", "titleCase", "color", 'data-testid']);
20
- const onChangeCallback = event => {
21
- if (onChange) {
22
- onChange(event, event.target.checked);
23
- }
24
- };
25
- const switchElement = (React.createElement(MUISwitch, Object.assign({}, rest, { color: 'primary', ref: ref, checked: checked, className: className, style: style, disabled: disabled, id: id, onChange: onChangeCallback, "data-testid": label ? undefined : dataTestId, slotProps: {
26
- root: {
27
- className: 'w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group',
28
- },
29
- track: {
30
- className: cx('w-full h-full border border-solid bg-gray-600 border-gray-600 opacity-100 rounded-[12px]', 'transition-colors duration-300 ease-out', 'group-[.base--checked]:bg-blue-500 group-[.base--checked]:border-blue-500', 'group-[.base--disabled]:opacity-40', 'group-[.base--disabled:not(.base--checked)]:bg-black'),
31
- },
32
- thumb: {
33
- className: cx('w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px]', 'transition-transform duration-150 ease-out', 'group-[:not(.base--disabled):hover]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]', 'group-[.base--focusVisible]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]', 'group-[.base--checked]:translate-x-[16px]'),
34
- },
35
- input: {
36
- className: cx('w-[100%] h-full m-0 p-0 opacity-0 absolute top-0 cursor-pointer z-20', 'group-[.base--disabled]:cursor-default'),
37
- },
38
- } })));
16
+ import { twMerge } from '@toptal/picasso-tailwind-merge';
17
+ export const Switch = forwardRef(function Switch(props, ref) {
18
+ const { onChange, disabled = false, label, id, className, style, checked, titleCase, value, color: _color, // eslint-disable-line @typescript-eslint/no-unused-vars
19
+ 'data-testid': dataTestId } = props, rest = __rest(props, ["onChange", "disabled", "label", "id", "className", "style", "checked", "titleCase", "value", "color", 'data-testid']);
20
+ const handleCheckedChange = (nextChecked, { event }) => onChange === null || onChange === void 0 ? void 0 : onChange(toReactChangeEvent(event), nextChecked);
21
+ const rootRest = rest;
22
+ const switchElement = (React.createElement("span", { className: 'relative inline-flex shrink-0 align-middle overflow-clip [overflow-clip-margin:6px]' },
23
+ React.createElement(BaseUISwitch.Root, Object.assign({}, rootRest, { ref: ref, checked: checked, className: twMerge('w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group', 'cursor-pointer outline-none data-[disabled]:cursor-default', className), style: style, disabled: disabled, id: id, value: value === undefined ? undefined : String(value), onCheckedChange: handleCheckedChange, "data-testid": label ? undefined : dataTestId }),
24
+ React.createElement("span", { className: twMerge('w-full h-full border border-solid bg-gray-600 border-gray-600 opacity-100 rounded-[12px]', 'transition-colors duration-300 ease-out', 'group-data-[checked]:bg-blue-500 group-data-[checked]:border-blue-500', 'group-data-[disabled]:opacity-40', 'group-[[data-disabled][data-unchecked]]:bg-black') }),
25
+ React.createElement(BaseUISwitch.Thumb, { className: twMerge('w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px]', 'transition-transform duration-150 ease-out', 'group-[:hover:not([data-disabled])]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]', 'group-focus-visible:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]', 'group-data-[checked]:translate-x-[16px]') }))));
39
26
  if (!label) {
40
27
  return switchElement;
41
28
  }
package/dist-package/src/Switch/Switch.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/Switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAGtD,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,MAAM,YAAY,CAAA;AAmB3B,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAA2B,SAAS,MAAM,CACxE,EAAmD,EACnD,GAAG;QADH,EAAE,QAAQ,GAAG,KAAK,EAAE,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,OAAY,EAAP,KAAK,cAAjD,wBAAmD,CAAF;IAGjD,MAAM,EACJ,KAAK,EACL,EAAE,EACF,SAAS,EACT,KAAK,EACL,OAAO,EACP,SAAS,EACT,KAAK,EAAE,sBAAsB;IAC7B,aAAa,EAAE,UAAU,KAEvB,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,qFAUL,CAAQ,CAAA;IAET,MAAM,gBAAgB,GAElB,KAAK,CAAC,EAAE;QACV,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QACvC,CAAC;IACH,CAAC,CAAA;IAED,MAAM,aAAa,GAAG,CACpB,oBAAC,SAAS,oBACJ,IAAI,IACR,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,gBAAgB,iBACb,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAC3C,SAAS,EAAE;YACT,IAAI,EAAE;gBACJ,SAAS,EACP,6FAA6F;aAChG;YACD,KAAK,EAAE;gBACL,SAAS,EAAE,EAAE,CACX,0FAA0F,EAC1F,yCAAyC,EACzC,2EAA2E,EAC3E,oCAAoC,EACpC,sDAAsD,CACvD;aACF;YACD,KAAK,EAAE;gBACL,SAAS,EAAE,EAAE,CACX,4GAA4G,EAC5G,4CAA4C,EAC5C,6EAA6E,EAC7E,qEAAqE,EACrE,2CAA2C,CAC5C;aACF;YACD,KAAK,EAAE;gBACL,SAAS,EAAE,EAAE,CACX,sEAAsE,EACtE,wCAAwC,CACzC;aACF;SACF,IACD,CACH,CAAA;IAED,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,aAAa,CAAA;IACtB,CAAC;IAED,OAAO,CACL,oBAAC,gBAAgB,IACf,OAAO,EAAE;YACP,IAAI,EAAE,qBAAqB;YAC3B,KAAK,EAAE,yDAAyD;SACjE,EACD,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,iBACP,UAAU,GACvB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA;AAE7B,eAAe,MAAM,CAAA"}
1
+ {"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/Switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAE9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAmBxD,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAA2B,SAAS,MAAM,CACxE,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,EAAE,EACF,SAAS,EACT,KAAK,EACL,OAAO,EACP,SAAS,EACT,KAAK,EACL,KAAK,EAAE,MAAM,EAAE,wDAAwD;IACvE,aAAa,EAAE,UAAU,KAEvB,KAAK,EADJ,IAAI,UACL,KAAK,EAbH,sHAaL,CAAQ,CAAA;IAET,MAAM,mBAAmB,GAA+C,CACtE,WAAW,EACX,EAAE,KAAK,EAAE,EACT,EAAE,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,kBAAkB,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,CAAA;IAEvD,MAAM,QAAQ,GAAG,IAGhB,CAAA;IAED,MAAM,aAAa,GAAG,CACpB,8BAAM,SAAS,EAAC,qFAAqF;QACnG,oBAAC,YAAY,CAAC,IAAI,oBACZ,QAAQ,IACZ,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,OAAO,CAChB,6FAA6F,EAC7F,4DAA4D,EAC5D,SAAS,CACV,EACD,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACtD,eAAe,EAAE,mBAAmB,iBACvB,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU;YAE3C,8BACE,SAAS,EAAE,OAAO,CAChB,0FAA0F,EAC1F,yCAAyC,EACzC,uEAAuE,EACvE,kCAAkC,EAClC,kDAAkD,CACnD,GACD;YACF,oBAAC,YAAY,CAAC,KAAK,IACjB,SAAS,EAAE,OAAO,CAChB,4GAA4G,EAC5G,4CAA4C,EAC5C,6EAA6E,EAC7E,6DAA6D,EAC7D,yCAAyC,CAC1C,GACD,CACgB,CACf,CACR,CAAA;IAED,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,aAAa,CAAA;IACtB,CAAC;IAED,OAAO,CACL,oBAAC,gBAAgB,IACf,OAAO,EAAE;YACP,IAAI,EAAE,qBAAqB;YAC3B,KAAK,EAAE,yDAAyD;SACjE,EACD,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,iBACP,UAAU,GACvB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA;AAE7B,eAAe,MAAM,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-switch",
3
- "version": "5.0.1",
3
+ "version": "5.0.2-alpha-pf-fix-alpha-release-4de9263c3.0",
4
4
  "description": "Toptal UI components library - Switch",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -18,26 +18,27 @@
18
18
  },
19
19
  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
20
20
  "dependencies": {
21
- "@mui/base": "5.0.0-beta.58",
22
- "classnames": "^2.5.1",
23
- "@toptal/picasso-form-label": "1.0.5",
24
- "@toptal/picasso-shared": "16.0.0"
21
+ "@base-ui/react": "^1.4.1",
22
+ "@toptal/picasso-form-label": "1.0.6-alpha-pf-fix-alpha-release-4de9263c3.0",
23
+ "@toptal/picasso-shared": "16.0.1-alpha-pf-fix-alpha-release-4de9263c3.0"
25
24
  },
26
25
  "sideEffects": [
27
26
  "**/styles.ts",
28
27
  "**/styles.js"
29
28
  ],
30
29
  "peerDependencies": {
31
- "@toptal/picasso-provider": "*",
32
- "@toptal/picasso-tailwind": "^4.0.0",
33
- "react": ">=16.12.0 < 19.0.0"
30
+ "@toptal/picasso-provider": "6.0.1-alpha-pf-fix-alpha-release-4de9263c3.0",
31
+ "@toptal/picasso-tailwind": "^4.0.1-alpha-pf-fix-alpha-release-4de9263c3.0",
32
+ "@toptal/picasso-tailwind-merge": "2.0.6-alpha-pf-fix-alpha-release-4de9263c3.0",
33
+ "react": ">=16.12.0"
34
34
  },
35
35
  "exports": {
36
36
  ".": "./dist-package/src/index.js"
37
37
  },
38
38
  "devDependencies": {
39
- "@toptal/picasso-provider": "6.0.0",
40
- "@toptal/picasso-test-utils": "2.0.1"
39
+ "@toptal/picasso-provider": "6.0.1-alpha-pf-fix-alpha-release-4de9263c3.0",
40
+ "@toptal/picasso-tailwind-merge": "2.0.6-alpha-pf-fix-alpha-release-4de9263c3.0",
41
+ "@toptal/picasso-test-utils": "2.0.2-alpha-pf-fix-alpha-release-4de9263c3.0"
41
42
  },
42
43
  "files": [
43
44
  "dist-package/**",
package/src/Switch/Switch.tsx CHANGED
@@ -1,9 +1,10 @@
1
- import { Switch as MUISwitch } from '@mui/base/Switch'
1
+ import { Switch as BaseUISwitch } from '@base-ui/react/switch'
2
2
  import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared'
3
+ import { toReactChangeEvent } from '@toptal/picasso-shared'
3
4
  import type { ButtonHTMLAttributes, ReactNode } from 'react'
4
5
  import React, { forwardRef } from 'react'
5
6
  import { FormControlLabel } from '@toptal/picasso-form-label'
6
- import cx from 'classnames'
7
+ import { twMerge } from '@toptal/picasso-tailwind-merge'
7
8
 
8
9
  export interface Props
9
10
  extends BaseProps,
@@ -23,72 +24,72 @@ export interface Props
23
24
  }
24
25
 
25
26
  export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
26
- { disabled = false, onChange = () => {}, ...props },
27
+ props,
27
28
  ref
28
29
  ) {
29
30
  const {
31
+ onChange,
32
+ disabled = false,
30
33
  label,
31
34
  id,
32
35
  className,
33
36
  style,
34
37
  checked,
35
38
  titleCase,
36
- color, // eslint-disable-line
39
+ value,
40
+ color: _color, // eslint-disable-line @typescript-eslint/no-unused-vars
37
41
  'data-testid': dataTestId,
38
42
  ...rest
39
43
  } = props
40
44
 
41
- const onChangeCallback: React.ChangeEventHandler<
42
- HTMLInputElement
43
- > = event => {
44
- if (onChange) {
45
- onChange(event, event.target.checked)
46
- }
47
- }
45
+ const handleCheckedChange: BaseUISwitch.Root.Props['onCheckedChange'] = (
46
+ nextChecked,
47
+ { event }
48
+ ) => onChange?.(toReactChangeEvent(event), nextChecked)
49
+
50
+ const rootRest = rest as Omit<
51
+ BaseUISwitch.Root.Props,
52
+ 'checked' | 'disabled' | 'id' | 'value' | 'className' | 'style' | 'onCheckedChange'
53
+ >
48
54
 
49
55
  const switchElement = (
50
- <MUISwitch
51
- {...rest}
52
- color='primary'
53
- ref={ref}
54
- checked={checked}
55
- className={className}
56
- style={style}
57
- disabled={disabled}
58
- id={id}
59
- onChange={onChangeCallback}
60
- data-testid={label ? undefined : dataTestId}
61
- slotProps={{
62
- root: {
63
- className:
64
- 'w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group',
65
- },
66
- track: {
67
- className: cx(
56
+ <span className='relative inline-flex shrink-0 align-middle overflow-clip [overflow-clip-margin:6px]'>
57
+ <BaseUISwitch.Root
58
+ {...rootRest}
59
+ ref={ref}
60
+ checked={checked}
61
+ className={twMerge(
62
+ 'w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group',
63
+ 'cursor-pointer outline-none data-[disabled]:cursor-default',
64
+ className
65
+ )}
66
+ style={style}
67
+ disabled={disabled}
68
+ id={id}
69
+ value={value === undefined ? undefined : String(value)}
70
+ onCheckedChange={handleCheckedChange}
71
+ data-testid={label ? undefined : dataTestId}
72
+ >
73
+ <span
74
+ className={twMerge(
68
75
  'w-full h-full border border-solid bg-gray-600 border-gray-600 opacity-100 rounded-[12px]',
69
76
  'transition-colors duration-300 ease-out',
70
- 'group-[.base--checked]:bg-blue-500 group-[.base--checked]:border-blue-500',
71
- 'group-[.base--disabled]:opacity-40',
72
- 'group-[.base--disabled:not(.base--checked)]:bg-black'
73
- ),
74
- },
75
- thumb: {
76
- className: cx(
77
+ 'group-data-[checked]:bg-blue-500 group-data-[checked]:border-blue-500',
78
+ 'group-data-[disabled]:opacity-40',
79
+ 'group-[[data-disabled][data-unchecked]]:bg-black'
80
+ )}
81
+ />
82
+ <BaseUISwitch.Thumb
83
+ className={twMerge(
77
84
  'w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px]',
78
85
  'transition-transform duration-150 ease-out',
79
- 'group-[:not(.base--disabled):hover]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]',
80
- 'group-[.base--focusVisible]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]',
81
- 'group-[.base--checked]:translate-x-[16px]'
82
- ),
83
- },
84
- input: {
85
- className: cx(
86
- 'w-[100%] h-full m-0 p-0 opacity-0 absolute top-0 cursor-pointer z-20',
87
- 'group-[.base--disabled]:cursor-default'
88
- ),
89
- },
90
- }}
91
- />
86
+ 'group-[:hover:not([data-disabled])]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]',
87
+ 'group-focus-visible:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]',
88
+ 'group-data-[checked]:translate-x-[16px]'
89
+ )}
90
+ />
91
+ </BaseUISwitch.Root>
92
+ </span>
92
93
  )
93
94
 
94
95
  if (!label) {
package/src/Switch/__snapshots__/test.tsx.snap CHANGED
@@ -4,20 +4,33 @@ exports[`Switch behaves correctly when interacting 1`] = `
4
4
  <label
5
5
  class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer items-start text-lg"
6
6
  data-testid="switch"
7
+ id="base-ui-:rg:-label"
7
8
  >
8
9
  <span
9
- class="base-Switch base- w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group"
10
- color="primary"
10
+ class="relative inline-flex shrink-0 align-middle overflow-clip [overflow-clip"
11
11
  >
12
12
  <span
13
- class="base-Switch w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out group-[.base--checked]:bg-blue group-[.base--checked]:border-blue group-[.base--disabled]:opacity group-[.base--disabled:not(.base--checked)]:bg"
14
- />
15
- <span
16
- class="base-Switch w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out group-[:not(.base--disabled):hover]:shadow group-[.base--focusVisible]:shadow group-[.base--checked]:translate-x"
17
- />
18
- <input
19
- class="base-Switch w-[100%] h-full m-0 p-0 opacity-0 absolute top-0 cursor-pointer z-20 group-[.base--disabled]:cursor"
13
+ aria-checked="true"
14
+ aria-labelledby="base-ui-:rg:-label"
15
+ class="w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer outline-none data-[disabled]:cursor-default"
16
+ data-checked=""
17
+ id="base-ui-:rf:"
20
18
  role="switch"
19
+ tabindex="0"
20
+ >
21
+ <span
22
+ class="w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out group-data-[checked]:bg-blue group-data-[checked]:border-blue group-data-[disabled]:opacity group-[[data-disabled][data-unchecked]]:bg-black"
23
+ />
24
+ <span
25
+ class="w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out group-[:hover:not([data-disabled])]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)] group-focus-visible:shadow group-data-[checked]:translate-x"
26
+ data-checked=""
27
+ />
28
+ </span>
29
+ <input
30
+ aria-hidden="true"
31
+ id="base-ui-:rg:"
32
+ style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
33
+ tabindex="-1"
21
34
  type="checkbox"
22
35
  />
23
36
  </span>
@@ -39,19 +52,30 @@ exports[`Switch renders default Switch without label 1`] = `
39
52
  class="Picasso-root"
40
53
  >
41
54
  <span
42
- class="base-Switch w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group"
43
- color="primary"
44
- data-testid="switch"
55
+ class="relative inline-flex shrink-0 align-middle overflow-clip [overflow-clip"
45
56
  >
46
57
  <span
47
- class="base-Switch w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out group-[.base--checked]:bg-blue group-[.base--checked]:border-blue group-[.base--disabled]:opacity group-[.base--disabled:not(.base--checked)]:bg"
48
- />
49
- <span
50
- class="base-Switch w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out group-[:not(.base--disabled):hover]:shadow group-[.base--focusVisible]:shadow group-[.base--checked]:translate-x"
51
- />
52
- <input
53
- class="base-Switch w-[100%] h-full m-0 p-0 opacity-0 absolute top-0 cursor-pointer z-20 group-[.base--disabled]:cursor"
58
+ aria-checked="false"
59
+ class="w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer outline-none data-[disabled]:cursor-default"
60
+ data-testid="switch"
61
+ data-unchecked=""
62
+ id="base-ui-:r0:"
54
63
  role="switch"
64
+ tabindex="0"
65
+ >
66
+ <span
67
+ class="w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out group-data-[checked]:bg-blue group-data-[checked]:border-blue group-data-[disabled]:opacity group-[[data-disabled][data-unchecked]]:bg-black"
68
+ />
69
+ <span
70
+ class="w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out group-[:hover:not([data-disabled])]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)] group-focus-visible:shadow group-data-[checked]:translate-x"
71
+ data-unchecked=""
72
+ />
73
+ </span>
74
+ <input
75
+ aria-hidden="true"
76
+ id="base-ui-:r1:"
77
+ style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
78
+ tabindex="-1"
55
79
  type="checkbox"
56
80
  />
57
81
  </span>
@@ -63,21 +87,38 @@ exports[`Switch renders disabled state 1`] = `
63
87
  <label
64
88
  class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-default items-start text-lg"
65
89
  data-testid="switch"
90
+ id="base-ui-:r7:-label"
66
91
  >
67
92
  <span
68
- class="base-Switch base- w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group"
69
- color="primary"
93
+ class="relative inline-flex shrink-0 align-middle overflow-clip [overflow-clip"
94
+ disabled=""
70
95
  >
71
96
  <span
72
- class="base-Switch w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out group-[.base--checked]:bg-blue group-[.base--checked]:border-blue group-[.base--disabled]:opacity group-[.base--disabled:not(.base--checked)]:bg"
73
- />
74
- <span
75
- class="base-Switch w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out group-[:not(.base--disabled):hover]:shadow group-[.base--focusVisible]:shadow group-[.base--checked]:translate-x"
76
- />
97
+ aria-checked="false"
98
+ aria-disabled="true"
99
+ aria-labelledby="base-ui-:r7:-label"
100
+ class="w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer outline-none data-[disabled]:cursor-default"
101
+ data-disabled=""
102
+ data-unchecked=""
103
+ id="base-ui-:r6:"
104
+ role="switch"
105
+ tabindex="-1"
106
+ >
107
+ <span
108
+ class="w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out group-data-[checked]:bg-blue group-data-[checked]:border-blue group-data-[disabled]:opacity group-[[data-disabled][data-unchecked]]:bg-black"
109
+ />
110
+ <span
111
+ class="w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out group-[:hover:not([data-disabled])]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)] group-focus-visible:shadow group-data-[checked]:translate-x"
112
+ data-disabled=""
113
+ data-unchecked=""
114
+ />
115
+ </span>
77
116
  <input
78
- class="base-Switch w-[100%] h-full m-0 p-0 opacity-0 absolute top-0 cursor-pointer z-20 group-[.base--disabled]:cursor"
117
+ aria-hidden="true"
79
118
  disabled=""
80
- role="switch"
119
+ id="base-ui-:r7:"
120
+ style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
121
+ tabindex="-1"
81
122
  type="checkbox"
82
123
  />
83
124
  </span>