@negative-space/checkbox 1.1.1 → 1.2.1

package/dist/index.d.mts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FlexProps } from '@negative-space/flex';
+import { CheckmarkProps } from '@negative-space/checkmark';
+
+interface CheckboxProps extends Omit<FlexProps<'label'>, 'as' | 'type' | 'className' | 'style'> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    classNames?: {
+        label?: string;
+        checkbox?: string;
+        checkboxInner?: string;
+    };
+    styles?: {
+        label?: React.CSSProperties;
+        checkbox?: React.CSSProperties;
+        checkboxInner?: React.CSSProperties;
+    };
+    isPopDisabled?: boolean;
+    checkmarkProps?: CheckmarkProps;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Checkbox, type CheckboxProps };

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FlexProps } from '@negative-space/flex';
+import { CheckmarkProps } from '@negative-space/checkmark';
+
+interface CheckboxProps extends Omit<FlexProps<'label'>, 'as' | 'type' | 'className' | 'style'> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    classNames?: {
+        label?: string;
+        checkbox?: string;
+        checkboxInner?: string;
+    };
+    styles?: {
+        label?: React.CSSProperties;
+        checkbox?: React.CSSProperties;
+        checkboxInner?: React.CSSProperties;
+    };
+    isPopDisabled?: boolean;
+    checkmarkProps?: CheckmarkProps;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Checkbox, type CheckboxProps };

