🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@cloudflare/component-checkbox

Package Overview
Dependencies
Maintainers
35
Versions
577
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cloudflare/component-checkbox - npm Package Compare versions

Comparing version

5.1.0
to
5.2.0

3

dist/Checkbox.d.ts

@@ -21,5 +21,6 @@ import React from 'react';

marginRight?: string | number;
size?: number;
};
declare type Props = Omit<React.ComponentProps<typeof Div>, keyof CheckboxProps | 'onChange'> & CheckboxProps;
declare function Checkbox({ id, name, className, indeterminate, checked, value, onChange, disabled, testId, label, invalid, noLabel, spacing, unwrap, marginRight, ...labelProps }: Props): JSX.Element;
declare function Checkbox({ id, name, className, indeterminate, checked, value, onChange, disabled, testId, label, invalid, noLabel, spacing, unwrap, marginRight, size, ...labelProps }: Props): JSX.Element;
export default Checkbox;

27

es/Checkbox.js

@@ -1,2 +0,2 @@

var _excluded = ["id", "name", "className", "indeterminate", "checked", "value", "onChange", "disabled", "testId", "label", "invalid", "noLabel", "spacing", "unwrap", "marginRight"];
var _excluded = ["id", "name", "className", "indeterminate", "checked", "value", "onChange", "disabled", "testId", "label", "invalid", "noLabel", "spacing", "unwrap", "marginRight", "size"];

@@ -19,10 +19,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import { Span, Label } from '@cloudflare/elements';
var size = 16;
var lightSvgs = {
encodedCheck: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(size, "' height='").concat(size, "' viewBox='0 0 ").concat(size, " ").concat(size, "' %3E%3Cg %3E%3Cg fill='").concat(theme.colors.gray[3].replace('#', '%23'), "' %3E%3Cpath d='M0,0 L16,0 L16,16 L0,16 L0,0 Z M14,4.57911065 L12.4208893,3 L6.26344364,9.1582213 L3.57911065,6.47388831 L2,8.05222337 L6.26344364,12.315667 L14,4.57911065 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")"),
encodedIndeterminate: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(size, "' height='").concat(size, "' viewBox='0 0 ").concat(size, " ").concat(size, "' %3E%3Cg %3E%3Cg fill='%23a692ac' %3E%3Cpath d='M0,0 L16,0 L16,16 L0,16 L0,0 Z M2,7 L2,9 L14,9 L14,7 L2,7 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")")
encodedCheck: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' %3E%3Cg %3E%3Cg fill='".concat(theme.colors.gray[3].replace('#', '%23'), "' %3E%3Cpath d='M0,0 L16,0 L16,16 L0,16 L0,0 Z M14,4.57911065 L12.4208893,3 L6.26344364,9.1582213 L3.57911065,6.47388831 L2,8.05222337 L6.26344364,12.315667 L14,4.57911065 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")"),
encodedIndeterminate: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' %3E%3Cg %3E%3Cg fill='%23a692ac' %3E%3Cpath d='M0,0 L16,0 L16,16 L0,16 L0,0 Z M2,7 L2,9 L14,9 L14,7 L2,7 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")"
};
var darkSvgs = {
encodedCheck: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(size, "' height='").concat(size, "' viewBox='0 0 ").concat(size, " ").concat(size, "' %3E%3Cg %3E%3Cg fill='").concat(theme.colors.gray[6].replace('#', '%23'), "' %3E%3Cpath d='M0,0 L16,0 L16,16 L0,16 L0,0 Z M14,4.57911065 L12.4208893,3 L6.26344364,9.1582213 L3.57911065,6.47388831 L2,8.05222337 L6.26344364,12.315667 L14,4.57911065 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")"),
encodedIndeterminate: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(size, "' height='").concat(size, "' viewBox='0 0 ").concat(size, " ").concat(size, "' %3E%3Cg %3E%3Cg fill='").concat(theme.colors.gray[6].replace('#', '%23'), "' %3E%3Cpath d='M0,0 L16,0 L16,16 L0,16 L0,0 Z M2,7 L2,9 L14,9 L14,7 L2,7 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")")
encodedCheck: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' %3E%3Cg %3E%3Cg fill='".concat(theme.colors.gray[6].replace('#', '%23'), "' %3E%3Cpath d='M0,0 L16,0 L16,16 L0,16 L0,0 Z M14,4.57911065 L12.4208893,3 L6.26344364,9.1582213 L3.57911065,6.47388831 L2,8.05222337 L6.26344364,12.315667 L14,4.57911065 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")"),
encodedIndeterminate: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' %3E%3Cg %3E%3Cg fill='".concat(theme.colors.gray[6].replace('#', '%23'), "' %3E%3Cpath d='M0,0 L16,0 L16,16 L0,16 L0,0 Z M2,7 L2,9 L14,9 L14,7 L2,7 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")")
};

