@cypress-design/react-checkbox 0.5.0 → 1.0.1

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 (18) hide show
  1. package/.turbo/turbo-build.log +8 -0
  2. package/CHANGELOG.md +85 -0
  3. package/Checkbox.rootstory.tsx +17 -0
  4. package/Checkbox.tsx +11 -17
  5. package/CheckboxReact.cy.tsx +14 -7
  6. package/ReadMe.md +19 -0
  7. package/dist/Checkbox.d.ts.map +1 -1
  8. package/dist/index.d.ts.map +1 -1
  9. package/dist/index.es.mjs +20 -89
  10. package/dist/index.es.mjs.map +1 -1
  11. package/dist/index.umd.js +26 -99
  12. package/dist/index.umd.js.map +1 -1
  13. package/package.json +11 -6
  14. package/rollup.config.mjs +7 -0
  15. package/tsconfig.build.json +1 -0
  16. package/Checkbox.stories.mdx +0 -67
  17. package/rollup.config.js +0 -3
  18. package/tsconfig.json +0 -4
package/.turbo/turbo-build.log ADDED
@@ -0,0 +1,8 @@
1
+ $ yarn build:module && yarn build:types
2
+ $ rollup -c ./rollup.config.mjs
3
+ (node:4175) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
4
+ (Use `node --trace-warnings ...` to show where the warning was created)
5
+ 
6
+ ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
7
+ created ./dist/index.umd.js, ./dist/index.es.mjs in 14.1s
8
+ $ tsc --project ./tsconfig.build.json
package/CHANGELOG.md CHANGED
@@ -1,5 +1,90 @@
1
1
  # @cypress-design/react-checkbox
2
2
 