package/dist/index.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var React = require('react');
+var system = require('@negative-space/system');
+var flex = require('@negative-space/flex');
+var checkmark = require('@negative-space/checkmark');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/Checkbox.tsx
+var Checkbox = React__default.default.forwardRef(
+  ({
+    classNames,
+    styles,
+    children,
+    checked,
+    defaultChecked = false,
+    disabled,
+    isPopDisabled,
+    checkmarkProps,
+    alignItems = "center",
+    ...props
+  }, ref) => {
+    const { global, components } = system.useNSUI();
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
+    const isChecked = checked !== void 0 ? checked : internalChecked;
+    const IsPopDisabled = isPopDisabled ?? components.checkbox.isPopDisabled;
+    const toggleChecked = () => {
+      if (disabled) return;
+      if (checked === void 0) {
+        setInternalChecked(!internalChecked);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggleChecked();
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      flex.Flex,
+      {
+        ...props,
+        ref,
+        as: "label",
+        alignItems,
+        className: system.cn(`${global.prefixCls}-checkbox-label`, classNames?.label),
+        style: styles?.label,
+        role: "checkbox",
+        "aria-checked": isChecked,
+        "aria-disabled": disabled,
+        "data-disabled": disabled,
+        tabIndex: disabled ? -1 : 0,
+        onClick: toggleChecked,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-checked": isChecked,
+              "data-disabled": disabled,
+              className: system.cn(`${global.prefixCls}-checkbox`, classNames?.checkbox),
+              style: styles?.checkbox,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-checked": isChecked,
+                    className: system.cn(
+                      `${global.prefixCls}-checkbox-inner`,
+                      isChecked && !IsPopDisabled && `${global.prefixCls}-pop`,
+                      classNames?.checkboxInner
+                    ),
+                    style: styles?.checkboxInner
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(checkmark.Checkmark, { ...checkmarkProps, checked: isChecked })
+              ]
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Checkbox.tsx"],"names":["React","useNSUI","useState","jsxs","Flex","cn","jsx","Checkmark"],"mappings":";;;;;;;;;;;;;AA0BO,IAAM,WAAWA,sBAAA,CAAM,UAAA;AAAA,EAC5B,CACE;AAAA,IACE,UAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,cAAA,GAAiB,KAAA;AAAA,IACjB,QAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA,GAAa,QAAA;AAAA,IACb,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,EAAE,MAAA,EAAQ,UAAA,EAAW,GAAIC,cAAA,EAAQ;AACvC,IAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIC,eAAS,cAAc,CAAA;AACrE,IAAA,MAAM,SAAA,GAAY,OAAA,KAAY,MAAA,GAAY,OAAA,GAAU,eAAA;AACpD,IAAA,MAAM,aAAA,GAAgB,aAAA,IAAiB,UAAA,CAAW,QAAA,CAAS,aAAA;AAE3D,IAAA,MAAM,gBAAgB,MAAM;AAC1B,MAAA,IAAI,QAAA,EAAU;AACd,MAAA,IAAI,YAAY,MAAA,EAAW;AACzB,QAAA,kBAAA,CAAmB,CAAC,eAAe,CAAA;AAAA,MACrC;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,aAAA,GAAgB,CAAC,CAAA,KAA2C;AAChE,MAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,OAAA,IAAW,CAAA,CAAE,QAAQ,GAAA,EAAK;AACtC,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,aAAA,EAAc;AAAA,MAChB;AAAA,IACF,CAAA;AAEA,IAAA,uBACEC,eAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,GAAA;AAAA,QACA,EAAA,EAAG,OAAA;AAAA,QACH,UAAA;AAAA,QACA,WAAWC,SAAA,CAAG,CAAA,EAAG,OAAO,SAAS,CAAA,eAAA,CAAA,EAAmB,YAAY,KAAK,CAAA;AAAA,QACrE,OAAO,MAAA,EAAQ,KAAA;AAAA,QACf,IAAA,EAAK,UAAA;AAAA,QACL,cAAA,EAAc,SAAA;AAAA,QACd,eAAA,EAAe,QAAA;AAAA,QACf,eAAA,EAAe,QAAA;AAAA,QACf,QAAA,EAAU,WAAW,EAAA,GAAK,CAAA;AAAA,QAC1B,OAAA,EAAS,aAAA;AAAA,QACT,SAAA,EAAW,aAAA;AAAA,QAEX,QAAA,EAAA;AAAA,0BAAAF,eAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,aAAA,EAAY,MAAA;AAAA,cACZ,cAAA,EAAc,SAAA;AAAA,cACd,eAAA,EAAe,QAAA;AAAA,cACf,WAAWE,SAAA,CAAG,CAAA,EAAG,OAAO,SAAS,CAAA,SAAA,CAAA,EAAa,YAAY,QAAQ,CAAA;AAAA,cAClE,OAAO,MAAA,EAAQ,QAAA;AAAA,cAEf,QAAA,EAAA;AAAA,gCAAAC,cAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,cAAA,EAAc,SAAA;AAAA,oBACd,SAAA,EAAWD,SAAA;AAAA,sBACT,CAAA,EAAG,OAAO,SAAS,CAAA,eAAA,CAAA;AAAA,sBACnB,SAAA,IAAa,CAAC,aAAA,IAAiB,CAAA,EAAG,OAAO,SAAS,CAAA,IAAA,CAAA;AAAA,sBAClD,UAAA,EAAY;AAAA,qBACd;AAAA,oBACA,OAAO,MAAA,EAAQ;AAAA;AAAA,iBACjB;AAAA,gCACAC,cAAA,CAACC,mBAAA,EAAA,EAAW,GAAG,cAAA,EAAgB,SAAS,SAAA,EAAW;AAAA;AAAA;AAAA,WACrD;AAAA,UAEC;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"index.js","sourcesContent":["import React, { useState } from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Flex, type FlexProps } from '@negative-space/flex'\nimport { Checkmark, type CheckmarkProps } from '@negative-space/checkmark'\n\nexport interface CheckboxProps extends Omit<\n  FlexProps<'label'>,\n  'as' | 'type' | 'className' | 'style'\n> {\n  checked?: boolean\n  defaultChecked?: boolean\n  disabled?: boolean\n  classNames?: {\n    label?: string\n    checkbox?: string\n    checkboxInner?: string\n  }\n  styles?: {\n    label?: React.CSSProperties\n    checkbox?: React.CSSProperties\n    checkboxInner?: React.CSSProperties\n  }\n  isPopDisabled?: boolean\n  checkmarkProps?: CheckmarkProps\n}\n\nexport const Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(\n  (\n    {\n      classNames,\n      styles,\n      children,\n      checked,\n      defaultChecked = false,\n      disabled,\n      isPopDisabled,\n      checkmarkProps,\n      alignItems = 'center',\n      ...props\n    },\n    ref\n  ) => {\n    const { global, components } = useNSUI()\n    const [internalChecked, setInternalChecked] = useState(defaultChecked)\n    const isChecked = checked !== undefined ? checked : internalChecked\n    const IsPopDisabled = isPopDisabled ?? components.checkbox.isPopDisabled\n\n    const toggleChecked = () => {\n      if (disabled) return\n      if (checked === undefined) {\n        setInternalChecked(!internalChecked)\n      }\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        toggleChecked()\n      }\n    }\n\n    return (\n      <Flex\n        {...props}\n        ref={ref}\n        as=\"label\"\n        alignItems={alignItems}\n        className={cn(`${global.prefixCls}-checkbox-label`, classNames?.label)}\n        style={styles?.label}\n        role=\"checkbox\"\n        aria-checked={isChecked}\n        aria-disabled={disabled}\n        data-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        onClick={toggleChecked}\n        onKeyDown={handleKeyDown}\n      >\n        <span\n          aria-hidden=\"true\"\n          data-checked={isChecked}\n          data-disabled={disabled}\n          className={cn(`${global.prefixCls}-checkbox`, classNames?.checkbox)}\n          style={styles?.checkbox}\n        >\n          <span\n            data-checked={isChecked}\n            className={cn(\n              `${global.prefixCls}-checkbox-inner`,\n              isChecked && !IsPopDisabled && `${global.prefixCls}-pop`,\n              classNames?.checkboxInner\n            )}\n            style={styles?.checkboxInner}\n          />\n          <Checkmark {...checkmarkProps} checked={isChecked} />\n        </span>\n\n        {children}\n      </Flex>\n    )\n  }\n)\n\nCheckbox.displayName = 'Checkbox'\n"]}

package/dist/index.mjs

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { useNSUI, cn } from '@negative-space/system';
+import { Flex } from '@negative-space/flex';
+import { Checkmark } from '@negative-space/checkmark';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/Checkbox.tsx
+var Checkbox = React.forwardRef(
+  ({
+    classNames,
+    styles,
+    children,
+    checked,
+    defaultChecked = false,
+    disabled,
+    isPopDisabled,
+    checkmarkProps,
+    alignItems = "center",
+    ...props
+  }, ref) => {
+    const { global, components } = useNSUI();
+    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    const isChecked = checked !== void 0 ? checked : internalChecked;
+    const IsPopDisabled = isPopDisabled ?? components.checkbox.isPopDisabled;
+    const toggleChecked = () => {
+      if (disabled) return;
+      if (checked === void 0) {
+        setInternalChecked(!internalChecked);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggleChecked();
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        ...props,
+        ref,
+        as: "label",
+        alignItems,
+        className: cn(`${global.prefixCls}-checkbox-label`, classNames?.label),
+        style: styles?.label,
+        role: "checkbox",
+        "aria-checked": isChecked,
+        "aria-disabled": disabled,
+        "data-disabled": disabled,
+        tabIndex: disabled ? -1 : 0,
+        onClick: toggleChecked,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-checked": isChecked,
+              "data-disabled": disabled,
+              className: cn(`${global.prefixCls}-checkbox`, classNames?.checkbox),
+              style: styles?.checkbox,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-checked": isChecked,
+                    className: cn(
+                      `${global.prefixCls}-checkbox-inner`,
+                      isChecked && !IsPopDisabled && `${global.prefixCls}-pop`,
+                      classNames?.checkboxInner
+                    ),
+                    style: styles?.checkboxInner
+                  }
+                ),
+                /* @__PURE__ */ jsx(Checkmark, { ...checkmarkProps, checked: isChecked })
+              ]
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Checkbox.tsx"],"names":[],"mappings":";;;;;;;AA0BO,IAAM,WAAW,KAAA,CAAM,UAAA;AAAA,EAC5B,CACE;AAAA,IACE,UAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,cAAA,GAAiB,KAAA;AAAA,IACjB,QAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA,GAAa,QAAA;AAAA,IACb,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,EAAE,MAAA,EAAQ,UAAA,EAAW,GAAI,OAAA,EAAQ;AACvC,IAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,cAAc,CAAA;AACrE,IAAA,MAAM,SAAA,GAAY,OAAA,KAAY,MAAA,GAAY,OAAA,GAAU,eAAA;AACpD,IAAA,MAAM,aAAA,GAAgB,aAAA,IAAiB,UAAA,CAAW,QAAA,CAAS,aAAA;AAE3D,IAAA,MAAM,gBAAgB,MAAM;AAC1B,MAAA,IAAI,QAAA,EAAU;AACd,MAAA,IAAI,YAAY,MAAA,EAAW;AACzB,QAAA,kBAAA,CAAmB,CAAC,eAAe,CAAA;AAAA,MACrC;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,aAAA,GAAgB,CAAC,CAAA,KAA2C;AAChE,MAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,OAAA,IAAW,CAAA,CAAE,QAAQ,GAAA,EAAK;AACtC,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,aAAA,EAAc;AAAA,MAChB;AAAA,IACF,CAAA;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,GAAA;AAAA,QACA,EAAA,EAAG,OAAA;AAAA,QACH,UAAA;AAAA,QACA,WAAW,EAAA,CAAG,CAAA,EAAG,OAAO,SAAS,CAAA,eAAA,CAAA,EAAmB,YAAY,KAAK,CAAA;AAAA,QACrE,OAAO,MAAA,EAAQ,KAAA;AAAA,QACf,IAAA,EAAK,UAAA;AAAA,QACL,cAAA,EAAc,SAAA;AAAA,QACd,eAAA,EAAe,QAAA;AAAA,QACf,eAAA,EAAe,QAAA;AAAA,QACf,QAAA,EAAU,WAAW,EAAA,GAAK,CAAA;AAAA,QAC1B,OAAA,EAAS,aAAA;AAAA,QACT,SAAA,EAAW,aAAA;AAAA,QAEX,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,aAAA,EAAY,MAAA;AAAA,cACZ,cAAA,EAAc,SAAA;AAAA,cACd,eAAA,EAAe,QAAA;AAAA,cACf,WAAW,EAAA,CAAG,CAAA,EAAG,OAAO,SAAS,CAAA,SAAA,CAAA,EAAa,YAAY,QAAQ,CAAA;AAAA,cAClE,OAAO,MAAA,EAAQ,QAAA;AAAA,cAEf,QAAA,EAAA;AAAA,gCAAA,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,cAAA,EAAc,SAAA;AAAA,oBACd,SAAA,EAAW,EAAA;AAAA,sBACT,CAAA,EAAG,OAAO,SAAS,CAAA,eAAA,CAAA;AAAA,sBACnB,SAAA,IAAa,CAAC,aAAA,IAAiB,CAAA,EAAG,OAAO,SAAS,CAAA,IAAA,CAAA;AAAA,sBAClD,UAAA,EAAY;AAAA,qBACd;AAAA,oBACA,OAAO,MAAA,EAAQ;AAAA;AAAA,iBACjB;AAAA,gCACA,GAAA,CAAC,SAAA,EAAA,EAAW,GAAG,cAAA,EAAgB,SAAS,SAAA,EAAW;AAAA;AAAA;AAAA,WACrD;AAAA,UAEC;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"index.mjs","sourcesContent":["import React, { useState } from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Flex, type FlexProps } from '@negative-space/flex'\nimport { Checkmark, type CheckmarkProps } from '@negative-space/checkmark'\n\nexport interface CheckboxProps extends Omit<\n  FlexProps<'label'>,\n  'as' | 'type' | 'className' | 'style'\n> {\n  checked?: boolean\n  defaultChecked?: boolean\n  disabled?: boolean\n  classNames?: {\n    label?: string\n    checkbox?: string\n    checkboxInner?: string\n  }\n  styles?: {\n    label?: React.CSSProperties\n    checkbox?: React.CSSProperties\n    checkboxInner?: React.CSSProperties\n  }\n  isPopDisabled?: boolean\n  checkmarkProps?: CheckmarkProps\n}\n\nexport const Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(\n  (\n    {\n      classNames,\n      styles,\n      children,\n      checked,\n      defaultChecked = false,\n      disabled,\n      isPopDisabled,\n      checkmarkProps,\n      alignItems = 'center',\n      ...props\n    },\n    ref\n  ) => {\n    const { global, components } = useNSUI()\n    const [internalChecked, setInternalChecked] = useState(defaultChecked)\n    const isChecked = checked !== undefined ? checked : internalChecked\n    const IsPopDisabled = isPopDisabled ?? components.checkbox.isPopDisabled\n\n    const toggleChecked = () => {\n      if (disabled) return\n      if (checked === undefined) {\n        setInternalChecked(!internalChecked)\n      }\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        toggleChecked()\n      }\n    }\n\n    return (\n      <Flex\n        {...props}\n        ref={ref}\n        as=\"label\"\n        alignItems={alignItems}\n        className={cn(`${global.prefixCls}-checkbox-label`, classNames?.label)}\n        style={styles?.label}\n        role=\"checkbox\"\n        aria-checked={isChecked}\n        aria-disabled={disabled}\n        data-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        onClick={toggleChecked}\n        onKeyDown={handleKeyDown}\n      >\n        <span\n          aria-hidden=\"true\"\n          data-checked={isChecked}\n          data-disabled={disabled}\n          className={cn(`${global.prefixCls}-checkbox`, classNames?.checkbox)}\n          style={styles?.checkbox}\n        >\n          <span\n            data-checked={isChecked}\n            className={cn(\n              `${global.prefixCls}-checkbox-inner`,\n              isChecked && !IsPopDisabled && `${global.prefixCls}-pop`,\n              classNames?.checkboxInner\n            )}\n            style={styles?.checkboxInner}\n          />\n          <Checkmark {...checkmarkProps} checked={isChecked} />\n        </span>\n\n        {children}\n      </Flex>\n    )\n  }\n)\n\nCheckbox.displayName = 'Checkbox'\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@negative-space/checkbox",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "publishConfig": {
     "access": "public"
   },
@@ -30,13 +30,12 @@
     "url": "https://github.com/negative-space-ui/nsui/issues"
   },
   "dependencies": {
-    "clsx": "^2.1.1",
-    "@negative-space/checkmark": "1.0.1",
-    "@negative-space/flex": "1.0.3",
-    "@negative-space/provider": "1.6.0"
+    "@negative-space/checkmark": "1.1.1",
+    "@negative-space/flex": "1.1.1",
+    "@negative-space/system": "1.0.1"
   },
   "peerDependencies": {
-    "react": "^19.2.1"
+    "react": "^19.2.3"
   },
   "clean-package": "../../../../clean-package.config.json",
   "exports": {