@chakra-ui/styled-system - npm Package Compare versions

Comparing version 0.0.0-canary-2021118164051 to 0.0.0-pr-20211120212826

dist/chakra-ui-styled-system.cjs.dev.js

@@ -1078,32 +1078,38 @@ 'use strict';
 
-var group = {
-  hover: function hover(selector) {
-    return selector + ":hover &, " + selector + "[data-hover] &";
+var state = {
+  hover: function hover(str, post) {
+    return str + ":hover " + post + ", " + str + "[data-hover] " + post;
   },
-  focus: function focus(selector) {
-    return selector + ":focus &, " + selector + "[data-focus] &";
+  focus: function focus(str, post) {
+    return str + ":focus " + post + ", " + str + "[data-focus] " + post;
   },
-  focusVisible: function focusVisible(selector) {
-    return selector + ":focus-visible &";
+  focusVisible: function focusVisible(str, post) {
+    return str + ":focus-visible " + post;
   },
-  active: function active(selector) {
-    return selector + ":active &, " + selector + "[data-active] &";
+  focusWithin: function focusWithin(str, post) {
+    return str + ":focus-within " + post;
   },
-  disabled: function disabled(selector) {
-    return selector + ":disabled &, " + selector + "[data-disabled] &";
+  active: function active(str, post) {
+    return str + ":active " + post + ", " + str + "[data-active] " + post;
   },
-  invalid: function invalid(selector) {
-    return selector + ":invalid &, " + selector + "[data-invalid] &";
+  disabled: function disabled(str, post) {
+    return str + ":disabled " + post + ", " + str + "[data-disabled] " + post;
   },
-  checked: function checked(selector) {
-    return selector + ":checked &, " + selector + "[data-checked] &";
+  invalid: function invalid(str, post) {
+    return str + ":invalid " + post + ", " + str + "[data-invalid] " + post;
   },
-  indeterminate: function indeterminate(selector) {
-    return selector + ":indeterminate &, " + selector + "[aria-checked=mixed] &, " + selector + "[data-indeterminate] &";
+  checked: function checked(str, post) {
+    return str + ":checked " + post + ", " + str + "[data-checked] " + post;
   },
-  readOnly: function readOnly(selector) {
-    return selector + ":read-only &, " + selector + "[readonly] &, " + selector + "[data-read-only] &";
+  indeterminate: function indeterminate(str, post) {
+    return str + ":indeterminate " + post + ", " + str + "[aria-checked=mixed] " + post + ", " + str + "[data-indeterminate] " + post;
   },
-  expanded: function expanded(selector) {
-    return selector + ":read-only &, " + selector + "[aria-expanded=true] &, " + selector + "[data-expanded] &";
+  readOnly: function readOnly(str, post) {
+    return str + ":read-only " + post + ", " + str + "[readonly] " + post + ", " + str + "[data-read-only] " + post;
+  },
+  expanded: function expanded(str, post) {
+    return str + ":read-only " + post + ", " + str + "[aria-expanded=true] " + post + ", " + str + "[data-expanded] " + post;
+  },
+  placeholderShown: function placeholderShown(str, post) {
+    return str + ":placeholder-shown " + post;
   }
@@ -1113,5 +1119,13 @@ };
 var toGroup = function toGroup(fn) {
-  return merge(fn, "[role=group]", "[data-group]", ".group");
+  return merge(function (v) {
+    return fn(v, "&");
+  }, "[role=group]", "[data-group]", ".group");
 };
 
+var toPeer = function toPeer(fn) {
+  return merge(function (v) {
+    return fn(v, "~ &");
+  }, "[data-peer]", ".peer");
+};
+
 var merge = function merge(fn) {
@@ -1152,2 +1166,7 @@ for (var _len = arguments.length, selectors = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
   _focusWithin: "&:focus-within",
+
+  /**
+   * Styles to apply when this element has received focus via tabbing
+   * - CSS Selector `&:focus-visible`
+   */
   _focusVisible: "&:focus-visible",
@@ -1189,2 +1208,6 @@
   _after: "&::after",
+
+  /**
+   * Styles for CSS selector `&:empty`
+   */
   _empty: "&:empty",
@@ -1305,33 +1328,87 @@
   /**
-   * Styles to apply when parent is hovered
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is hovered
    */
-  _groupHover: toGroup(group.hover),
+  _groupHover: toGroup(state.hover),
 
   /**
-   * Styles to apply when parent is focused
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is hovered
    */
-  _groupFocus: toGroup(group.focus),
-  _groupFocusVisible: toGroup(group.focusVisible),
+  _peerHover: toPeer(state.hover),
 
   /**
-   * Styles to apply when parent is active
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is focused
    */
-  _groupActive: toGroup(group.active),
+  _groupFocus: toGroup(state.focus),
 
   /**
-   * Styles to apply when parent is disabled
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is focused
    */
-  _groupDisabled: toGroup(group.disabled),
+  _peerFocus: toPeer(state.focus),
 
   /**
-   * Styles to apply when parent is invalid
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` has visible focus
    */
-  _groupInvalid: toGroup(group.invalid),
+  _groupFocusVisible: toGroup(state.focusVisible),
 
   /**
-   * Styles to apply when parent is checked
+   * Styles to apply when a sibling element with `.peer`or `data-peer` has visible focus
    */
-  _groupChecked: toGroup(group.checked),
+  _peerFocusVisible: toPeer(state.focusVisible),
 
   /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is active
+   */
+  _groupActive: toGroup(state.active),
+
+  /**
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is active
+   */
+  _peerActive: toPeer(state.active),
+
+  /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is disabled
+   */
+  _groupDisabled: toGroup(state.disabled),
+
+  /**
+   *  Styles to apply when a sibling element with `.peer` or `data-peer` is disabled
+   */
+  _peerDisabled: toPeer(state.disabled),
+
+  /**
+   *  Styles to apply when a parent element with `.group`, `data-group` or `role=group` is invalid
+   */
+  _groupInvalid: toGroup(state.invalid),
+
+  /**
+   *  Styles to apply when a sibling element with `.peer` or `data-peer` is invalid
+   */
+  _peerInvalid: toPeer(state.invalid),
+
+  /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is checked
+   */
+  _groupChecked: toGroup(state.checked),
+
+  /**
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is checked
+   */
+  _peerChecked: toPeer(state.checked),
+
+  /**
+   *  Styles to apply when a parent element with `.group`, `data-group` or `role=group` has focus within
+   */
+  _groupFocusWithin: toGroup(state.focusWithin),
+
+  /**
+   *  Styles to apply when a sibling element with `.peer` or `data-peer` has focus within
+   */
+  _peerFocusWithin: toPeer(state.focusWithin),
+
+  /**
+   * Styles to apply when a sibling element with `.peer` or `data-peer` has placeholder shown
+   */
+  _peerPlaceholderShown: toPeer(state.placeholderShown),
+
+  /**
    * Styles for CSS Selector `&::placeholder`.
@@ -1342,2 +1419,7 @@ */
   /**
+   * Styles for CSS Selector `&::placeholder-shown`.
+   */
+  _placeholderShown: "&::placeholder-shown",
+
+  /**
    * Styles for CSS Selector `&:fullscreen`.
@@ -1354,10 +1436,15 @@ */
    * Styles for CSS Selector `[dir=rtl] &`
-   * It is applied when any parent element has `dir="rtl"`
+   * It is applied when a parent element or this element has `dir="rtl"`
    */
-  _rtl: "[dir=rtl] &",
+  _rtl: "[dir=rtl] &, &[dir=rtl]",
 
   /**
+   * Styles for CSS Selector `[dir=ltr] &`
+   * It is applied when a parent element or this element has `dir="ltr"`
+   */
+  _ltr: "[dir=ltr] &, &[dir=ltr]",
+
+  /**
    * Styles for CSS Selector `@media (prefers-color-scheme: dark)`
-   * used when the user has requested the system
-   * use a light or dark color theme.
+   * It is used when the user has requested the system use a light or dark color theme.
    */
@@ -1367,2 +1454,8 @@ _mediaDark: "@media (prefers-color-scheme: dark)",
   /**
+   * Styles for CSS Selector `@media (prefers-reduced-motion: reduce)`
+   * It is used when the user has requested the system to reduce the amount of animations.
+   */
+  _mediaReduceMotion: "@media (prefers-reduced-motion: reduce)",
+
+  /**
    * Styles for when `data-theme` is applied to any parent of
@@ -1369,0 +1462,0 @@ * this component or element.

dist/chakra-ui-styled-system.cjs.prod.js

@@ -1078,32 +1078,38 @@ 'use strict';
 
-var group = {
-  hover: function hover(selector) {
-    return selector + ":hover &, " + selector + "[data-hover] &";
+var state = {
+  hover: function hover(str, post) {
+    return str + ":hover " + post + ", " + str + "[data-hover] " + post;
   },
-  focus: function focus(selector) {
-    return selector + ":focus &, " + selector + "[data-focus] &";
+  focus: function focus(str, post) {
+    return str + ":focus " + post + ", " + str + "[data-focus] " + post;
   },
-  focusVisible: function focusVisible(selector) {
-    return selector + ":focus-visible &";
+  focusVisible: function focusVisible(str, post) {
+    return str + ":focus-visible " + post;
   },
-  active: function active(selector) {
-    return selector + ":active &, " + selector + "[data-active] &";
+  focusWithin: function focusWithin(str, post) {
+    return str + ":focus-within " + post;
   },
-  disabled: function disabled(selector) {
-    return selector + ":disabled &, " + selector + "[data-disabled] &";
+  active: function active(str, post) {
+    return str + ":active " + post + ", " + str + "[data-active] " + post;
   },
-  invalid: function invalid(selector) {
-    return selector + ":invalid &, " + selector + "[data-invalid] &";
+  disabled: function disabled(str, post) {
+    return str + ":disabled " + post + ", " + str + "[data-disabled] " + post;
   },
-  checked: function checked(selector) {
-    return selector + ":checked &, " + selector + "[data-checked] &";
+  invalid: function invalid(str, post) {
+    return str + ":invalid " + post + ", " + str + "[data-invalid] " + post;
   },
-  indeterminate: function indeterminate(selector) {
-    return selector + ":indeterminate &, " + selector + "[aria-checked=mixed] &, " + selector + "[data-indeterminate] &";
+  checked: function checked(str, post) {
+    return str + ":checked " + post + ", " + str + "[data-checked] " + post;
   },
-  readOnly: function readOnly(selector) {
-    return selector + ":read-only &, " + selector + "[readonly] &, " + selector + "[data-read-only] &";
+  indeterminate: function indeterminate(str, post) {
+    return str + ":indeterminate " + post + ", " + str + "[aria-checked=mixed] " + post + ", " + str + "[data-indeterminate] " + post;
   },
-  expanded: function expanded(selector) {
-    return selector + ":read-only &, " + selector + "[aria-expanded=true] &, " + selector + "[data-expanded] &";
+  readOnly: function readOnly(str, post) {
+    return str + ":read-only " + post + ", " + str + "[readonly] " + post + ", " + str + "[data-read-only] " + post;
+  },
+  expanded: function expanded(str, post) {
+    return str + ":read-only " + post + ", " + str + "[aria-expanded=true] " + post + ", " + str + "[data-expanded] " + post;
+  },
+  placeholderShown: function placeholderShown(str, post) {
+    return str + ":placeholder-shown " + post;
   }
@@ -1113,5 +1119,13 @@ };
 var toGroup = function toGroup(fn) {
-  return merge(fn, "[role=group]", "[data-group]", ".group");
+  return merge(function (v) {
+    return fn(v, "&");
+  }, "[role=group]", "[data-group]", ".group");
 };
 
+var toPeer = function toPeer(fn) {
+  return merge(function (v) {
+    return fn(v, "~ &");
+  }, "[data-peer]", ".peer");
+};
+
 var merge = function merge(fn) {
@@ -1152,2 +1166,7 @@ for (var _len = arguments.length, selectors = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
   _focusWithin: "&:focus-within",
+
+  /**
+   * Styles to apply when this element has received focus via tabbing
+   * - CSS Selector `&:focus-visible`
+   */
   _focusVisible: "&:focus-visible",
@@ -1189,2 +1208,6 @@
   _after: "&::after",
+
+  /**
+   * Styles for CSS selector `&:empty`
+   */
   _empty: "&:empty",
@@ -1305,33 +1328,87 @@
   /**
-   * Styles to apply when parent is hovered
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is hovered
    */
-  _groupHover: toGroup(group.hover),
+  _groupHover: toGroup(state.hover),
 
   /**
-   * Styles to apply when parent is focused
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is hovered
    */
-  _groupFocus: toGroup(group.focus),
-  _groupFocusVisible: toGroup(group.focusVisible),
+  _peerHover: toPeer(state.hover),
 
   /**
-   * Styles to apply when parent is active
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is focused
    */
-  _groupActive: toGroup(group.active),
+  _groupFocus: toGroup(state.focus),
 
   /**
-   * Styles to apply when parent is disabled
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is focused
    */
-  _groupDisabled: toGroup(group.disabled),
+  _peerFocus: toPeer(state.focus),
 
   /**
-   * Styles to apply when parent is invalid
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` has visible focus
    */
-  _groupInvalid: toGroup(group.invalid),
+  _groupFocusVisible: toGroup(state.focusVisible),
 
   /**
-   * Styles to apply when parent is checked
+   * Styles to apply when a sibling element with `.peer`or `data-peer` has visible focus
    */
-  _groupChecked: toGroup(group.checked),
+  _peerFocusVisible: toPeer(state.focusVisible),
 
   /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is active
+   */
+  _groupActive: toGroup(state.active),
+
+  /**
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is active
+   */
+  _peerActive: toPeer(state.active),
+
+  /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is disabled
+   */
+  _groupDisabled: toGroup(state.disabled),
+
+  /**
+   *  Styles to apply when a sibling element with `.peer` or `data-peer` is disabled
+   */
+  _peerDisabled: toPeer(state.disabled),
+
+  /**
+   *  Styles to apply when a parent element with `.group`, `data-group` or `role=group` is invalid
+   */
+  _groupInvalid: toGroup(state.invalid),
+
+  /**
+   *  Styles to apply when a sibling element with `.peer` or `data-peer` is invalid
+   */
+  _peerInvalid: toPeer(state.invalid),
+
+  /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is checked
+   */
+  _groupChecked: toGroup(state.checked),
+
+  /**
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is checked
+   */
+  _peerChecked: toPeer(state.checked),
+
+  /**
+   *  Styles to apply when a parent element with `.group`, `data-group` or `role=group` has focus within
+   */
+  _groupFocusWithin: toGroup(state.focusWithin),
+
+  /**
+   *  Styles to apply when a sibling element with `.peer` or `data-peer` has focus within
+   */
+  _peerFocusWithin: toPeer(state.focusWithin),
+
+  /**
+   * Styles to apply when a sibling element with `.peer` or `data-peer` has placeholder shown
+   */
+  _peerPlaceholderShown: toPeer(state.placeholderShown),
+
+  /**
    * Styles for CSS Selector `&::placeholder`.
@@ -1342,2 +1419,7 @@ */
   /**
+   * Styles for CSS Selector `&::placeholder-shown`.
+   */
+  _placeholderShown: "&::placeholder-shown",
+
+  /**
    * Styles for CSS Selector `&:fullscreen`.
@@ -1354,10 +1436,15 @@ */
    * Styles for CSS Selector `[dir=rtl] &`
-   * It is applied when any parent element has `dir="rtl"`
+   * It is applied when a parent element or this element has `dir="rtl"`
    */
-  _rtl: "[dir=rtl] &",
+  _rtl: "[dir=rtl] &, &[dir=rtl]",
 
   /**
+   * Styles for CSS Selector `[dir=ltr] &`
+   * It is applied when a parent element or this element has `dir="ltr"`
+   */
+  _ltr: "[dir=ltr] &, &[dir=ltr]",
+
+  /**
    * Styles for CSS Selector `@media (prefers-color-scheme: dark)`
-   * used when the user has requested the system
-   * use a light or dark color theme.
+   * It is used when the user has requested the system use a light or dark color theme.
    */
@@ -1367,2 +1454,8 @@ _mediaDark: "@media (prefers-color-scheme: dark)",
   /**
+   * Styles for CSS Selector `@media (prefers-reduced-motion: reduce)`
+   * It is used when the user has requested the system to reduce the amount of animations.
+   */
+  _mediaReduceMotion: "@media (prefers-reduced-motion: reduce)",
+
+  /**
    * Styles for when `data-theme` is applied to any parent of
@@ -1369,0 +1462,0 @@ * this component or element.

dist/chakra-ui-styled-system.esm.js

@@ -1074,32 +1074,38 @@ import { isObject, isString, isNumber, isCssVar, memoizedGet, objectKeys, mergeWith, runIfFn, walkObject, pick, analyzeBreakpoints } from '@chakra-ui/utils';
 
-var group = {
-  hover: function hover(selector) {
-    return selector + ":hover &, " + selector + "[data-hover] &";
+var state = {
+  hover: function hover(str, post) {
+    return str + ":hover " + post + ", " + str + "[data-hover] " + post;
   },
-  focus: function focus(selector) {
-    return selector + ":focus &, " + selector + "[data-focus] &";
+  focus: function focus(str, post) {
+    return str + ":focus " + post + ", " + str + "[data-focus] " + post;
   },
-  focusVisible: function focusVisible(selector) {
-    return selector + ":focus-visible &";
+  focusVisible: function focusVisible(str, post) {
+    return str + ":focus-visible " + post;
   },
-  active: function active(selector) {
-    return selector + ":active &, " + selector + "[data-active] &";
+  focusWithin: function focusWithin(str, post) {
+    return str + ":focus-within " + post;
   },
-  disabled: function disabled(selector) {
-    return selector + ":disabled &, " + selector + "[data-disabled] &";
+  active: function active(str, post) {
+    return str + ":active " + post + ", " + str + "[data-active] " + post;
   },
-  invalid: function invalid(selector) {
-    return selector + ":invalid &, " + selector + "[data-invalid] &";
+  disabled: function disabled(str, post) {
+    return str + ":disabled " + post + ", " + str + "[data-disabled] " + post;
   },
-  checked: function checked(selector) {
-    return selector + ":checked &, " + selector + "[data-checked] &";
+  invalid: function invalid(str, post) {
+    return str + ":invalid " + post + ", " + str + "[data-invalid] " + post;
   },
-  indeterminate: function indeterminate(selector) {
-    return selector + ":indeterminate &, " + selector + "[aria-checked=mixed] &, " + selector + "[data-indeterminate] &";
+  checked: function checked(str, post) {
+    return str + ":checked " + post + ", " + str + "[data-checked] " + post;
   },
-  readOnly: function readOnly(selector) {
-    return selector + ":read-only &, " + selector + "[readonly] &, " + selector + "[data-read-only] &";
+  indeterminate: function indeterminate(str, post) {
+    return str + ":indeterminate " + post + ", " + str + "[aria-checked=mixed] " + post + ", " + str + "[data-indeterminate] " + post;
   },
-  expanded: function expanded(selector) {
-    return selector + ":read-only &, " + selector + "[aria-expanded=true] &, " + selector + "[data-expanded] &";
+  readOnly: function readOnly(str, post) {
+    return str + ":read-only " + post + ", " + str + "[readonly] " + post + ", " + str + "[data-read-only] " + post;
+  },
+  expanded: function expanded(str, post) {
+    return str + ":read-only " + post + ", " + str + "[aria-expanded=true] " + post + ", " + str + "[data-expanded] " + post;
+  },
+  placeholderShown: function placeholderShown(str, post) {
+    return str + ":placeholder-shown " + post;
   }
@@ -1109,5 +1115,13 @@ };
 var toGroup = function toGroup(fn) {
-  return merge(fn, "[role=group]", "[data-group]", ".group");
+  return merge(function (v) {
+    return fn(v, "&");
+  }, "[role=group]", "[data-group]", ".group");
 };
 
+var toPeer = function toPeer(fn) {
+  return merge(function (v) {
+    return fn(v, "~ &");
+  }, "[data-peer]", ".peer");
+};
+
 var merge = function merge(fn) {
@@ -1148,2 +1162,7 @@ for (var _len = arguments.length, selectors = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
   _focusWithin: "&:focus-within",
+
+  /**
+   * Styles to apply when this element has received focus via tabbing
+   * - CSS Selector `&:focus-visible`
+   */
   _focusVisible: "&:focus-visible",
@@ -1185,2 +1204,6 @@
   _after: "&::after",
+
+  /**
+   * Styles for CSS selector `&:empty`
+   */
   _empty: "&:empty",
@@ -1301,33 +1324,87 @@
   /**
-   * Styles to apply when parent is hovered
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is hovered
    */
-  _groupHover: toGroup(group.hover),
+  _groupHover: toGroup(state.hover),
 
   /**
-   * Styles to apply when parent is focused
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is hovered
    */
-  _groupFocus: toGroup(group.focus),
-  _groupFocusVisible: toGroup(group.focusVisible),
+  _peerHover: toPeer(state.hover),
 
   /**
-   * Styles to apply when parent is active
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is focused
    */
-  _groupActive: toGroup(group.active),
+  _groupFocus: toGroup(state.focus),
 
   /**
-   * Styles to apply when parent is disabled
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is focused
    */
-  _groupDisabled: toGroup(group.disabled),
+  _peerFocus: toPeer(state.focus),
 
   /**
-   * Styles to apply when parent is invalid
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` has visible focus
    */
-  _groupInvalid: toGroup(group.invalid),
+  _groupFocusVisible: toGroup(state.focusVisible),
 
   /**
-   * Styles to apply when parent is checked
+   * Styles to apply when a sibling element with `.peer`or `data-peer` has visible focus
    */
-  _groupChecked: toGroup(group.checked),
+  _peerFocusVisible: toPeer(state.focusVisible),
 
   /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is active
+   */
+  _groupActive: toGroup(state.active),
+
+  /**
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is active
+   */
+  _peerActive: toPeer(state.active),
+
+  /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is disabled
+   */
+  _groupDisabled: toGroup(state.disabled),
+
+  /**
+   *  Styles to apply when a sibling element with `.peer` or `data-peer` is disabled
+   */
+  _peerDisabled: toPeer(state.disabled),
+
+  /**
+   *  Styles to apply when a parent element with `.group`, `data-group` or `role=group` is invalid
+   */
+  _groupInvalid: toGroup(state.invalid),
+
+  /**
+   *  Styles to apply when a sibling element with `.peer` or `data-peer` is invalid
+   */
+  _peerInvalid: toPeer(state.invalid),
+
+  /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is checked
+   */
+  _groupChecked: toGroup(state.checked),
+
+  /**
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is checked
+   */
+  _peerChecked: toPeer(state.checked),
+
+  /**
+   *  Styles to apply when a parent element with `.group`, `data-group` or `role=group` has focus within
+   */
+  _groupFocusWithin: toGroup(state.focusWithin),
+
+  /**
+   *  Styles to apply when a sibling element with `.peer` or `data-peer` has focus within
+   */
+  _peerFocusWithin: toPeer(state.focusWithin),
+
+  /**
+   * Styles to apply when a sibling element with `.peer` or `data-peer` has placeholder shown
+   */
+  _peerPlaceholderShown: toPeer(state.placeholderShown),
+
+  /**
    * Styles for CSS Selector `&::placeholder`.
@@ -1338,2 +1415,7 @@ */
   /**
+   * Styles for CSS Selector `&::placeholder-shown`.
+   */
+  _placeholderShown: "&::placeholder-shown",
+
+  /**
    * Styles for CSS Selector `&:fullscreen`.
@@ -1350,10 +1432,15 @@ */
    * Styles for CSS Selector `[dir=rtl] &`
-   * It is applied when any parent element has `dir="rtl"`
+   * It is applied when a parent element or this element has `dir="rtl"`
    */
-  _rtl: "[dir=rtl] &",
+  _rtl: "[dir=rtl] &, &[dir=rtl]",
 
   /**
+   * Styles for CSS Selector `[dir=ltr] &`
+   * It is applied when a parent element or this element has `dir="ltr"`
+   */
+  _ltr: "[dir=ltr] &, &[dir=ltr]",
+
+  /**
    * Styles for CSS Selector `@media (prefers-color-scheme: dark)`
-   * used when the user has requested the system
-   * use a light or dark color theme.
+   * It is used when the user has requested the system use a light or dark color theme.
    */
@@ -1363,2 +1450,8 @@ _mediaDark: "@media (prefers-color-scheme: dark)",
   /**
+   * Styles for CSS Selector `@media (prefers-reduced-motion: reduce)`
+   * It is used when the user has requested the system to reduce the amount of animations.
+   */
+  _mediaReduceMotion: "@media (prefers-reduced-motion: reduce)",
+
+  /**
    * Styles for when `data-theme` is applied to any parent of
@@ -1365,0 +1458,0 @@ * this component or element.

dist/declarations/src/pseudos.d.ts

@@ -24,2 +24,6 @@ export declare const pseudoSelectors: {
     _focusWithin: string;
+    /**
+     * Styles to apply when this element has received focus via tabbing
+     * - CSS Selector `&:focus-visible`
+     */
     _focusVisible: string;
@@ -57,2 +61,5 @@ /**
     _after: string;
+    /**
+     * Styles for CSS selector `&:empty`
+     */
     _empty: string;
@@ -152,27 +159,70 @@ /**
     /**
-     * Styles to apply when parent is hovered
+     * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is hovered
      */
     _groupHover: string;
     /**
-     * Styles to apply when parent is focused
+     * Styles to apply when a sibling element with `.peer` or `data-peer` is hovered
      */
+    _peerHover: string;
+    /**
+     * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is focused
+     */
     _groupFocus: string;
+    /**
+     * Styles to apply when a sibling element with `.peer` or `data-peer` is focused
+     */
+    _peerFocus: string;
+    /**
+     * Styles to apply when a parent element with `.group`, `data-group` or `role=group` has visible focus
+     */
     _groupFocusVisible: string;
     /**
-     * Styles to apply when parent is active
+     * Styles to apply when a sibling element with `.peer`or `data-peer` has visible focus
      */
+    _peerFocusVisible: string;
+    /**
+     * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is active
+     */
     _groupActive: string;
     /**
-     * Styles to apply when parent is disabled
+     * Styles to apply when a sibling element with `.peer` or `data-peer` is active
      */
+    _peerActive: string;
+    /**
+     * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is disabled
+     */
     _groupDisabled: string;
     /**
-     * Styles to apply when parent is invalid
+     *  Styles to apply when a sibling element with `.peer` or `data-peer` is disabled
      */
+    _peerDisabled: string;
+    /**
+     *  Styles to apply when a parent element with `.group`, `data-group` or `role=group` is invalid
+     */
     _groupInvalid: string;
     /**
-     * Styles to apply when parent is checked
+     *  Styles to apply when a sibling element with `.peer` or `data-peer` is invalid
      */
+    _peerInvalid: string;
+    /**
+     * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is checked
+     */
     _groupChecked: string;
     /**
+     * Styles to apply when a sibling element with `.peer` or `data-peer` is checked
+     */
+    _peerChecked: string;
+    /**
+     *  Styles to apply when a parent element with `.group`, `data-group` or `role=group` has focus within
+     */
+    _groupFocusWithin: string;
+    /**
+     *  Styles to apply when a sibling element with `.peer` or `data-peer` has focus within
+     */
+    _peerFocusWithin: string;
+    /**
+     * Styles to apply when a sibling element with `.peer` or `data-peer` has placeholder shown
+     */
+    _peerPlaceholderShown: string;
+    /**
      * Styles for CSS Selector `&::placeholder`.
@@ -182,2 +232,6 @@ */
     /**
+     * Styles for CSS Selector `&::placeholder-shown`.
+     */
+    _placeholderShown: string;
+    /**
      * Styles for CSS Selector `&:fullscreen`.
@@ -192,12 +246,21 @@ */
      * Styles for CSS Selector `[dir=rtl] &`
-     * It is applied when any parent element has `dir="rtl"`
+     * It is applied when a parent element or this element has `dir="rtl"`
      */
     _rtl: string;
     /**
+     * Styles for CSS Selector `[dir=ltr] &`
+     * It is applied when a parent element or this element has `dir="ltr"`
+     */
+    _ltr: string;
+    /**
      * Styles for CSS Selector `@media (prefers-color-scheme: dark)`
-     * used when the user has requested the system
-     * use a light or dark color theme.
+     * It is used when the user has requested the system use a light or dark color theme.
      */
     _mediaDark: string;
     /**
+     * Styles for CSS Selector `@media (prefers-reduced-motion: reduce)`
+     * It is used when the user has requested the system to reduce the amount of animations.
+     */
+    _mediaReduceMotion: string;
+    /**
      * Styles for when `data-theme` is applied to any parent of
@@ -214,3 +277,3 @@ * this component or element.
 export declare type Pseudos = typeof pseudoSelectors;
-export declare const pseudoPropNames: ("_hover" | "_active" | "_focus" | "_highlighted" | "_focusWithin" | "_focusVisible" | "_disabled" | "_readOnly" | "_before" | "_after" | "_empty" | "_expanded" | "_checked" | "_grabbed" | "_pressed" | "_invalid" | "_valid" | "_loading" | "_selected" | "_hidden" | "_autofill" | "_even" | "_odd" | "_first" | "_last" | "_notFirst" | "_notLast" | "_visited" | "_activeLink" | "_activeStep" | "_indeterminate" | "_groupHover" | "_groupFocus" | "_groupFocusVisible" | "_groupActive" | "_groupDisabled" | "_groupInvalid" | "_groupChecked" | "_placeholder" | "_fullScreen" | "_selection" | "_rtl" | "_mediaDark" | "_dark" | "_light")[];
+export declare const pseudoPropNames: ("_hover" | "_active" | "_focus" | "_highlighted" | "_focusWithin" | "_focusVisible" | "_disabled" | "_readOnly" | "_before" | "_after" | "_empty" | "_expanded" | "_checked" | "_grabbed" | "_pressed" | "_invalid" | "_valid" | "_loading" | "_selected" | "_hidden" | "_autofill" | "_even" | "_odd" | "_first" | "_last" | "_notFirst" | "_notLast" | "_visited" | "_activeLink" | "_activeStep" | "_indeterminate" | "_groupHover" | "_peerHover" | "_groupFocus" | "_peerFocus" | "_groupFocusVisible" | "_peerFocusVisible" | "_groupActive" | "_peerActive" | "_groupDisabled" | "_peerDisabled" | "_groupInvalid" | "_peerInvalid" | "_groupChecked" | "_peerChecked" | "_groupFocusWithin" | "_peerFocusWithin" | "_peerPlaceholderShown" | "_placeholder" | "_placeholderShown" | "_fullScreen" | "_selection" | "_rtl" | "_ltr" | "_mediaDark" | "_mediaReduceMotion" | "_dark" | "_light")[];
 //# sourceMappingURL=pseudos.d.ts.map

dist/declarations/src/theming.types.d.ts

 // regenerate by running
 // npx @chakra-ui/cli tokens path/to/your/theme.(js|ts)
 export interface ThemeTypings {
+  blur: "none" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl"
   borders: "none" | "1px" | "2px" | "4px" | "8px"
+  borderStyles: never
+  borderWidths: never
   breakpoints: "base" | "sm" | "md" | "lg" | "xl" | "2xl"
@@ -6,0 +9,0 @@ colors:

package.json

 {
   "name": "@chakra-ui/styled-system",
-  "version": "0.0.0-canary-2021118164051",
+  "version": "0.0.0-pr-20211120212826",
   "description": "Style function for css-in-js building component libraries",
@@ -5,0 +5,0 @@ "keywords": [

src/pseudos.ts

 import { AnyFunction, objectKeys } from "@chakra-ui/utils"
 
-const group = {
-  hover: (selector: string) => `${selector}:hover &, ${selector}[data-hover] &`,
-  focus: (selector: string) => `${selector}:focus &, ${selector}[data-focus] &`,
-  focusVisible: (selector: string) => `${selector}:focus-visible &`,
-  active: (selector: string) =>
-    `${selector}:active &, ${selector}[data-active] &`,
-  disabled: (selector: string) =>
-    `${selector}:disabled &, ${selector}[data-disabled] &`,
-  invalid: (selector: string) =>
-    `${selector}:invalid &, ${selector}[data-invalid] &`,
-  checked: (selector: string) =>
-    `${selector}:checked &, ${selector}[data-checked] &`,
-  indeterminate: (selector: string) =>
-    `${selector}:indeterminate &, ${selector}[aria-checked=mixed] &, ${selector}[data-indeterminate] &`,
-  readOnly: (selector: string) =>
-    `${selector}:read-only &, ${selector}[readonly] &, ${selector}[data-read-only] &`,
-  expanded: (selector: string) =>
-    `${selector}:read-only &, ${selector}[aria-expanded=true] &, ${selector}[data-expanded] &`,
+const state = {
+  hover: (str: string, post: string) =>
+    `${str}:hover ${post}, ${str}[data-hover] ${post}`,
+  focus: (str: string, post: string) =>
+    `${str}:focus ${post}, ${str}[data-focus] ${post}`,
+  focusVisible: (str: string, post: string) => `${str}:focus-visible ${post}`,
+  focusWithin: (str: string, post: string) => `${str}:focus-within ${post}`,
+  active: (str: string, post: string) =>
+    `${str}:active ${post}, ${str}[data-active] ${post}`,
+  disabled: (str: string, post: string) =>
+    `${str}:disabled ${post}, ${str}[data-disabled] ${post}`,
+  invalid: (str: string, post: string) =>
+    `${str}:invalid ${post}, ${str}[data-invalid] ${post}`,
+  checked: (str: string, post: string) =>
+    `${str}:checked ${post}, ${str}[data-checked] ${post}`,
+  indeterminate: (str: string, post: string) =>
+    `${str}:indeterminate ${post}, ${str}[aria-checked=mixed] ${post}, ${str}[data-indeterminate] ${post}`,
+  readOnly: (str: string, post: string) =>
+    `${str}:read-only ${post}, ${str}[readonly] ${post}, ${str}[data-read-only] ${post}`,
+  expanded: (str: string, post: string) =>
+    `${str}:read-only ${post}, ${str}[aria-expanded=true] ${post}, ${str}[data-expanded] ${post}`,
+  placeholderShown: (str: string, post: string) =>
+    `${str}:placeholder-shown ${post}`,
 }
 
 const toGroup = (fn: AnyFunction) =>
-  merge(fn, "[role=group]", "[data-group]", ".group")
+  merge((v) => fn(v, "&"), "[role=group]", "[data-group]", ".group")
 
+const toPeer = (fn: AnyFunction) =>
+  merge((v) => fn(v, "~ &"), "[data-peer]", ".peer")
+
 const merge = (fn: AnyFunction, ...selectors: string[]) =>
@@ -52,2 +60,6 @@ selectors.map(fn).join(", ")
   _focusWithin: "&:focus-within",
+  /**
+   * Styles to apply when this element has received focus via tabbing
+   * - CSS Selector `&:focus-visible`
+   */
   _focusVisible: "&:focus-visible",
@@ -85,2 +97,5 @@ /**
   _after: "&::after",
+  /**
+   * Styles for CSS selector `&:empty`
+   */
   _empty: "&:empty",
@@ -181,27 +196,70 @@ /**
   /**
-   * Styles to apply when parent is hovered
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is hovered
    */
-  _groupHover: toGroup(group.hover),
+  _groupHover: toGroup(state.hover),
   /**
-   * Styles to apply when parent is focused
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is hovered
    */
-  _groupFocus: toGroup(group.focus),
-  _groupFocusVisible: toGroup(group.focusVisible),
+  _peerHover: toPeer(state.hover),
   /**
-   * Styles to apply when parent is active
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is focused
    */
-  _groupActive: toGroup(group.active),
+  _groupFocus: toGroup(state.focus),
   /**
-   * Styles to apply when parent is disabled
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is focused
    */
-  _groupDisabled: toGroup(group.disabled),
+  _peerFocus: toPeer(state.focus),
   /**
-   * Styles to apply when parent is invalid
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` has visible focus
    */
-  _groupInvalid: toGroup(group.invalid),
+  _groupFocusVisible: toGroup(state.focusVisible),
   /**
-   * Styles to apply when parent is checked
+   * Styles to apply when a sibling element with `.peer`or `data-peer` has visible focus
    */
-  _groupChecked: toGroup(group.checked),
+  _peerFocusVisible: toPeer(state.focusVisible),
   /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is active
+   */
+  _groupActive: toGroup(state.active),
+  /**
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is active
+   */
+  _peerActive: toPeer(state.active),
+  /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is disabled
+   */
+  _groupDisabled: toGroup(state.disabled),
+  /**
+   *  Styles to apply when a sibling element with `.peer` or `data-peer` is disabled
+   */
+  _peerDisabled: toPeer(state.disabled),
+  /**
+   *  Styles to apply when a parent element with `.group`, `data-group` or `role=group` is invalid
+   */
+  _groupInvalid: toGroup(state.invalid),
+  /**
+   *  Styles to apply when a sibling element with `.peer` or `data-peer` is invalid
+   */
+  _peerInvalid: toPeer(state.invalid),
+  /**
+   * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is checked
+   */
+  _groupChecked: toGroup(state.checked),
+  /**
+   * Styles to apply when a sibling element with `.peer` or `data-peer` is checked
+   */
+  _peerChecked: toPeer(state.checked),
+  /**
+   *  Styles to apply when a parent element with `.group`, `data-group` or `role=group` has focus within
+   */
+  _groupFocusWithin: toGroup(state.focusWithin),
+  /**
+   *  Styles to apply when a sibling element with `.peer` or `data-peer` has focus within
+   */
+  _peerFocusWithin: toPeer(state.focusWithin),
+  /**
+   * Styles to apply when a sibling element with `.peer` or `data-peer` has placeholder shown
+   */
+  _peerPlaceholderShown: toPeer(state.placeholderShown),
+  /**
    * Styles for CSS Selector `&::placeholder`.
@@ -211,2 +269,6 @@ */
   /**
+   * Styles for CSS Selector `&::placeholder-shown`.
+   */
+  _placeholderShown: "&::placeholder-shown",
+  /**
    * Styles for CSS Selector `&:fullscreen`.
@@ -221,12 +283,21 @@ */
    * Styles for CSS Selector `[dir=rtl] &`
-   * It is applied when any parent element has `dir="rtl"`
+   * It is applied when a parent element or this element has `dir="rtl"`
    */
-  _rtl: "[dir=rtl] &",
+  _rtl: "[dir=rtl] &, &[dir=rtl]",
   /**
+   * Styles for CSS Selector `[dir=ltr] &`
+   * It is applied when a parent element or this element has `dir="ltr"`
+   */
+  _ltr: "[dir=ltr] &, &[dir=ltr]",
+  /**
    * Styles for CSS Selector `@media (prefers-color-scheme: dark)`
-   * used when the user has requested the system
-   * use a light or dark color theme.
+   * It is used when the user has requested the system use a light or dark color theme.
    */
   _mediaDark: "@media (prefers-color-scheme: dark)",
   /**
+   * Styles for CSS Selector `@media (prefers-reduced-motion: reduce)`
+   * It is used when the user has requested the system to reduce the amount of animations.
+   */
+  _mediaReduceMotion: "@media (prefers-reduced-motion: reduce)",
+  /**
    * Styles for when `data-theme` is applied to any parent of
@@ -233,0 +304,0 @@ * this component or element.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

432813

increased by3.62%

Lines of code

11418

increased by3.3%

No dependency changes