3
+ ## 1.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#450](https://github.com/cypress-io/cypress-design/pull/450) [`927097f`](https://github.com/cypress-io/cypress-design/commit/927097f409235ac78c98b281c4d9b2ec70dfe01d) Thanks [@elevatebart](https://github.com/elevatebart)! - optim: do not package dependencies
8
+
9
+ - Updated dependencies [[`927097f`](https://github.com/cypress-io/cypress-design/commit/927097f409235ac78c98b281c4d9b2ec70dfe01d), [`927097f`](https://github.com/cypress-io/cypress-design/commit/927097f409235ac78c98b281c4d9b2ec70dfe01d)]:
10
+ - @cypress-design/react-icon@1.1.0
11
+
12
+ ## 1.0.0
13
+
14
+ ### Major Changes
15
+
16
+ - [`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87) Thanks [@elevatebart](https://github.com/elevatebart)! - Create 1.0
17
+
18
+ ### Patch Changes
19
+
20
+ - Updated dependencies [[`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87)]:
21
+ - @cypress-design/constants-checkbox@1.0.0
22
+ - @cypress-design/react-icon@1.0.0
23
+
24
+ ## 0.4.0
25
+
26
+ ### Minor Changes
27
+
28
+ - [#272](https://github.com/cypress-io/cypress-design/pull/272) [`9a3e358`](https://github.com/cypress-io/cypress-design/commit/9a3e3582b8ca2dfdadd9198054042c9f0083be01) Thanks [@elevatebart](https://github.com/elevatebart)! - remove dark mode implementation to avoid wrong side effects
29
+
30
+ ## 0.3.3
31
+
32
+ ### Patch Changes
33
+
34
+ - [#245](https://github.com/cypress-io/cypress-design/pull/245) [`d52d023`](https://github.com/cypress-io/cypress-design/commit/d52d02301bb851d514661a8c258d0c4ae5baf171) Thanks [@elevatebart](https://github.com/elevatebart)! - use tailwind to rollup classes in the final package
35
+
36
+ - Updated dependencies [[`d52d023`](https://github.com/cypress-io/cypress-design/commit/d52d02301bb851d514661a8c258d0c4ae5baf171)]:
37
+ - @cypress-design/react-icon@0.22.1
38
+
39
+ ## 0.3.2
40
+
41
+ ### Patch Changes
42
+
43
+ - [`08ba16d`](https://github.com/cypress-io/cypress-design/commit/08ba16da4a8663676ee96ac4950938857bd0d9a3) Thanks [@elevatebart](https://github.com/elevatebart)! - fix wind-keep plugin
44
+
45
+ - Updated dependencies [[`08ba16d`](https://github.com/cypress-io/cypress-design/commit/08ba16da4a8663676ee96ac4950938857bd0d9a3)]:
46
+ - @cypress-design/react-icon@0.21.1
47
+
48
+ ## 0.3.1
49
+
50
+ ### Patch Changes
51
+
52
+ - [`63ea78a`](https://github.com/cypress-io/cypress-design/commit/63ea78af2062fd5e3fb8c61fa4bcf85fd95e803b) Thanks [@elevatebart](https://github.com/elevatebart)! - add constants package to dependencies
53
+
54
+ ## 0.3.0
55
+
56
+ ### Minor Changes
57
+
58
+ - [#196](https://github.com/cypress-io/cypress-design/pull/196) [`fc6d9e4`](https://github.com/cypress-io/cypress-design/commit/fc6d9e4fedcc01fa8e01b868b0fa66d8895c37d0) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: avoid constants relative imports
59
+
60
+ ### Patch Changes
61
+
62
+ - Updated dependencies [[`fc6d9e4`](https://github.com/cypress-io/cypress-design/commit/fc6d9e4fedcc01fa8e01b868b0fa66d8895c37d0)]:
63
+ - @cypress-design/react-icon@0.20.0
64
+
65
+ ## 0.2.0
66
+
67
+ ### Minor Changes
68
+
69
+ - [#178](https://github.com/cypress-io/cypress-design/pull/178) [`d0de778`](https://github.com/cypress-io/cypress-design/commit/d0de77843adb87d8f4804219c6dca8f45b15c650) Thanks [@elevatebart](https://github.com/elevatebart)! - deliver new docs and improved components
70
+
71
+ ### Patch Changes
72
+
73
+ - Updated dependencies [[`18399c7`](https://github.com/cypress-io/cypress-design/commit/18399c72a52288c67af0935384430d4e4cd24251), [`d0de778`](https://github.com/cypress-io/cypress-design/commit/d0de77843adb87d8f4804219c6dca8f45b15c650)]:
74
+ - @cypress-design/react-icon@0.19.0
75
+
76
+ ## 0.1.1
77
+
78
+ ### Patch Changes
79
+
80
+ - [#164](https://github.com/cypress-io/cypress-design/pull/164) [`4fd951a`](https://github.com/cypress-io/cypress-design/commit/4fd951a39335900da2508beef9b3565a6f8f9518) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: update active buttons borders
81
+
82
+ ## 0.1.0
83
+
84
+ ### Minor Changes
85
+
86
+ - [#162](https://github.com/cypress-io/cypress-design/pull/162) [`76d4e60`](https://github.com/cypress-io/cypress-design/commit/76d4e601687d28578cdee0ddc67cd04b286ae2c3) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: functionalize classes used
87
+
3
88
  ## 0.5.0
4
89
 
5
90
  ### Minor Changes
package/Checkbox.rootstory.tsx ADDED
@@ -0,0 +1,17 @@
1
+ import * as React from 'react'
2
+ import Checkbox from './Checkbox'
3
+
4
+ export default (options: {
5
+ color?: 'jade' | 'indigo' | 'red'
6
+ checked?: boolean
7
+ }) => {
8
+ const { checked = true, color } = options
9
+ return (
10
+ <Checkbox
11
+ checked={checked}
12
+ label="Checked"
13
+ color={color}
14
+ onChange={() => {}}
15
+ />
16
+ )
17
+ }
package/Checkbox.tsx CHANGED
@@ -2,6 +2,7 @@ import clsx from 'clsx'
2
2
  import * as React from 'react'
3
3
  import type { FunctionComponent, HTMLProps, ReactNode } from 'react'
4
4
  import { IconCheckmarkSmall } from '@cypress-design/react-icon'
5
+ import { CheckboxColors, Classes } from '@cypress-design/constants-checkbox'
5
6
 
6
7
  export interface CheckboxProps
7
8
  extends Omit<HTMLProps<HTMLDivElement>, 'label' | 'onChange' | 'name'> {
@@ -38,7 +39,7 @@ export interface CheckboxProps
38
39
  const uid = () =>
39
40
  String(Date.now().toString(32) + Math.random().toString(16)).replace(
40
41
  /\./g,
41
- ''
42
+ '',
42
43
  )
43
44
 
44
45
  export const Checkbox: FunctionComponent<CheckboxProps> = ({
@@ -60,13 +61,10 @@ export const Checkbox: FunctionComponent<CheckboxProps> = ({
60
61
  }
61
62
 
62
63
  return (
63
- <span
64
- className={clsx(className, 'block relative flex items-center')}
65
- {...rest}
66
- >
64
+ <span className={clsx(className, Classes.wrapper)} {...rest}>
67
65
  <input
68
66
  id={id}
69
- className="absolute inset-0 w-0 h-0 opacity-0"
67
+ className={Classes.hiddenInput}
70
68
  aria-describedby={`${id}-description`}
71
69
  name={name || id}
72
70
  type="checkbox"
@@ -74,30 +72,26 @@ export const Checkbox: FunctionComponent<CheckboxProps> = ({
74
72
  disabled={disabled}
75
73
  checked={localChecked}
76
74
  />
77
- <label className="flex items-center" htmlFor={id}>
75
+ <label className={Classes.labelTag} htmlFor={id}>
78
76
  {localChecked && (
79
- // <windi-keep strokeColor="white"/>
77
+ // <tw-keep strokeColor="white"/>
80
78
  <IconCheckmarkSmall strokeColor="white" className="absolute" />
81
79
  )}
82
80
  <span
83
81
  className={clsx([
84
- `block border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white`,
82
+ Classes.visibleCheckbox,
85
83
  disabled
86
- ? 'border-gray-200 bg-gray-100'
84
+ ? CheckboxColors.disabled
87
85
  : localChecked
88
- ? {
89
- 'border-indigo-500 bg-indigo-400': color === 'indigo',
90
- 'border-jade-500 bg-jade-400': color === 'jade',
91
- 'border-red-500 bg-red-400': color === 'red',
92
- }
93
- : 'border-gray-200 bg-white',
86
+ ? CheckboxColors[color]
87
+ : CheckboxColors.empty,
94
88
  ])}
95
89
  />
96
90
  {label && (
97
91
  <span
98
92
  className={clsx([
99
93
  disabled ? 'text-gray-500' : 'text-gray-800',
100
- 'block ml-[8px] text-[16px] leading-[24px] font-light select-none',
94
+ Classes.trueLabel,
101
95
  ])}
102
96
  >
103
97
  {label}
package/CheckboxReact.cy.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react'
2
- import { mount } from 'cypress/react'
2
+ import { mount } from 'cypress/react18'
3
3
  import { Checkbox } from './Checkbox'
4
4
 
5
5
  describe('Checkbox', () => {
@@ -12,8 +12,8 @@ describe('Checkbox', () => {
12
12
  id="welcome-opt-out"
13
13
  checked={isChecked}
14
14
  onChange={() => (isChecked = !isChecked)}
15
- className="m-2 px-2 py-1 border-1 border-gray-300 rounded"
16
- />
15
+ className="px-2 py-1 m-2 border border-gray-300 rounded"
16
+ />,
17
17
  )
18
18
 
19
19
  cy.get('input[type="checkbox"]').should('be.checked')
@@ -32,8 +32,8 @@ describe('Checkbox', () => {
32
32
  id="welcome-opt-out"
33
33
  checked={isChecked}
34
34
  onChange={() => (isChecked = !isChecked)}
35
- className="m-2 px-2 py-1 border-1 border-gray-300 rounded"
36
- />
35
+ className="px-2 py-1 m-2 border border-gray-300 rounded"
36
+ />,
37
37
  )
38
38
 
39
39
  cy.get('input[type="checkbox"]').should('be.checked')
@@ -44,10 +44,17 @@ describe('Checkbox', () => {
44
44
  it('keeps its width when label is long', () => {
45
45
  mount(
46
46
  <Checkbox
47
- label="lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
47
+ label={[
48
+ 'lorem ipsum dolor sit amet, consectetur adipiscing elit,',
49
+ 'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
50
+ 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip',
51
+ 'ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse',
52
+ 'cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,',
53
+ 'sunt in culpa qui officia deserunt mollit anim id est laborum.',
54
+ ].join(' ')}
48
55
  id="lorem-checkbox"
49
56
  onChange={() => {}}
50
- />
57
+ />,
51
58
  )
52
59
 
53
60
  cy.percySnapshot()
package/ReadMe.md ADDED
@@ -0,0 +1,19 @@
1
+ # Checkbox
2
+
3
+ ## Install
4
+
5
+ ```bash
6
+ npm install @cypress-design/react-checkbox
7
+ ```
8
+
9
+ or with yarn
10
+
11
+ ```bash
12
+ yarn add @cypress-design/react-checkbox
13
+ ```
14
+
15
+ ## Usage
16
+
17
+ ```ts
18
+ import Checkbox from '@cypress-design/react-checkbox'
19
+ ```
package/dist/Checkbox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGpE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;IACtE;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CAC/D;AAQD,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CAiErD,CAAA;AAED,eAAe,QAAQ,CAAA"}
1
+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"./","sources":["Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIpE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;IACtE;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CAC/D;AAQD,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CA0DrD,CAAA;AAED,eAAe,QAAQ,CAAA"}
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"./","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA"}
package/dist/index.es.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import clsx from 'clsx';
2
2
  import * as React from 'react';
3
- import * as iconsRegistry from '@cypress-design/icon-registry';
4
- import { ICON_COLOR_PROP_NAMES } from '@cypress-design/icon-registry';
3
+ import { IconCheckmarkSmall } from '@cypress-design/react-icon';
4
+ import { Classes, CheckboxColors } from '@cypress-design/constants-checkbox';
5
5
 
6
6
  /******************************************************************************
7
7
  Copyright (c) Microsoft Corporation.
@@ -17,44 +17,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
17
17
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
18
18
  PERFORMANCE OF THIS SOFTWARE.
19
19
  ***************************************************************************** */
20
+ /* global Reflect, Promise, SuppressedError, Symbol */
20
21
 
21
- var __assign$1 = function() {
22
- __assign$1 = Object.assign || function __assign(t) {
23
- for (var s, i = 1, n = arguments.length; i < n; i++) {
24
- s = arguments[i];
25
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
26
- }
27
- return t;
28
- };
29
- return __assign$1.apply(this, arguments);
30
- };
31
-
32
- function __rest$1(s, e) {
33
- var t = {};
34
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
35
- t[p] = s[p];
36
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
37
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
38
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
39
- t[p[i]] = s[p[i]];
40
- }
41
- return t;
42
- }
43
-
44
- /******************************************************************************
45
- Copyright (c) Microsoft Corporation.
46
-
47
- Permission to use, copy, modify, and/or distribute this software for any
48
- purpose with or without fee is hereby granted.
49
-
50
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
51
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
52
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
53
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
54
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
55
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
56
- PERFORMANCE OF THIS SOFTWARE.
57
- ***************************************************************************** */
58
22
 
59
23
  var __assign = function() {
60
24
  __assign = Object.assign || function __assign(t) {
@@ -77,77 +41,44 @@ function __rest(s, e) {
77
41
  t[p[i]] = s[p[i]];
78
42
  }
79
43
  return t;
80
- }
81
-
82
- var compileReactIconProperties = function (_a) {
83
- var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size, attributes = __rest(_a, ["body", "compiledClasses", "size"]);
84
- var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
85
- if (!ICON_COLOR_PROP_NAMES.includes(attrName) && attrName !== 'name') {
86
- newAttributes[attrName] =
87
- attributes[attrName];
88
- }
89
- return newAttributes;
90
- }, {});
91
- var componentProps = __assign({ width: size, height: size, viewBox: "0 0 " + size + " " + size, fill: 'none', dangerouslySetInnerHTML: {
92
- __html: body
93
- } }, filteredAttributes);
94
- if (attributes.className) {
95
- compiledClasses.push(attributes.className);
96
- }
97
- if (compiledClasses.length) {
98
- componentProps.className = compiledClasses.join(' ');
99
- }
100
- return componentProps;
101
- };
102
- var IconCheckmarkSmall = function (props) {
103
- var _a = iconsRegistry.getComponentAttributes(__assign(__assign({}, props), { availableSizes: ["16"] })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
104
- var iconBodies = {
105
- "16": "<path d=\"M5 8.5 7.5 11 11 5\" stroke=\"currentColor\" class=\"icon-dark\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
106
- };
107
- var body = iconBodies[size];
108
- if (!body) {
109
- throw Error("Icon \"checkmark-small\" is not available in size " + size);
110
- }
111
- return React.createElement('svg', compileReactIconProperties(__assign(__assign({}, props), { size: size, body: body, compiledClasses: compiledClasses })));
44
+ }
45
+
46
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
47
+ var e = new Error(message);
48
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
112
49
  };
113
50
 
114
- /* <windicss-keep class=""> */
115
-
116
51
  var uid = function () {
117
52
  return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, '');
118
53
  };
119
54
  var Checkbox = function (_a) {
120
- var _b = _a.id, id = _b === void 0 ? uid() : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.color, color = _d === void 0 ? 'indigo' : _d, label = _a.label, disabled = _a.disabled, className = _a.className, name = _a.name, rest = __rest$1(_a, ["id", "checked", "onChange", "color", "label", "disabled", "className", "name"]);
55
+ var _b = _a.id, id = _b === void 0 ? uid() : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.color, color = _d === void 0 ? 'indigo' : _d, label = _a.label, disabled = _a.disabled, className = _a.className, name = _a.name, rest = __rest(_a, ["id", "checked", "onChange", "color", "label", "disabled", "className", "name"]);
121
56
  var _e = React.useState(checked), localChecked = _e[0], setChecked = _e[1];
122
57
  function onChangeInput(event) {
123
58
  setChecked(!localChecked);
124
59
  onChange(event);
125
60
  }
126
- return (React.createElement("span", __assign$1({ className: clsx(className, 'block relative flex items-center') }, rest),
127
- React.createElement("input", { id: id, className: "absolute inset-0 w-0 h-0 opacity-0", "aria-describedby": id + "-description", name: name || id, type: "checkbox", onChange: onChangeInput, disabled: disabled, checked: localChecked }),
128
- React.createElement("label", { className: "flex items-center", htmlFor: id },
61
+ return (React.createElement("span", __assign({ className: clsx(className, Classes.wrapper) }, rest),
62
+ React.createElement("input", { id: id, className: Classes.hiddenInput, "aria-describedby": "".concat(id, "-description"), name: name || id, type: "checkbox", onChange: onChangeInput, disabled: disabled, checked: localChecked }),
63
+ React.createElement("label", { className: Classes.labelTag, htmlFor: id },
129
64
  localChecked && (
130
- // <windi-keep strokeColor="white"/>
65
+ // <tw-keep strokeColor="white"/>
131
66
  React.createElement(IconCheckmarkSmall, { strokeColor: "white", className: "absolute" })),
132
67
  React.createElement("span", { className: clsx([
133
- "block border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white",
68
+ Classes.visibleCheckbox,
134
69
  disabled
135
- ? 'border-gray-200 bg-gray-100'
70
+ ? CheckboxColors.disabled
136
71
  : localChecked
137
- ? {
138
- 'border-indigo-500 bg-indigo-400': color === 'indigo',
139
- 'border-jade-500 bg-jade-400': color === 'jade',
140
- 'border-red-500 bg-red-400': color === 'red'
141
- }
142
- : 'border-gray-200 bg-white',
72
+ ? CheckboxColors[color]
73
+ : CheckboxColors.empty,
143
74
  ]) }),
144
75
  label && (React.createElement("span", { className: clsx([
145
76
  disabled ? 'text-gray-500' : 'text-gray-800',
146
- 'block ml-[8px] text-[16px] leading-[24px] font-light select-none',
77
+ Classes.trueLabel,
147
78
  ]) }, label)))));
148
79
  };
149
80
 
150
81
  export { Checkbox as default };
151
-
152
- /* <windicss-keep class="block relative flex items-center absolute inset-0 w-0 h-0 opacity-0 border border-solid rounded h-[16px] w-[16px] flex-shrink-0 text-white border-gray-200 bg-gray-100 border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 bg-white text-gray-500 text-gray-800 ml-[8px] text-[16px] leading-[24px] font-light select-none icon-dark-white"> */
153
82
  //# sourceMappingURL=index.es.mjs.map
83
+
84
+ /* <wind-keep class="absolute text-gray-500 text-gray-800 icon-dark-white"> */