@@ -36,3 +35,4 @@ var CheckboxInput = createStyledComponent(_ref => {

disabled,
marginRight
marginRight,
size
} = _ref;

@@ -58,5 +58,6 @@ var svgs = isDarkMode() ? darkSvgs : lightSvgs;

marginLeft: 0,
backgroundPosition: '-1px 0',
backgroundColor: disabled ? theme.colors.gray[8] : isDarkMode() ? theme.colors.white : theme.colors.background,
backgroundImage: indeterminate ? svgs.encodedIndeterminate : checked ? svgs.encodedCheck : 'none'
backgroundPosition: indeterminate ? '-1px' : '-1px 0',
backgroundColor: disabled ? theme.colors.gray[8] : theme.colors.background,
backgroundImage: indeterminate ? svgs.encodedIndeterminate : checked ? svgs.encodedCheck : 'none',
backgroundSize: "".concat(size, "px ").concat(size, "px")
});

@@ -81,3 +82,4 @@ }, 'input');

unwrap,
marginRight = 3
marginRight = 3,
size = 16
} = _ref2,

@@ -98,3 +100,4 @@ labelProps = _objectWithoutProperties(_ref2, _excluded);

value: value,
marginRight: marginRight
marginRight: marginRight,
size: size
});

@@ -101,0 +104,0 @@ checkbox = unwrap ? checkbox : /*#__PURE__*/React.createElement("div", null, checkbox);

26

lib/Checkbox.js

@@ -16,3 +16,3 @@ "use strict";

var _excluded = ["id", "name", "className", "indeterminate", "checked", "value", "onChange", "disabled", "testId", "label", "invalid", "noLabel", "spacing", "unwrap", "marginRight"];
var _excluded = ["id", "name", "className", "indeterminate", "checked", "value", "onChange", "disabled", "testId", "label", "invalid", "noLabel", "spacing", "unwrap", "marginRight", "size"];

