@peculiar/react-components 0.3.9 → 0.3.10

package/dist/esnext/Switch/switch.js

@@ -4,18 +4,14 @@ import { useId } from '../hooks';
 import { css, cx } from '../styles';
 const stylesBase = () => css({
     label: 'Switch',
-    cursor: 'pointer',
     display: 'inline-flex',
     width: 'var(--pv-size-base-7)',
     height: 'var(--pv-size-base-4)',
     borderRadius: 'var(--pv-size-base-4)',
     justifyContent: 'center',
+    position: 'relative',
     alignItems: 'center',
 });
-const stylesBaseDisabled = () => css({
-    label: 'disabled',
-    cursor: 'not-allowed',
-});
 const stylesInput = (props) => css({
     label: 'Switch-input',
     overflow: 'hidden',
@@ -23,66 +19,75 @@ const stylesInput = (props) => css({
     height: '100%',
     margin: 0,
     padding: 0,
-    cursor: 'inherit',
-    borderRadius: 'var(--pv-size-base-4)',
+    outline: 0,
+    borderRadius: 'inherit',
     appearance: 'none',
     backgroundColor: 'var(--pv-color-gray-6)',
     '&:checked': {
         backgroundColor: `var(--pv-color-${props.color})`,
         '+ [aria-hidden]': {
-            transform: 'translate(calc(100% - 1px),-50%)',
+            transform: 'translateX(calc(50% - 2px))',
+            '&:before': {
+                backgroundColor: `var(--pv-color-${props.color}-shade-2)`,
+            },
         },
     },
     '&:disabled': {
+        cursor: 'not-allowed',
+        pointerEvents: 'none',
         opacity: 0.4,
-        '&:checked': {
-            backgroundColor: `var(--pv-color-${props.color}-tint-3)`,
-            opacity: 0.6,
+    },
+    '&:not(:disabled)': {
+        cursor: 'pointer',
+        '&:hover': {
+            '+ [aria-hidden]:before': {
+                opacity: 0.18,
+            },
         },
-        '+ [aria-hidden]': {
-            opacity: 0.8,
+        '&:focus': {
+            '+ [aria-hidden]:before': {
+                opacity: 0.23,
+            },
+        },
+        '&:active': {
+            '+ [aria-hidden]:before': {
+                opacity: 0.30,
+            },
         },
-    },
-});
-const stylesControl = (props) => css({
-    label: 'Switch-control',
-    width: 'var(--pv-size-base-7)',
-    height: 'var(--pv-size-base-4)',
-    position: 'relative',
-    color: `var(--pv-color-${props.color})`,
-    '&:after': {
-        top: '-10px',
-        left: '-10px',
-        right: '-10px',
-        bottom: '-10px',
-        content: '""',
-        position: 'absolute',
-        borderRadius: '50%',
     },
 });
 const stylesDot = () => css({
     label: 'Switch-dot',
     display: 'block',
     position: 'absolute',
-    top: '50%',
     width: 'var(--pv-size-base-3)',
     height: 'var(--pv-size-base-3)',
-    transform: 'translate(calc(2px), -50%)',
     transition: 'transform 200ms',
     boxShadow: 'var(--pv-shadow-light-low)',
-    boxSizing: 'content-box',
+    transform: 'translateX(calc(-50% + 2px))',
+    pointerEvents: 'none',
+    '&:before': {
+        top: '-10px',
+        left: '-10px',
+        right: '-10px',
+        bottom: '-10px',
+        content: '""',
+        position: 'absolute',
+        borderRadius: '50%',
+        opacity: 0,
+        backgroundColor: 'var(--pv-color-gray-9)',
+        transition: 'opacity 200ms, background-color 200ms',
+    },
 });
 export const Switch = React.forwardRef((props, ref) => {
     const { checked, defaultChecked, color = 'primary', required, inputProps, className, disabled, id: idProp, name, onChange, ...other } = props;
     const id = useId(idProp);
     return (React.createElement("label", { ...other, ref: ref, htmlFor: id, className: cx({
             [stylesBase()]: true,
-            [stylesBaseDisabled()]: disabled,
             [className]: !!className,
         }) },
-        React.createElement(Box, { component: "span", className: cx(stylesControl(props)) },
-            React.createElement("input", { ...inputProps, type: "checkbox", name: name, id: id, checked: checked, defaultChecked: defaultChecked, required: required, disabled: disabled, className: cx(stylesInput(props)), onChange: onChange }),
-            React.createElement(Box, { "aria-hidden": true, className: cx(stylesDot()), background: `${color}-contrast`, borderColor: "gray-3", borderWidth: 1, borderStyle: "solid", borderRadius: 100 }))));
+        React.createElement("input", { ...inputProps, type: "checkbox", name: name, id: id, checked: checked, defaultChecked: defaultChecked, required: required, disabled: disabled, className: cx(stylesInput(props)), onChange: onChange }),
+        React.createElement(Box, { "aria-hidden": true, className: cx(stylesDot()), background: `${color}-contrast`, borderColor: "gray-3", borderWidth: 1, borderStyle: "solid", borderRadius: 100 })));
 });
 Switch.displayName = 'Switch';
 Switch.defaultProps = {

package/dist/esnext/Switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/Switch/switch.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/Switch/switch.tsx"],"names":[],"mappings":"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"}

package/dist/types/Checkbox/checkbox.d.ts

@@ -1,4 +1,7 @@
 import * as React from 'react';
+/**
+ * Types.
+ */
 declare type BaseProps = {
     /**
      * If `true`, the component is checked.
@@ -39,5 +42,8 @@ declare type BaseProps = {
     'data-testid'?: string;
 };
 export declare type CheckboxProps = BaseProps & Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children' | 'htmlFor' | 'onChange'>;
+/**
+ *
+ */
 export declare const Checkbox: React.ForwardRefExoticComponent<BaseProps & Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "children" | "htmlFor" | "onChange"> & React.RefAttributes<HTMLLabelElement>>;
 export {};

package/dist/types/Radio/radio.d.ts

@@ -43,5 +43,8 @@ declare type BaseProps = {
     'data-testid'?: string;
 };
 export declare type RadioProps = BaseProps & Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children' | 'htmlFor' | 'onChange'>;
+/**
+ *
+ */
 export declare const Radio: React.ForwardRefExoticComponent<BaseProps & Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "children" | "htmlFor" | "onChange"> & React.RefAttributes<HTMLLabelElement>>;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peculiar/react-components",
   "private": false,
-  "version": "0.3.9",
+  "version": "0.3.10",
   "author": "PeculiarVentures Team",
   "description": "A simple and customizable component library to build faster, beautiful, and more accessible React applications.",
   "keywords": [
@@ -93,5 +93,5 @@
     "node": ">=12.x"
   },
   "license": "MIT",
-  "gitHead": "2adaf518c89232b406366a84852ecd6f50d284bd"
+  "gitHead": "dbee55269a6826948da728704d8c017ca3c37ef8"
 }