@cypress-design/react-checkbox 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,117 @@
 # @cypress-design/react-checkbox
 
+## 0.1.1
+
+### Patch Changes
+
+- [#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
+
+## 0.1.0
+
+### Minor Changes
+
+- [#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
+
+## 0.5.0
+
+### Minor Changes
+
+- [#151](https://github.com/cypress-io/cypress-design/pull/151) [`8b0e735`](https://github.com/cypress-io/cypress-design/commit/8b0e7356eb64a6b3583d3486dda8ecbb11c34cca) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: use clases compatible with both windi and tailwind
+
+### Patch Changes
+
+- Updated dependencies [[`106b61a`](https://github.com/cypress-io/cypress-design/commit/106b61a97888f956a4c9d235fde5efb4243e1445), [`7b4f416`](https://github.com/cypress-io/cypress-design/commit/7b4f4162a0d150aa8cab7ec239faebb58c39464d)]:
+  - @cypress-design/react-icon@0.17.0
+
+## 0.4.6
+
+### Patch Changes
+
+- [#112](https://github.com/cypress-io/cypress-design/pull/112) [`d229b48`](https://github.com/cypress-io/cypress-design/commit/d229b48a3806a882abe83c9ebf9c32ed18d2c47f) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: when label is too big avoid checkbox shrinking
+
+## 0.4.5
+
+### Patch Changes
+
+- [#105](https://github.com/cypress-io/cypress-design/pull/105) [`2f54f5b`](https://github.com/cypress-io/cypress-design/commit/2f54f5b867b60ba5ce2e40fd38870bd65187ba30) Thanks [@elevatebart](https://github.com/elevatebart)! - checkbox should not contain a div to be added inside an inline only tag (<p>)
+
+- Updated dependencies [[`2f54f5b`](https://github.com/cypress-io/cypress-design/commit/2f54f5b867b60ba5ce2e40fd38870bd65187ba30), [`e82d8cb`](https://github.com/cypress-io/cypress-design/commit/e82d8cb60882a379d89f86d1ff7b8f1d5b56ce66)]:
+  - @cypress-design/react-icon@0.11.0
+
+## 0.4.4
+
+### Patch Changes
+
+- [#101](https://github.com/cypress-io/cypress-design/pull/101) [`1630e4c`](https://github.com/cypress-io/cypress-design/commit/1630e4c4200944cf6414cee9e92dcce6b4d8a576) Thanks [@mapsandapps](https://github.com/mapsandapps)! - Fix styles for Checkbox
+
+## 0.4.3
+
+### Patch Changes
+
+- [#71](https://github.com/cypress-io/cypress-design/pull/71) [`379079e`](https://github.com/cypress-io/cypress-design/commit/379079e08802b6c3fae243925e3b9e8881e8ef54) Thanks [@elevatebart](https://github.com/elevatebart)! - allow users to click the checkbox instead of the label
+
+## 0.4.2
+
+### Patch Changes
+
+- [#68](https://github.com/cypress-io/cypress-design/pull/68) [`8c577fb`](https://github.com/cypress-io/cypress-design/commit/8c577fb0c6a0411cf8218dfe78281834df3d6f13) Thanks [@elevatebart](https://github.com/elevatebart)! - feat: publish `.mjs` files for esm intead of `.js`
+
+- Updated dependencies [[`8c577fb`](https://github.com/cypress-io/cypress-design/commit/8c577fb0c6a0411cf8218dfe78281834df3d6f13)]:
+  - @cypress-design/react-icon@0.4.2
+
+## 0.4.1
+
+### Patch Changes
+
+- [`2afa4d5`](https://github.com/cypress-io/cypress-design/commit/2afa4d54a2373692f82bee35ae40446bc9bb3f91) Thanks [@elevatebart](https://github.com/elevatebart)! - avoid duplicate ids in checkboxes
+
+## 0.4.0
+
+### Minor Changes
+
+- [#51](https://github.com/cypress-io/cypress-design/pull/51) [`ccd8f9a`](https://github.com/cypress-io/cypress-design/commit/ccd8f9a8feb624c0a52deaa9754c76969f43fc1e) Thanks [@elevatebart](https://github.com/elevatebart)! - in the build asset, add a comment containing all used windicss classes in the component
+
+### Patch Changes
+
+- [#57](https://github.com/cypress-io/cypress-design/pull/57) [`6fa7d52`](https://github.com/cypress-io/cypress-design/commit/6fa7d52e409762bd1b32a8b04edaf78765830754) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: move the input for checkboxes outside of label for accessibility
+
+  Source: https://www.a11ymatters.com/pattern/checkbox/
+
+- Updated dependencies [[`ccd8f9a`](https://github.com/cypress-io/cypress-design/commit/ccd8f9a8feb624c0a52deaa9754c76969f43fc1e), [`0866c65`](https://github.com/cypress-io/cypress-design/commit/0866c654f24c36951c98468d789462748606b428), [`43b53eb`](https://github.com/cypress-io/cypress-design/commit/43b53eb6bd10111629239a87374cfcc894eda0e3)]:
+  - @cypress-design/react-icon@0.4.0
+
+## 0.3.0
+
+### Minor Changes
+
+- [#44](https://github.com/cypress-io/cypress-design/pull/44) [`2fdaf6b`](https://github.com/cypress-io/cypress-design/commit/2fdaf6be6f81a2a851761258347ed213577c5b26) Thanks [@elevatebart](https://github.com/elevatebart)! - Add missing descriptions of props in button, tooltip, checkbox
+
+## 0.2.2
+
+### Patch Changes
+
+- [`e3eb9c7`](https://github.com/cypress-io/cypress-design/commit/e3eb9c7fee2d7a6e0a773e85ed4b73be04d83587) Thanks [@elevatebart](https://github.com/elevatebart)! - downgrade typescript to 4.4 for compat with app
+
+## 0.2.1
+
+### Patch Changes
+
+- [#39](https://github.com/cypress-io/cypress-design/pull/39) [`1b383f3`](https://github.com/cypress-io/cypress-design/commit/1b383f3d149948bf2cc062d3baa17d5ce032f07e) Thanks [@elevatebart](https://github.com/elevatebart)! - fix file path of sourcemaps
+
+- Updated dependencies [[`4259026`](https://github.com/cypress-io/cypress-design/commit/4259026314464260e89bcd88690c8a60ad2f0459), [`1b383f3`](https://github.com/cypress-io/cypress-design/commit/1b383f3d149948bf2cc062d3baa17d5ce032f07e)]:
+  - @cypress-design/react-icon@0.3.0
+
+## 0.2.0
+
+### Minor Changes
+
+- [#33](https://github.com/cypress-io/cypress-design/pull/33) [`5f9cf10`](https://github.com/cypress-io/cypress-design/commit/5f9cf10ff4709fcd7d322c2dc5dbc676473b433e) Thanks [@elevatebart](https://github.com/elevatebart)! - fix design and api of checkboxes
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @cypress-design/react-icon@0.2.1
+
 ## 0.1.0
 
 ### Minor Changes

package/Checkbox.rootstory.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import Checkbox from './Checkbox'
+
+export default (options: {
+  color?: 'jade' | 'indigo' | 'red'
+  checked?: boolean
+}) => {
+  const { checked = true, color } = options
+  return (
+    <Checkbox
+      checked={checked}
+      label="Checked"
+      color={color}
+      onChange={() => {}}
+    />
+  )
+}

package/Checkbox.stories.mdx

@@ -1,23 +1,67 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+import { ArgsTable, Canvas, Meta, Story, Description } from '@storybook/addon-docs'
+import { version } from "./package.json"
+import changelog from "./CHANGELOG.md"
 
 import { Checkbox } from './Checkbox'
 
-# Checkbox
+<h1>Checkbox<span className="text-lg font-normal"> - v{version}</span></h1>
 
-<Meta title="Checkbox" component={Checkbox} />
+<Meta title="Checkbox" component={Checkbox}
+  argTypes={{
+    color: {
+      control: {
+        type: 'select',
+      },
+    },
+  }}
+  parameters={{
+    design: {
+      type: "figma",
+      url: 'https://www.figma.com/file/1WJ3GVQyMV5e7xVxPg3yID/Design-System?node-id=1027%3A9825',
+    }
+  }} />
 
-<Canvas>
+<Canvas withSource="none">
   <Story name="Checkbox">
-    <>
-      <Checkbox modelValue={true} label="Checked" />
+    {args => 
+    (<>
+      <Checkbox  {...args} checked label="Checked"  />
       <br />
-      <Checkbox modelValue={false} label="Unchecked" />
+      <Checkbox  {...args} label="Unchecked" />
       <br />
-      <Checkbox modelValue={true} disabled label="Disabled & checked" />
+      <Checkbox  {...args} checked disabled label="Disabled & checked" />
       <br />
-      <Checkbox modelValue={false} disabled label="Disabled & unchecked" />
-    </>
+      <Checkbox  {...args} disabled label="Disabled & unchecked" />
+    </>)}
   </Story>
 </Canvas>
 
 <ArgsTable />
+
+## Usage
+
+Install the component
+
+```
+yarn add @cypress-design/react-checkbox
+```
+
+In the script, import the component
+
+```js
+import Checkbox from '@cypress-design/react-checkbox'
+```
+
+then in your render function, use it
+
+```jsx
+export const MyComp = () => {
+  return (<div>
+    <Checkbox checked={checked} label="Checked" color="indigo" onChange={setChecked}/>
+  </div>)
+}
+```
+
+<Description>
+  {changelog.replace(/^# .+/, '## Changelog')}
+</Description>

package/Checkbox.tsx

@@ -1,60 +1,105 @@
-import * as React from 'react';
-import type { FunctionComponent, HTMLProps, ReactNode } from 'react';
+import clsx from 'clsx'
+import * as React from 'react'
+import type { FunctionComponent, HTMLProps, ReactNode } from 'react'
+import { IconCheckmarkSmall } from '@cypress-design/react-icon'
+import { CheckboxColors, Classes } from '../constants'
 
 export interface CheckboxProps
-  extends Omit<HTMLProps<HTMLDivElement>, 'label'> {
-  id?: string;
-  modelValue: boolean;
-  onChange: () => void;
-  state?: 'success' | 'danger' | 'default';
-  label?: ReactNode;
+  extends Omit<HTMLProps<HTMLDivElement>, 'label' | 'onChange' | 'name'> {
+  /**
+   * A unique identifier for the checkbox on the whole page.
+   * It will be used to give match label with input for a11y.
+   */
+  id?: string
+  /**
+   * Name attribute of the <input type="checkbox"/>.
+   */
+  name?: string
+  /**
+   * Is the checkbox checked when it is first rendered.
+   */
+  checked?: boolean
+  /**
+   * The color of the background in the checkbox.
+   * The checkmark will always be white.
+   */
+  color?: 'red' | 'indigo' | 'jade'
+  /**
+   * If the checkbox is disabled, it will not be clickable.
+   */
+  disabled?: boolean
+  /**
+   * Label for the checkbox.
+   * It is very important to set this to make the checkbox accessible.
+   */
+  label?: ReactNode
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
 
-// TODO: how do you disable it? does it work?
+const uid = () =>
+  String(Date.now().toString(32) + Math.random().toString(16)).replace(
+    /\./g,
+    ''
+  )
+
 export const Checkbox: FunctionComponent<CheckboxProps> = ({
-  id = crypto.randomUUID(),
-  modelValue,
+  id = uid(),
+  checked = false,
   onChange,
-  state = 'default',
+  color = 'indigo',
   label,
+  disabled,
+  className,
+  name,
   ...rest
 }) => {
+  const [localChecked, setChecked] = React.useState(checked)
+
+  function onChangeInput(event: React.ChangeEvent<HTMLInputElement>) {
+    setChecked(!localChecked)
+    onChange(event)
+  }
+
   return (
-    <div {...rest} className="relative flex items-center">
-      <div className="flex items-center h-5">
-        <input
-          id={id}
-          defaultChecked={modelValue}
-          aria-describedby={`${id}-description`}
-          name={id}
-          type="checkbox"
-          className={`border-1 rounded border-gray-200 bg-white h-4 w-4 text-indigo-500 disabled:bg-gray-100 checked:bg-indigo-500 ${
-            state === 'default'
-              ? 'text-indigo-500 checked:border-indigo-300 checked:bg-indigo-600 checked:text-indigo-600'
-              : ''
-          } ${
-            state === 'success'
-              ? 'checked:border-jade-300 checked:bg-jade-600 checked:text-jade-600'
-              : ''
-          } ${
-            state === 'danger'
-              ? 'checked:border-red-300 checked:bg-red-600 checked:text-red-600'
-              : ''
-          }`}
-          onChange={onChange}
+    <span className={clsx(className, Classes.wrapper)} {...rest}>
+      <input
+        id={id}
+        className={Classes.hiddenInput}
+        aria-describedby={`${id}-description`}
+        name={name || id}
+        type="checkbox"
+        onChange={onChangeInput}
+        disabled={disabled}
+        checked={localChecked}
+      />
+      <label className={Classes.labelTag} htmlFor={id}>
+        {localChecked && (
+          // <tw-keep strokeColor="white"/>
+          <IconCheckmarkSmall strokeColor="white" className="absolute" />
+        )}
+        <span
+          className={clsx([
+            Classes.visibleCheckbox,
+            disabled
+              ? CheckboxColors.disabled
+              : localChecked
+              ? CheckboxColors[color]
+              : CheckboxColors.empty,
+          ])}
         />
-      </div>
-      <div className="ml-2 text-16px leading-normal">
-        <label
-          v-if="label"
-          htmlFor={id}
-          className="disabled:text-gray-500 text-gray-800 font-light select-none"
-        >
-          {label}
-        </label>
-      </div>
-    </div>
-  );
-};
+        {label && (
+          <span
+            className={clsx([
+              disabled ? 'text-gray-500' : 'text-gray-800',
+              Classes.trueLabel,
+            ])}
+          >
+            {label}
+          </span>
+        )}
+      </label>
+    </span>
+  )
+}
 
-export default Checkbox;
+export default Checkbox

package/CheckboxReact.cy.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react'
+import { mount } from 'cypress/react'
+import { Checkbox } from './Checkbox'
+
+describe('Checkbox', () => {
+  it('changes when the label is clicked', () => {
+    let isChecked = true
+
+    mount(
+      <Checkbox
+        label="Welcome guide settings"
+        id="welcome-opt-out"
+        checked={isChecked}
+        onChange={() => (isChecked = !isChecked)}
+        className="px-2 py-1 m-2 border border-gray-300 rounded"
+      />
+    )
+
+    cy.get('input[type="checkbox"]').should('be.checked')
+    cy.percySnapshot()
+    cy.contains('Welcome guide settings').click()
+    cy.get('input[type="checkbox"]').should('not.be.checked')
+    cy.percySnapshot()
+  })
+
+  it('changes when checkbox is clicked', () => {
+    let isChecked = true
+
+    mount(
+      <Checkbox
+        label="Welcome guide settings"
+        id="welcome-opt-out"
+        checked={isChecked}
+        onChange={() => (isChecked = !isChecked)}
+        className="px-2 py-1 m-2 border border-gray-300 rounded"
+      />
+    )
+
+    cy.get('input[type="checkbox"]').should('be.checked')
+    cy.get('svg').click()
+    cy.get('input[type="checkbox"]').should('not.be.checked')
+  })
+
+  it('keeps its width when label is long', () => {
+    mount(
+      <Checkbox
+        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.',
+        ].join(' ')}
+        id="lorem-checkbox"
+        onChange={() => {}}
+      />
+    )
+
+    cy.percySnapshot()
+
+    cy.get('label span:first-child').invoke('outerWidth').should('equal', 16)
+  })
+})

package/ReadMe.md

@@ -0,0 +1,17 @@
+# Checkbox
+
+## Summary
+
+Describe your component here.
+
+## install
+
+```bash
+npm install @cypress-design/react-checkbox
+```
+
+or with yarn
+
+```bash
+yarn add @cypress-design/react-checkbox
+```

package/dist/constants.d.ts

@@ -0,0 +1,15 @@
+export declare const Classes: {
+    wrapper: string;
+    hiddenInput: string;
+    labelTag: string;
+    visibleCheckbox: string;
+    trueLabel: string;
+};
+export declare const CheckboxColors: {
+    readonly indigo: "border-indigo-500 bg-indigo-400";
+    readonly jade: "border-jade-500 bg-jade-400";
+    readonly red: "border-red-500 bg-red-400";
+    readonly disabled: "border-gray-200 bg-gray-100";
+    readonly empty: "border-gray-200 bg-white";
+};
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;CAOnB,CAAA;AAED,eAAO,MAAM,cAAc;;;;;;CAMjB,CAAA"}

package/dist/index.es.mjs

@@ -0,0 +1,164 @@
+import clsx from 'clsx';
+import * as React from 'react';
+import * as iconsRegistry from '@cypress-design/icon-registry';
+import { ICON_COLOR_PROP_NAMES } from '@cypress-design/icon-registry';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign$1 = function() {
+    __assign$1 = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$1.apply(this, arguments);
+};
+
+function __rest$1(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+var compileReactIconProperties = function (_a) {
+    var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size, attributes = __rest(_a, ["body", "compiledClasses", "size"]);
+    var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
+        if (!ICON_COLOR_PROP_NAMES.includes(attrName) && attrName !== 'name') {
+            newAttributes[attrName] =
+                attributes[attrName];
+        }
+        return newAttributes;
+    }, {});
+    var componentProps = __assign({ width: size, height: size, viewBox: "0 0 " + size + " " + size, fill: 'none', dangerouslySetInnerHTML: {
+            __html: body
+        } }, filteredAttributes);
+    if (attributes.className) {
+        compiledClasses.push(attributes.className);
+    }
+    if (compiledClasses.length) {
+        componentProps.className = compiledClasses.join(' ');
+    }
+    return componentProps;
+};
+var IconCheckmarkSmall = function (props) {
+    var _a = iconsRegistry.getComponentAttributes(__assign(__assign({}, props), { availableSizes: ["16"] })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
+    var iconBodies = {
+        "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\"/>"
+    };
+    var body = iconBodies[size];
+    if (!body) {
+        throw Error("Icon \"checkmark-small\" is not available in size " + size);
+    }
+    return React.createElement('svg', compileReactIconProperties(__assign(__assign({}, props), { size: size, body: body, compiledClasses: compiledClasses })));
+};
+
+/* <windicss-keep class=""> */
+
+var Classes = {
+    wrapper: 'relative flex items-center',
+    hiddenInput: 'absolute inset-0 w-0 h-0 opacity-0',
+    labelTag: 'flex items-center',
+    visibleCheckbox: 'border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white',
+    trueLabel: 'block ml-[8px] text-[16px] leading-[24px] font-light select-none'
+};
+var CheckboxColors = {
+    indigo: 'border-indigo-500 bg-indigo-400',
+    jade: 'border-jade-500 bg-jade-400',
+    red: 'border-red-500 bg-red-400',
+    disabled: 'border-gray-200 bg-gray-100',
+    empty: 'border-gray-200 bg-white'
+};
+
+var uid = function () {
+    return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, '');
+};
+var Checkbox = function (_a) {
+    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"]);
+    var _e = React.useState(checked), localChecked = _e[0], setChecked = _e[1];
+    function onChangeInput(event) {
+        setChecked(!localChecked);
+        onChange(event);
+    }
+    return (React.createElement("span", __assign$1({ className: clsx(className, Classes.wrapper) }, rest),
+        React.createElement("input", { id: id, className: Classes.hiddenInput, "aria-describedby": id + "-description", name: name || id, type: "checkbox", onChange: onChangeInput, disabled: disabled, checked: localChecked }),
+        React.createElement("label", { className: Classes.labelTag, htmlFor: id },
+            localChecked && (
+            // <tw-keep strokeColor="white"/>
+            React.createElement(IconCheckmarkSmall, { strokeColor: "white", className: "absolute" })),
+            React.createElement("span", { className: clsx([
+                    Classes.visibleCheckbox,
+                    disabled
+                        ? CheckboxColors.disabled
+                        : localChecked
+                            ? CheckboxColors[color]
+                            : CheckboxColors.empty,
+                ]) }),
+            label && (React.createElement("span", { className: clsx([
+                    disabled ? 'text-gray-500' : 'text-gray-800',
+                    Classes.trueLabel,
+                ]) }, label)))));
+};
+
+export { Checkbox as default };
+
+/* <windicss-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"> */
+//# sourceMappingURL=index.es.mjs.map