@@ -33,10 +33,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var size = 16;
var lightSvgs = {
encodedCheck: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(size, "' height='").concat(size, "' viewBox='0 0 ").concat(size, " ").concat(size, "' %3E%3Cg %3E%3Cg fill='").concat(_styleConst.theme.colors.gray[3].replace('#', '%23'), "' %3E%3Cpath d='M0,0 L16,0 L16,16 L0,16 L0,0 Z M14,4.57911065 L12.4208893,3 L6.26344364,9.1582213 L3.57911065,6.47388831 L2,8.05222337 L6.26344364,12.315667 L14,4.57911065 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")"),
encodedIndeterminate: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(size, "' height='").concat(size, "' viewBox='0 0 ").concat(size, " ").concat(size, "' %3E%3Cg %3E%3Cg fill='%23a692ac' %3E%3Cpath d='M0,0 L16,0 L16,16 L0,16 L0,0 Z M2,7 L2,9 L14,9 L14,7 L2,7 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")")
encodedCheck: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' %3E%3Cg %3E%3Cg fill='".concat(_styleConst.theme.colors.gray[3].replace('#', '%23'), "' %3E%3Cpath d='M0,0 L16,0 L16,16 L0,16 L0,0 Z M14,4.57911065 L12.4208893,3 L6.26344364,9.1582213 L3.57911065,6.47388831 L2,8.05222337 L6.26344364,12.315667 L14,4.57911065 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")"),
encodedIndeterminate: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' %3E%3Cg %3E%3Cg fill='%23a692ac' %3E%3Cpath d='M0,0 L16,0 L16,16 L0,16 L0,0 Z M2,7 L2,9 L14,9 L14,7 L2,7 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")"
};
var darkSvgs = {
encodedCheck: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(size, "' height='").concat(size, "' viewBox='0 0 ").concat(size, " ").concat(size, "' %3E%3Cg %3E%3Cg fill='").concat(_styleConst.theme.colors.gray[6].replace('#', '%23'), "' %3E%3Cpath d='M0,0 L16,0 L16,16 L0,16 L0,0 Z M14,4.57911065 L12.4208893,3 L6.26344364,9.1582213 L3.57911065,6.47388831 L2,8.05222337 L6.26344364,12.315667 L14,4.57911065 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")"),
encodedIndeterminate: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(size, "' height='").concat(size, "' viewBox='0 0 ").concat(size, " ").concat(size, "' %3E%3Cg %3E%3Cg fill='").concat(_styleConst.theme.colors.gray[6].replace('#', '%23'), "' %3E%3Cpath d='M0,0 L16,0 L16,16 L0,16 L0,0 Z M2,7 L2,9 L14,9 L14,7 L2,7 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")")
encodedCheck: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' %3E%3Cg %3E%3Cg fill='".concat(_styleConst.theme.colors.gray[6].replace('#', '%23'), "' %3E%3Cpath d='M0,0 L16,0 L16,16 L0,16 L0,0 Z M14,4.57911065 L12.4208893,3 L6.26344364,9.1582213 L3.57911065,6.47388831 L2,8.05222337 L6.26344364,12.315667 L14,4.57911065 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")"),
encodedIndeterminate: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' %3E%3Cg %3E%3Cg fill='".concat(_styleConst.theme.colors.gray[6].replace('#', '%23'), "' %3E%3Cpath d='M0,0 L16,0 L16,16 L0,16 L0,0 Z M2,7 L2,9 L14,9 L14,7 L2,7 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")")
};

@@ -49,3 +48,4 @@ var CheckboxInput = (0, _styleContainer.createStyledComponent)(function (_ref) {

disabled = _ref.disabled,
marginRight = _ref.marginRight;
marginRight = _ref.marginRight,
size = _ref.size;
var svgs = (0, _styleConst.isDarkMode)() ? darkSvgs : lightSvgs;

@@ -70,5 +70,6 @@ return _objectSpread(_objectSpread(_objectSpread({

marginLeft: 0,
backgroundPosition: '-1px 0',
backgroundColor: disabled ? theme.colors.gray[8] : (0, _styleConst.isDarkMode)() ? theme.colors.white : theme.colors.background,
backgroundImage: indeterminate ? svgs.encodedIndeterminate : checked ? svgs.encodedCheck : 'none'
backgroundPosition: indeterminate ? '-1px' : '-1px 0',
backgroundColor: disabled ? theme.colors.gray[8] : theme.colors.background,
backgroundImage: indeterminate ? svgs.encodedIndeterminate : checked ? svgs.encodedCheck : 'none',
backgroundSize: "".concat(size, "px ").concat(size, "px")
});

@@ -97,2 +98,4 @@ }, 'input');

marginRight = _ref2$marginRight === void 0 ? 3 : _ref2$marginRight,
_ref2$size = _ref2.size,
size = _ref2$size === void 0 ? 16 : _ref2$size,
labelProps = _objectWithoutProperties(_ref2, _excluded);

@@ -112,3 +115,4 @@

value: value,
marginRight: marginRight
marginRight: marginRight,
size: size
});

@@ -115,0 +119,0 @@

2

package.json
{
"name": "@cloudflare/component-checkbox",
"description": "Cloudflare Checkbox Component",
"version": "5.1.0",
"version": "5.2.0",
"main": "lib/index.js",

@@ -6,0 +6,0 @@ "module": "es/index.js",

CHANGELOG.md

Sorry, the diff of this file is too big to display