@cypress-design/react-checkbox 0.5.0 → 1.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 (18) hide show
  1. package/.turbo/turbo-build.log +6 -0
  2. package/CHANGELOG.md +76 -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 +84 -32
  10. package/dist/index.es.mjs.map +1 -1
  11. package/dist/index.umd.js +90 -42
  12. package/dist/index.umd.js.map +1 -1
  13. package/package.json +11 -6
  14. package/rollup.config.mjs +3 -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,6 @@
1
+ $ yarn build:module && yarn build:types
2
+ $ rollup -c ./rollup.config.mjs
3
+ 
4
+ ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
5
+ created ./dist/index.umd.js, ./dist/index.es.mjs in 13.8s
6
+ $ tsc --project ./tsconfig.build.json
package/CHANGELOG.md CHANGED
@@ -1,5 +1,81 @@
1
1
  # @cypress-design/react-checkbox
2
2
 
3
+ ## 1.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87) Thanks [@elevatebart](https://github.com/elevatebart)! - Create 1.0
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [[`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87)]:
12
+ - @cypress-design/constants-checkbox@1.0.0
13
+ - @cypress-design/react-icon@1.0.0
14
+
15
+ ## 0.4.0
16
+
17
+ ### Minor Changes
18
+
19
+ - [#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
20
+
21
+ ## 0.3.3
22
+
23
+ ### Patch Changes
24
+
25
+ - [#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
26
+
27
+ - Updated dependencies [[`d52d023`](https://github.com/cypress-io/cypress-design/commit/d52d02301bb851d514661a8c258d0c4ae5baf171)]:
28
+ - @cypress-design/react-icon@0.22.1
29
+
30
+ ## 0.3.2
31
+
32
+ ### Patch Changes
33
+
34
+ - [`08ba16d`](https://github.com/cypress-io/cypress-design/commit/08ba16da4a8663676ee96ac4950938857bd0d9a3) Thanks [@elevatebart](https://github.com/elevatebart)! - fix wind-keep plugin
35
+
36
+ - Updated dependencies [[`08ba16d`](https://github.com/cypress-io/cypress-design/commit/08ba16da4a8663676ee96ac4950938857bd0d9a3)]:
37
+ - @cypress-design/react-icon@0.21.1
38
+
39
+ ## 0.3.1
40
+
41
+ ### Patch Changes
42
+
43
+ - [`63ea78a`](https://github.com/cypress-io/cypress-design/commit/63ea78af2062fd5e3fb8c61fa4bcf85fd95e803b) Thanks [@elevatebart](https://github.com/elevatebart)! - add constants package to dependencies
44
+
45
+ ## 0.3.0
46
+
47
+ ### Minor Changes
48
+
49
+ - [#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
50
+
51
+ ### Patch Changes
52
+
53
+ - Updated dependencies [[`fc6d9e4`](https://github.com/cypress-io/cypress-design/commit/fc6d9e4fedcc01fa8e01b868b0fa66d8895c37d0)]:
54
+ - @cypress-design/react-icon@0.20.0
55
+
56
+ ## 0.2.0
57
+
58
+ ### Minor Changes
59
+
60
+ - [#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
61
+
62
+ ### Patch Changes
63
+
64
+ - Updated dependencies [[`18399c7`](https://github.com/cypress-io/cypress-design/commit/18399c72a52288c67af0935384430d4e4cd24251), [`d0de778`](https://github.com/cypress-io/cypress-design/commit/d0de77843adb87d8f4804219c6dca8f45b15c650)]:
65
+ - @cypress-design/react-icon@0.19.0
66
+
67
+ ## 0.1.1
68
+
69
+ ### Patch Changes
70
+
71
+ - [#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
72
+
73
+ ## 0.1.0
74
+
75
+ ### Minor Changes
76
+
77
+ - [#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
78
+
3
79
  ## 0.5.0
4
80
 
5
81
  ### 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
@@ -17,6 +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 */
21
+
20
22
 
21
23
  var __assign$1 = function() {
22
24
  __assign$1 = Object.assign || function __assign(t) {
@@ -39,7 +41,12 @@ function __rest$1(s, e) {
39
41
  t[p[i]] = s[p[i]];
40
42
  }
41
43
  return t;
42
- }
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;
49
+ };
43
50
 
44
51
  /******************************************************************************
45
52
  Copyright (c) Microsoft Corporation.
@@ -55,6 +62,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
55
62
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
56
63
  PERFORMANCE OF THIS SOFTWARE.
57
64
  ***************************************************************************** */
65
+ /* global Reflect, Promise, SuppressedError, Symbol */
66
+
58
67
 
59
68
  var __assign = function() {
60
69
  __assign = Object.assign || function __assign(t) {
@@ -77,20 +86,47 @@ function __rest(s, e) {
77
86
  t[p[i]] = s[p[i]];
78
87
  }
79
88
  return t;
80
- }
89
+ }
90
+
91
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
92
+ var e = new Error(message);
93
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
94
+ };
81
95
 
82
96
  var compileReactIconProperties = function (_a) {
83
- var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size, attributes = __rest(_a, ["body", "compiledClasses", "size"]);
97
+ var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, alt = _a.alt, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name", "alt"]);
84
98
  var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
85
- if (!ICON_COLOR_PROP_NAMES.includes(attrName) && attrName !== 'name') {
99
+ if (!ICON_COLOR_PROP_NAMES.includes(attrName) &&
100
+ attrName !== 'name') {
101
+ // @ts-expect-error the ky of React's SVGProps is too broad and
102
+ // breaks here. Since we do not need to check for it. We keep the expect error
86
103
  newAttributes[attrName] =
87
104
  attributes[attrName];
88
105
  }
89
106
  return newAttributes;
90
107
  }, {});
91
- var componentProps = __assign({ width: size, height: size, viewBox: "0 0 " + size + " " + size, fill: 'none', dangerouslySetInnerHTML: {
92
- __html: body
93
- } }, filteredAttributes);
108
+ // eslint-disable-next-line react-hooks/rules-of-hooks
109
+ React.useEffect(function () {
110
+ var iconFileId = "".concat(name, "_").concat(size);
111
+ if (defs) {
112
+ if (document.querySelector("[data-cy-svg-defs=\"".concat(iconFileId, "\"]"))) {
113
+ return;
114
+ }
115
+ var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
116
+ svgElement.setAttribute('data-cy-svg-defs', iconFileId);
117
+ svgElement.setAttribute('width', '0');
118
+ svgElement.setAttribute('height', '0');
119
+ svgElement.innerHTML = defs;
120
+ document.body.appendChild(svgElement);
121
+ }
122
+ }, [defs, name, size]);
123
+ var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
124
+ __html: alt
125
+ ? "<title>".concat(alt.replace(/[><]/g, function (s) {
126
+ return s === '>' ? '&gt;' : '&lt;';
127
+ }), "</title>").concat(body)
128
+ : body,
129
+ }, className: undefined }, filteredAttributes);
94
130
  if (attributes.className) {
95
131
  compiledClasses.push(attributes.className);
96
132
  }
@@ -99,19 +135,39 @@ var compileReactIconProperties = function (_a) {
99
135
  }
100
136
  return componentProps;
101
137
  };
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];
138
+
139
+ function useIconProps(props, iconBodiesAndDefs, availableSizes, name) {
140
+ var interactiveColorsOnGroup = props.interactiveColorsOnGroup, cleanProps = __rest(props, ["interactiveColorsOnGroup"]);
141
+ var _a = iconsRegistry.getComponentAttributes(__assign(__assign({}, cleanProps), { availableSizes: availableSizes, interactiveColorsOnGroup: interactiveColorsOnGroup })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
142
+ var _b = iconBodiesAndDefs[size] || {}, body = _b.body, defs = _b.defs;
108
143
  if (!body) {
109
- throw Error("Icon \"checkmark-small\" is not available in size " + size);
144
+ throw Error("Icon \"".concat(name, "\" is not available in size ").concat(size));
110
145
  }
111
- return React.createElement('svg', compileReactIconProperties(__assign(__assign({}, props), { size: size, body: body, compiledClasses: compiledClasses })));
112
- };
146
+ return compileReactIconProperties(__assign(__assign({}, cleanProps), { name: name, size: size, body: body, defs: defs, compiledClasses: compiledClasses }));
147
+ }
148
+ var IconCheckmarkSmall = function (props) { return React.createElement('svg', useIconProps(props, {
149
+ "16": {
150
+ "body": "<path d=\"M5 8.5 7.5 11 11 5\" stroke=\"currentColor\" class=\"icon-dark\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
151
+ }
152
+ }, ["16"], "checkmark-small")); };
113
153
 
114
- /* <windicss-keep class=""> */
154
+
155
+ /* <wind-keep class="filter icon-light-secondary icon-dark-secondary"> */
156
+
157
+ const Classes = {
158
+ wrapper: 'relative flex items-center',
159
+ hiddenInput: 'absolute inset-0 w-0 h-0 opacity-0',
160
+ labelTag: 'flex items-center',
161
+ visibleCheckbox: 'border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white',
162
+ trueLabel: 'block ml-[8px] text-[16px] leading-[24px] font-light select-none',
163
+ };
164
+ const CheckboxColors = {
165
+ indigo: 'border-indigo-500 bg-indigo-400',
166
+ jade: 'border-jade-500 bg-jade-400',
167
+ red: 'border-red-500 bg-red-400',
168
+ disabled: 'border-gray-200 bg-gray-100',
169
+ empty: 'border-gray-200 bg-white',
170
+ };
115
171
 
116
172
  var uid = function () {
117
173
  return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, '');
@@ -123,31 +179,27 @@ var Checkbox = function (_a) {
123
179
  setChecked(!localChecked);
124
180
  onChange(event);
125
181
  }
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 },
182
+ return (React.createElement("span", __assign$1({ className: clsx(className, Classes.wrapper) }, rest),
183
+ React.createElement("input", { id: id, className: Classes.hiddenInput, "aria-describedby": "".concat(id, "-description"), name: name || id, type: "checkbox", onChange: onChangeInput, disabled: disabled, checked: localChecked }),
184
+ React.createElement("label", { className: Classes.labelTag, htmlFor: id },
129
185
  localChecked && (
130
- // <windi-keep strokeColor="white"/>
186
+ // <tw-keep strokeColor="white"/>
131
187
  React.createElement(IconCheckmarkSmall, { strokeColor: "white", className: "absolute" })),
132
188
  React.createElement("span", { className: clsx([
133
- "block border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white",
189
+ Classes.visibleCheckbox,
134
190
  disabled
135
- ? 'border-gray-200 bg-gray-100'
191
+ ? CheckboxColors.disabled
136
192
  : 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',
193
+ ? CheckboxColors[color]
194
+ : CheckboxColors.empty,
143
195
  ]) }),
144
196
  label && (React.createElement("span", { className: clsx([
145
197
  disabled ? 'text-gray-500' : 'text-gray-800',
146
- 'block ml-[8px] text-[16px] leading-[24px] font-light select-none',
198
+ Classes.trueLabel,
147
199
  ]) }, label)))));
148
200
  };
149
201
 
150
202
  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
203
  //# sourceMappingURL=index.es.mjs.map
204
+
205
+ /* <wind-keep class="absolute text-gray-500 text-gray-800 icon-dark-white relative flex items-center inset-0 w-0 h-0 opacity-0 border border-solid rounded h-[16px] w-[16px] flex-shrink-0 text-white block ml-[8px] text-[16px] leading-[24px] font-light select-none border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 border-gray-200 bg-gray-100 bg-white"> */