@pikas-ui/checkbox - npm Package Compare versions

Comparing version 1.0.24 to 1.0.25

dist/Checkbox.d.ts

 import { ColorsType, ShadowsType, BorderRadiusType, FontsSizesType } from '@pikas-ui/styles';
 import React, { ReactNode } from 'react';
 
-declare const CheckboxSideType: {
+declare const CheckboxSide: {
     left: boolean;
     right: boolean;
 };
+declare type CheckboxSideType = keyof typeof CheckboxSide;
 interface CheckboxProps {
@@ -27,3 +28,3 @@ defaultChecked?: boolean;
     name?: string;
-    side?: keyof typeof CheckboxSideType;
+    side?: CheckboxSideType;
     outline?: boolean;
@@ -34,2 +35,2 @@ indeterminate?: boolean;
 
-export { Checkbox, CheckboxProps, CheckboxSideType };
+export { Checkbox, CheckboxProps, CheckboxSide, CheckboxSideType };

dist/Checkbox.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _styles = require('@pikas-ui/styles');var _icons = require('@pikas-ui/icons');var _text = require('@pikas-ui/text');var _react = require('react'); var _react2 = _interopRequireDefault(_react);var _reactcheckbox = require('@radix-ui/react-checkbox'); var k = _interopRequireWildcard(_reactcheckbox);var _fontcolorcontrast = require('font-color-contrast'); var _fontcolorcontrast2 = _interopRequireDefault(_fontcolorcontrast);const M=_styles.styled.call(void 0, "div",{display:"flex",flexDirection:"column",userSelect:"none"}),z=_styles.styled.call(void 0, k.Root,{all:"unset",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",borderStyle:"solid",variants:{focus:{true:{outline:"solid",outlineColor:"$PRIMARY",outlineWidth:2}}}}),H=_styles.styled.call(void 0, k.Indicator,{}),O=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center"}),J= exports.CheckboxSideType ={left:!0,right:!0},q= exports.Checkbox =({id:n,label:r,textError:l,fontSize:S,className:I,defaultChecked:$,checked:i,onChange:a,disabled:v,required:N,name:W,bgColor:c,bgColorChecked:u,borderRadius:E,boxShadow:F,borderColor:L,borderWidth:R,size:o,side:m,outline:w,indeterminate:f})=>{const[s,d]=_react.useState.call(void 0, "indeterminate"),[P,b]=_react.useState.call(void 0, !1),A=h=>{d(h),a&&a(h)};return _react.useEffect.call(void 0, ()=>{i!==void 0&&d(i)},[i]),_react.useEffect.call(void 0, ()=>{f&&d("indeterminate")},[f]),_react2.default.createElement(M,{className:I,css:{fontSize:`$${S}`}},_react2.default.createElement(O,null,r&&m==="left"?_react2.default.createElement(_text.Label,{htmlFor:n,style:{marginRight:8,fontWeight:"$NORMAL"}},r):null,_react2.default.createElement(z,{defaultChecked:$,id:n,onCheckedChange:A,checked:s,disabled:v,required:N,name:W,focus:w?P:void 0,onFocus:()=>b(!0),onBlur:()=>b(!1),css:{backgroundColor:`$${c}`,br:E,boxShadow:`$${F}`,borderColor:`$${L}`,borderWidth:R,width:o,height:o,'&[aria-checked="true"]':{backgroundColor:`$${u}`}}},_react2.default.createElement(H,{css:{color:_fontcolorcontrast2.default.call(void 0, _styles.theme.colors[u||"WHITE"].value,.7)}},s==="indeterminate"&&_react2.default.createElement(_icons.IconByName,{name:"bx:minus",colorHex:_fontcolorcontrast2.default.call(void 0, _styles.theme.colors[c||"BLACK"].value,.7),styles:{container:{opacity:.5}},size:o?o/1.25:void 0}),s===!0&&_react2.default.createElement(_icons.IconByName,{name:"bx:check",size:o?o/1.25:void 0}))),r&&m==="right"?_react2.default.createElement(_text.Label,{htmlFor:n,style:{marginLeft:8,fontWeight:"$NORMAL"}},r):null),l?_react2.default.createElement(_text.TextError,{style:{marginTop:5}},l):null)};q.defaultProps={bgColor:"WHITE",bgColorChecked:"PRIMARY",boxShadow:"DIMINUTION_1",borderRadius:"md",size:24,side:"right",borderWidth:0,outline:!0};exports.Checkbox = q; exports.CheckboxSideType = J;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _styles = require('@pikas-ui/styles');var _icons = require('@pikas-ui/icons');var _text = require('@pikas-ui/text');var _react = require('react'); var _react2 = _interopRequireDefault(_react);var _reactcheckbox = require('@radix-ui/react-checkbox'); var g = _interopRequireWildcard(_reactcheckbox);var _fontcolorcontrast = require('font-color-contrast'); var _fontcolorcontrast2 = _interopRequireDefault(_fontcolorcontrast);const B=_styles.styled.call(void 0, "div",{display:"flex",flexDirection:"column",userSelect:"none"}),z=_styles.styled.call(void 0, g.Root,{all:"unset",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",borderStyle:"solid",variants:{focus:{true:{outline:"solid",outlineColor:"$PRIMARY",outlineWidth:2}}}}),q=_styles.styled.call(void 0, g.Indicator,{}),D=_styles.styled.call(void 0, "div",{display:"flex",alignItems:"center"}),J= exports.CheckboxSide ={left:!0,right:!0},H= exports.Checkbox =({id:n,label:r,textError:l,fontSize:T,className:I,defaultChecked:$,checked:i,onChange:a,disabled:v,required:E,name:N,bgColor:c,bgColorChecked:u,borderRadius:M,boxShadow:W,borderColor:F,borderWidth:L,size:o,side:f,outline:R,indeterminate:m})=>{const[s,d]=_react.useState.call(void 0, "indeterminate"),[w,b]=_react.useState.call(void 0, !1),P=h=>{d(h),a&&a(h)};return _react.useEffect.call(void 0, ()=>{i!==void 0&&d(i)},[i]),_react.useEffect.call(void 0, ()=>{m&&d("indeterminate")},[m]),_react2.default.createElement(B,{className:I,css:{fontSize:`$${T}`}},_react2.default.createElement(D,null,r&&f==="left"?_react2.default.createElement(_text.Label,{htmlFor:n,style:{marginRight:8,fontWeight:"$NORMAL"}},r):null,_react2.default.createElement(z,{defaultChecked:$,id:n,onCheckedChange:P,checked:s,disabled:v,required:E,name:N,focus:R?w:void 0,onFocus:()=>b(!0),onBlur:()=>b(!1),css:{backgroundColor:`$${c}`,br:M,boxShadow:`$${W}`,borderColor:`$${F}`,borderWidth:L,width:o,height:o,'&[aria-checked="true"]':{backgroundColor:`$${u}`}}},_react2.default.createElement(q,{css:{color:_fontcolorcontrast2.default.call(void 0, _styles.theme.colors[u||"WHITE"].value,.7)}},s==="indeterminate"&&_react2.default.createElement(_icons.IconByName,{name:"bx:minus",colorHex:_fontcolorcontrast2.default.call(void 0, _styles.theme.colors[c||"BLACK"].value,.7),styles:{container:{opacity:.5}},size:o?o/1.25:void 0}),s===!0&&_react2.default.createElement(_icons.IconByName,{name:"bx:check",size:o?o/1.25:void 0}))),r&&f==="right"?_react2.default.createElement(_text.Label,{htmlFor:n,style:{marginLeft:8,fontWeight:"$NORMAL"}},r):null),l?_react2.default.createElement(_text.TextError,{style:{marginTop:5}},l):null)};H.defaultProps={bgColor:"WHITE",bgColorChecked:"PRIMARY",boxShadow:"DIMINUTION_1",borderRadius:"md",size:24,side:"right",borderWidth:0,outline:!0,fontSize:"EM-MEDIUM",disabled:!1,required:!1,indeterminate:!1,defaultChecked:!1};exports.Checkbox = H; exports.CheckboxSide = J;
 //# sourceMappingURL=Checkbox.js.map

dist/index.d.ts

@@ -1,3 +0,3 @@
-export { Checkbox, CheckboxProps, CheckboxSideType } from './Checkbox.js';
+export { Checkbox, CheckboxProps, CheckboxSide, CheckboxSideType } from './Checkbox.js';
 import '@pikas-ui/styles';
 import 'react';

package.json

 {
   "name": "@pikas-ui/checkbox",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "private": false,
@@ -33,5 +33,5 @@ "description": "",
   "dependencies": {
-    "@pikas-ui/icons": "1.0.24",
-    "@pikas-ui/styles": "1.0.24",
-    "@pikas-ui/text": "1.0.24",
+    "@pikas-ui/icons": "1.0.25",
+    "@pikas-ui/styles": "1.0.25",
+    "@pikas-ui/text": "1.0.25",
     "@radix-ui/react-checkbox": "^0.1.5",
@@ -38,0 +38,0 @@ "font-color-contrast": "^11.1.0",

README.md

@@ -33,3 +33,43 @@ # @pikas-ui/checkbox
 
+## Usage
+
+### Checkbox
+
+```tsx
+import { Checkbox } from `@pikas-ui/checkbox`
+
+const Example: React.FC = () => (
+  <Checkbox />
+)
+```
+
+#### Props
+
+| Prop             | Description                                        | Type                         | Default          |
+|:-----------------|:---------------------------------------------------|:-----------------------------|:-----------------|
+| `defaultChecked` | The default checked of the checkbox.               | `boolean`                    | `false`          |
+| `onChange`       | The callback when the checkbox is changed.         | `(checked: boolean) => void` | -                |
+| `id`             | The id of the checkbox.                            | `string`                     | -                |
+| `label`          | The label of the checkbox.                         | `string` or `ReactNode`      | -                |
+| `bgColor`        | The background color of the checkbox.              | `ColorsType`                 | `"WHITE"`        |
+| `bgColorChecked` | The background color of the checkbox when checked. | `ColorsType`                 | `"PRIMARY"`      |
+| `textError`      | The error text of the checkbox.                    | `string`                     | -                |
+| `boxShadow`      | The box shadow of the checkbox.                    | `ShadowsType` or `"none"`    | `"DIMINUTION_1"` |
+| `borderColor`    | The border color of the checkbox.                  | `ColorsType`                 | -                |
+| `borderWidth`    | The border width of the checkbox.                  | `number`                     | `0`              |
+| `borderRadius`   | The border radius of the checkbox.                 | `BorderRadiusType`           | `"md"`           |
+| `fontSize`       | The font size of the checkbox.                     | `FontsSizesType`             | `"EM-MEDIUM"`    |
+| `size`           | The size of the checkbox.                          | `number`                     | `24`             |
+| `checked`        | The checked of the checkbox.                       | `boolean`                    | -                |
+| `className`      | The class name of the checkbox.                    | `string`                     | -                |
+| `disabled`       | The disabled of the checkbox.                      | `boolean`                    | `false`          |
+| `required`       | The required of the checkbox.                      | `boolean`                    | `false`          |
+| `name`           | The name of the checkbox.                          | `string`                     | -                |
+| `side`           | The side of the checkbox.                          | `"left"` or `"right"`        | `"right"`        |
+| `outline`        | The outline of the checkbox.                       | `boolean`                    | `true`           |
+| `indeterminate`  | The indeterminate of the checkbox.                 | `boolean`                    | `false`          |
+
+---
+
 ### Change Log
 You can find the change log [here](CHANGELOG.md).

No alert changes

Improved metrics

Total package byte prevSize

28641

increased by15.01%

Lines of code

60

increased by1.69%

Number of lines in readme file

74

increased by117.65%

Dependency changes

• + Added@pikas-ui/icons@1.0.25(transitive)

• + Added@pikas-ui/styles@1.0.25(transitive)

• + Added@pikas-ui/text@1.0.25(transitive)

• - Removed@pikas-ui/icons@1.0.24(transitive)

• - Removed@pikas-ui/styles@1.0.24(transitive)

• - Removed@pikas-ui/text@1.0.24(transitive)

• Updated@pikas-ui/icons@1.0.25

• Updated@pikas-ui/styles@1.0.25

• Updated@pikas-ui/text@1.0.25