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

Comparing version 1.15.0 to 1.16.0

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

@@ -1040,2 +1040,25 @@ 'use strict';
 
+var scroll = {
+  scrollBehavior: true,
+  scrollSnapAlign: true,
+  scrollSnapStop: true,
+  scrollSnapType: true,
+  // scroll margin
+  scrollMargin: t.spaceT("scrollMargin"),
+  scrollMarginTop: t.spaceT("scrollMarginTop"),
+  scrollMarginBottom: t.spaceT("scrollMarginBottom"),
+  scrollMarginLeft: t.spaceT("scrollMarginLeft"),
+  scrollMarginRight: t.spaceT("scrollMarginRight"),
+  scrollMarginX: t.spaceT(["scrollMarginLeft", "scrollMarginRight"]),
+  scrollMarginY: t.spaceT(["scrollMarginTop", "scrollMarginBottom"]),
+  // scroll padding
+  scrollPadding: t.spaceT("scrollPadding"),
+  scrollPaddingTop: t.spaceT("scrollPaddingTop"),
+  scrollPaddingBottom: t.spaceT("scrollPaddingBottom"),
+  scrollPaddingLeft: t.spaceT("scrollPaddingLeft"),
+  scrollPaddingRight: t.spaceT("scrollPaddingRight"),
+  scrollPaddingX: t.spaceT(["scrollPaddingLeft", "scrollPaddingRight"]),
+  scrollPaddingY: t.spaceT(["scrollPaddingTop", "scrollPaddingBottom"])
+};
+
 function _arrayLikeToArray(arr, len) {
@@ -1079,32 +1102,38 @@ if (len == null || len > arr.length) len = arr.length;
 
-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;
   }
@@ -1114,5 +1143,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) {
@@ -1153,2 +1190,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",
@@ -1190,2 +1232,6 @@
   _after: "&::after",
+
+  /**
+   * Styles for CSS selector `&:empty`
+   */
   _empty: "&:empty",
@@ -1306,33 +1352,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`.
@@ -1343,2 +1443,7 @@ */
   /**
+   * Styles for CSS Selector `&::placeholder-shown`.
+   */
+  _placeholderShown: "&::placeholder-shown",
+
+  /**
    * Styles for CSS Selector `&:fullscreen`.
@@ -1355,10 +1460,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.
    */
@@ -1368,2 +1478,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
@@ -1382,3 +1498,3 @@ * this component or element.
 
-var systemProps = utils.mergeWith({}, background, border, color, flexbox, layout, filter, ring, interactivity, grid, others, position, effect, space, typography, textDecoration, transform, list, transition);
+var systemProps = utils.mergeWith({}, background, border, color, flexbox, layout, filter, ring, interactivity, grid, others, position, effect, space, scroll, typography, textDecoration, transform, list, transition);
 var layoutSystem = Object.assign({}, space, layout, flexbox, grid, position);
@@ -1923,2 +2039,3 @@ var layoutPropNames = utils.objectKeys(layoutSystem);
 exports.ring = ring;
+exports.scroll = scroll;
 exports.space = space;
@@ -1925,0 +2042,0 @@ exports.systemProps = systemProps;

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

@@ -1040,2 +1040,25 @@ 'use strict';
 
+var scroll = {
+  scrollBehavior: true,
+  scrollSnapAlign: true,
+  scrollSnapStop: true,
+  scrollSnapType: true,
+  // scroll margin
+  scrollMargin: t.spaceT("scrollMargin"),
+  scrollMarginTop: t.spaceT("scrollMarginTop"),
+  scrollMarginBottom: t.spaceT("scrollMarginBottom"),
+  scrollMarginLeft: t.spaceT("scrollMarginLeft"),
+  scrollMarginRight: t.spaceT("scrollMarginRight"),
+  scrollMarginX: t.spaceT(["scrollMarginLeft", "scrollMarginRight"]),
+  scrollMarginY: t.spaceT(["scrollMarginTop", "scrollMarginBottom"]),
+  // scroll padding
+  scrollPadding: t.spaceT("scrollPadding"),
+  scrollPaddingTop: t.spaceT("scrollPaddingTop"),
+  scrollPaddingBottom: t.spaceT("scrollPaddingBottom"),
+  scrollPaddingLeft: t.spaceT("scrollPaddingLeft"),
+  scrollPaddingRight: t.spaceT("scrollPaddingRight"),
+  scrollPaddingX: t.spaceT(["scrollPaddingLeft", "scrollPaddingRight"]),
+  scrollPaddingY: t.spaceT(["scrollPaddingTop", "scrollPaddingBottom"])
+};
+
 function _arrayLikeToArray(arr, len) {
@@ -1079,32 +1102,38 @@ if (len == null || len > arr.length) len = arr.length;
 
-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;
   }
@@ -1114,5 +1143,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) {
@@ -1153,2 +1190,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",
@@ -1190,2 +1232,6 @@
   _after: "&::after",
+
+  /**
+   * Styles for CSS selector `&:empty`
+   */
   _empty: "&:empty",
@@ -1306,33 +1352,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`.
@@ -1343,2 +1443,7 @@ */
   /**
+   * Styles for CSS Selector `&::placeholder-shown`.
+   */
+  _placeholderShown: "&::placeholder-shown",
+
+  /**
    * Styles for CSS Selector `&:fullscreen`.
@@ -1355,10 +1460,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.
    */
@@ -1368,2 +1478,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
@@ -1382,3 +1498,3 @@ * this component or element.
 
-var systemProps = utils.mergeWith({}, background, border, color, flexbox, layout, filter, ring, interactivity, grid, others, position, effect, space, typography, textDecoration, transform, list, transition);
+var systemProps = utils.mergeWith({}, background, border, color, flexbox, layout, filter, ring, interactivity, grid, others, position, effect, space, scroll, typography, textDecoration, transform, list, transition);
 var layoutSystem = Object.assign({}, space, layout, flexbox, grid, position);
@@ -1923,2 +2039,3 @@ var layoutPropNames = utils.objectKeys(layoutSystem);
 exports.ring = ring;
+exports.scroll = scroll;
 exports.space = space;
@@ -1925,0 +2042,0 @@ exports.systemProps = systemProps;

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

@@ -1036,2 +1036,25 @@ import { isObject, isString, isNumber, isCssVar, memoizedGet, objectKeys, mergeWith, runIfFn, walkObject, pick, analyzeBreakpoints } from '@chakra-ui/utils';
 
+var scroll = {
+  scrollBehavior: true,
+  scrollSnapAlign: true,
+  scrollSnapStop: true,
+  scrollSnapType: true,
+  // scroll margin
+  scrollMargin: t.spaceT("scrollMargin"),
+  scrollMarginTop: t.spaceT("scrollMarginTop"),
+  scrollMarginBottom: t.spaceT("scrollMarginBottom"),
+  scrollMarginLeft: t.spaceT("scrollMarginLeft"),
+  scrollMarginRight: t.spaceT("scrollMarginRight"),
+  scrollMarginX: t.spaceT(["scrollMarginLeft", "scrollMarginRight"]),
+  scrollMarginY: t.spaceT(["scrollMarginTop", "scrollMarginBottom"]),
+  // scroll padding
+  scrollPadding: t.spaceT("scrollPadding"),
+  scrollPaddingTop: t.spaceT("scrollPaddingTop"),
+  scrollPaddingBottom: t.spaceT("scrollPaddingBottom"),
+  scrollPaddingLeft: t.spaceT("scrollPaddingLeft"),
+  scrollPaddingRight: t.spaceT("scrollPaddingRight"),
+  scrollPaddingX: t.spaceT(["scrollPaddingLeft", "scrollPaddingRight"]),
+  scrollPaddingY: t.spaceT(["scrollPaddingTop", "scrollPaddingBottom"])
+};
+
 function _arrayLikeToArray(arr, len) {
@@ -1075,32 +1098,38 @@ if (len == null || len > arr.length) len = arr.length;
 
-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;
   }
@@ -1110,5 +1139,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) {
@@ -1149,2 +1186,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",
@@ -1186,2 +1228,6 @@
   _after: "&::after",
+
+  /**
+   * Styles for CSS selector `&:empty`
+   */
   _empty: "&:empty",
@@ -1302,33 +1348,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`.
@@ -1339,2 +1439,7 @@ */
   /**
+   * Styles for CSS Selector `&::placeholder-shown`.
+   */
+  _placeholderShown: "&::placeholder-shown",
+
+  /**
    * Styles for CSS Selector `&:fullscreen`.
@@ -1351,10 +1456,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.
    */
@@ -1364,2 +1474,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
@@ -1378,3 +1494,3 @@ * this component or element.
 
-var systemProps = mergeWith({}, background, border, color, flexbox, layout, filter, ring, interactivity, grid, others, position, effect, space, typography, textDecoration, transform, list, transition);
+var systemProps = mergeWith({}, background, border, color, flexbox, layout, filter, ring, interactivity, grid, others, position, effect, space, scroll, typography, textDecoration, transform, list, transition);
 var layoutSystem = Object.assign({}, space, layout, flexbox, grid, position);
@@ -1898,2 +2014,2 @@ var layoutPropNames = objectKeys(layoutSystem);
 
-export { addPrefix, background, border, calc, color, css, cssVar, effect, filter, flexbox, getCss, grid, interactivity, isStyleProp, layout, layoutPropNames, list, others, position, propNames, ring, space, systemProps, textDecoration, toCSSVar, toVarDefinition, toVarReference, tokenToCSSVar, transform, transition, typography };
+export { addPrefix, background, border, calc, color, css, cssVar, effect, filter, flexbox, getCss, grid, interactivity, isStyleProp, layout, layoutPropNames, list, others, position, propNames, ring, scroll, space, systemProps, textDecoration, toCSSVar, toVarDefinition, toVarReference, tokenToCSSVar, transform, transition, typography };

dist/declarations/src/config/index.d.ts

@@ -19,2 +19,3 @@ export * from "./background";
 export * from "./typography";
+export * from "./scroll";
 //# sourceMappingURL=index.d.ts.map

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/system.types.d.ts

 import { Dict } from "@chakra-ui/utils";
 import * as CSS from "csstype";
-import type { BackgroundProps, BorderProps, ColorProps, EffectProps, FilterProps, FlexboxProps, GridProps, InteractivityProps, LayoutProps, ListProps, OtherProps, PositionProps, RingProps, SpaceProps, TextDecorationProps, TransformProps, TransitionProps, TypographyProps } from "./config";
+import type { BackgroundProps, BorderProps, ColorProps, EffectProps, FilterProps, FlexboxProps, GridProps, InteractivityProps, LayoutProps, ListProps, OtherProps, PositionProps, RingProps, SpaceProps, TextDecorationProps, TransformProps, TransitionProps, TypographyProps, ScrollProps } from "./config";
 import { Pseudos } from "./pseudos";
 import { ResponsiveValue } from "./utils/types";
-export interface StyleProps extends SpaceProps, ColorProps, TransitionProps, TypographyProps, FlexboxProps, TransformProps, GridProps, FilterProps, LayoutProps, BorderProps, EffectProps, BackgroundProps, ListProps, PositionProps, RingProps, InteractivityProps, TextDecorationProps, OtherProps {
+export interface StyleProps extends SpaceProps, ColorProps, TransitionProps, TypographyProps, FlexboxProps, TransformProps, GridProps, FilterProps, LayoutProps, BorderProps, EffectProps, BackgroundProps, ListProps, PositionProps, RingProps, ScrollProps, InteractivityProps, TextDecorationProps, OtherProps {
 }
@@ -8,0 +8,0 @@ export interface SystemCSSProperties extends CSS.Properties, Omit<StyleProps, keyof CSS.Properties> {

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

 // regenerate by running
 // npx @chakra-ui/cli tokens path/to/your/theme.(js|ts)
 export interface ThemeTypings {
-  borders: "none" | "1px" | "2px" | "4px" | "8px"
-  breakpoints: "base" | "sm" | "md" | "lg" | "xl" | "2xl"
+  blur:
+    | "none"
+    | "sm"
+    | "base"
+    | "md"
+    | "lg"
+    | "xl"
+    | "2xl"
+    | "3xl"
+    | (string & {})
+  borders: "none" | "1px" | "2px" | "4px" | "8px" | (string & {})
+  borderStyles: string & {}
+  borderWidths: string & {}
+  breakpoints: "base" | "sm" | "md" | "lg" | "xl" | "2xl" | (string & {})
   colors:
@@ -191,2 +203,3 @@ | "transparent"
     | "telegram.900"
+    | (string & {})
   colorSchemes:
@@ -211,3 +224,4 @@ | "whiteAlpha"
     | "telegram"
-  fonts: "heading" | "body" | "mono"
+    | (string & {})
+  fonts: "heading" | "body" | "mono" | (string & {})
   fontSizes:
@@ -227,2 +241,3 @@ | "xs"
     | "9xl"
+    | (string & {})
   fontWeights:
@@ -238,4 +253,12 @@ | "hairline"
     | "black"
-  layerStyles: never
-  letterSpacings: "tighter" | "tight" | "normal" | "wide" | "wider" | "widest"
+    | (string & {})
+  layerStyles: string & {}
+  letterSpacings:
+    | "tighter"
+    | "tight"
+    | "normal"
+    | "wide"
+    | "wider"
+    | "widest"
+    | (string & {})
   lineHeights:
@@ -257,3 +280,14 @@ | "3"
     | "taller"
-  radii: "none" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"
+    | (string & {})
+  radii:
+    | "none"
+    | "sm"
+    | "base"
+    | "md"
+    | "lg"
+    | "xl"
+    | "2xl"
+    | "3xl"
+    | "full"
+    | (string & {})
   shadows:
@@ -271,2 +305,3 @@ | "xs"
     | "dark-lg"
+    | (string & {})
   sizes:
@@ -327,2 +362,3 @@ | "1"
     | "container.xl"
+    | (string & {})
   space:
@@ -395,4 +431,5 @@ | "1"
     | "-3.5"
-  textStyles: never
-  transition: never
+    | (string & {})
+  textStyles: string & {}
+  transition: string & {}
   zIndices:
@@ -412,86 +449,116 @@ | "hide"
     | "tooltip"
+    | (string & {})
   components: {
     Accordion: {
-      sizes: never
-      variants: never
+      sizes: string & {}
+      variants: string & {}
     }
     Alert: {
-      sizes: never
-      variants: "subtle" | "left-accent" | "top-accent" | "solid"
+      sizes: string & {}
+      variants:
+        | "subtle"
+        | "left-accent"
+        | "top-accent"
+        | "solid"
+        | (string & {})
     }
     Avatar: {
-      sizes: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full"
-      variants: never
+      sizes:
+        | "2xs"
+        | "xs"
+        | "sm"
+        | "md"
+        | "lg"
+        | "xl"
+        | "2xl"
+        | "full"
+        | (string & {})
+      variants: string & {}
     }
     Badge: {
-      sizes: never
-      variants: "solid" | "subtle" | "outline"
+      sizes: string & {}
+      variants: "solid" | "subtle" | "outline" | (string & {})
     }
     Breadcrumb: {
-      sizes: never
-      variants: never
+      sizes: string & {}
+      variants: string & {}
     }
     Button: {
-      sizes: "lg" | "md" | "sm" | "xs"
-      variants: "ghost" | "outline" | "solid" | "link" | "unstyled"
+      sizes: "lg" | "md" | "sm" | "xs" | (string & {})
+      variants:
+        | "ghost"
+        | "outline"
+        | "solid"
+        | "link"
+        | "unstyled"
+        | (string & {})
     }
     Checkbox: {
-      sizes: "sm" | "md" | "lg"
-      variants: never
+      sizes: "sm" | "md" | "lg" | (string & {})
+      variants: string & {}
     }
     CloseButton: {
-      sizes: "lg" | "md" | "sm"
-      variants: never
+      sizes: "lg" | "md" | "sm" | (string & {})
+      variants: string & {}
     }
     Code: {
-      sizes: never
-      variants: "solid" | "subtle" | "outline"
+      sizes: string & {}
+      variants: "solid" | "subtle" | "outline" | (string & {})
     }
     Container: {
-      sizes: never
-      variants: never
+      sizes: string & {}
+      variants: string & {}
     }
     Divider: {
-      sizes: never
-      variants: "solid" | "dashed"
+      sizes: string & {}
+      variants: "solid" | "dashed" | (string & {})
     }
     Drawer: {
-      sizes: "xs" | "sm" | "md" | "lg" | "xl" | "full"
-      variants: never
+      sizes: "xs" | "sm" | "md" | "lg" | "xl" | "full" | (string & {})
+      variants: string & {}
     }
     Editable: {
-      sizes: never
-      variants: never
+      sizes: string & {}
+      variants: string & {}
     }
     Form: {
-      sizes: never
-      variants: never
+      sizes: string & {}
+      variants: string & {}
     }
     FormLabel: {
-      sizes: never
-      variants: never
+      sizes: string & {}
+      variants: string & {}
     }
     Heading: {
-      sizes: "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs"
-      variants: never
+      sizes:
+        | "4xl"
+        | "3xl"
+        | "2xl"
+        | "xl"
+        | "lg"
+        | "md"
+        | "sm"
+        | "xs"
+        | (string & {})
+      variants: string & {}
     }
     Input: {
-      sizes: "lg" | "md" | "sm" | "xs"
-      variants: "outline" | "filled" | "flushed" | "unstyled"
+      sizes: "lg" | "md" | "sm" | "xs" | (string & {})
+      variants: "outline" | "filled" | "flushed" | "unstyled" | (string & {})
     }
     Kbd: {
-      sizes: never
-      variants: never
+      sizes: string & {}
+      variants: string & {}
     }
     Link: {
-      sizes: never
-      variants: never
+      sizes: string & {}
+      variants: string & {}
     }
     List: {
-      sizes: never
-      variants: never
+      sizes: string & {}
+      variants: string & {}
     }
     Menu: {
-      sizes: never
-      variants: never
+      sizes: string & {}
+      variants: string & {}
     }
@@ -511,58 +578,59 @@ Modal: {
         | "full"
-      variants: never
+        | (string & {})
+      variants: string & {}
     }
     NumberInput: {
-      sizes: "xs" | "sm" | "md" | "lg"
-      variants: "outline" | "filled" | "flushed" | "unstyled"
+      sizes: "xs" | "sm" | "md" | "lg" | (string & {})
+      variants: "outline" | "filled" | "flushed" | "unstyled" | (string & {})
     }
     PinInput: {
-      sizes: "lg" | "md" | "sm" | "xs"
-      variants: "outline" | "flushed" | "filled" | "unstyled"
+      sizes: "lg" | "md" | "sm" | "xs" | (string & {})
+      variants: "outline" | "flushed" | "filled" | "unstyled" | (string & {})
     }
     Popover: {
-      sizes: never
-      variants: never
+      sizes: string & {}
+      variants: string & {}
     }
     Progress: {
-      sizes: "xs" | "sm" | "md" | "lg"
-      variants: never
+      sizes: "xs" | "sm" | "md" | "lg" | (string & {})
+      variants: string & {}
     }
     Radio: {
-      sizes: "md" | "lg" | "sm"
-      variants: never
+      sizes: "md" | "lg" | "sm" | (string & {})
+      variants: string & {}
     }
     Select: {
-      sizes: "lg" | "md" | "sm" | "xs"
-      variants: "outline" | "filled" | "flushed" | "unstyled"
+      sizes: "lg" | "md" | "sm" | "xs" | (string & {})
+      variants: "outline" | "filled" | "flushed" | "unstyled" | (string & {})
     }
     Skeleton: {
-      sizes: never
-      variants: never
+      sizes: string & {}
+      variants: string & {}
     }
     SkipLink: {
-      sizes: never
-      variants: never
+      sizes: string & {}
+      variants: string & {}
     }
     Slider: {
-      sizes: "lg" | "md" | "sm"
-      variants: never
+      sizes: "lg" | "md" | "sm" | (string & {})
+      variants: string & {}
     }
     Spinner: {
-      sizes: "xs" | "sm" | "md" | "lg" | "xl"
-      variants: never
+      sizes: "xs" | "sm" | "md" | "lg" | "xl" | (string & {})
+      variants: string & {}
     }
     Stat: {
-      sizes: "md"
-      variants: never
+      sizes: "md" | (string & {})
+      variants: string & {}
     }
     Switch: {
-      sizes: "sm" | "md" | "lg"
-      variants: never
+      sizes: "sm" | "md" | "lg" | (string & {})
+      variants: string & {}
     }
     Table: {
-      sizes: "sm" | "md" | "lg"
-      variants: "simple" | "striped" | "unstyled"
+      sizes: "sm" | "md" | "lg" | (string & {})
+      variants: "simple" | "striped" | "unstyled" | (string & {})
     }
     Tabs: {
-      sizes: "sm" | "md" | "lg"
+      sizes: "sm" | "md" | "lg" | (string & {})
       variants:
@@ -575,20 +643,21 @@ | "line"
         | "unstyled"
+        | (string & {})
     }
     Tag: {
-      sizes: "sm" | "md" | "lg"
-      variants: "subtle" | "solid" | "outline"
+      sizes: "sm" | "md" | "lg" | (string & {})
+      variants: "subtle" | "solid" | "outline" | (string & {})
     }
     Textarea: {
-      sizes: "xs" | "sm" | "md" | "lg"
-      variants: "outline" | "flushed" | "filled" | "unstyled"
+      sizes: "xs" | "sm" | "md" | "lg" | (string & {})
+      variants: "outline" | "flushed" | "filled" | "unstyled" | (string & {})
     }
     Tooltip: {
-      sizes: never
-      variants: never
+      sizes: string & {}
+      variants: string & {}
     }
     FormError: {
-      sizes: never
-      variants: never
+      sizes: string & {}
+      variants: string & {}
     }
   }
 }

package.json

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

src/config/index.ts

@@ -19,1 +19,2 @@ export * from "./background"
 export * from "./typography"
+export * from "./scroll"

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.

src/system.ts

@@ -21,2 +21,3 @@ import { mergeWith, objectKeys } from "@chakra-ui/utils"
   typography,
+  scroll,
 } from "./config"
@@ -40,2 +41,3 @@ import { pseudoPropNames, pseudoSelectors } from "./pseudos"
   space,
+  scroll,
   typography,
@@ -42,0 +44,0 @@ textDecoration,

src/system.types.ts

@@ -22,2 +22,3 @@ import { Dict } from "@chakra-ui/utils"
   TypographyProps,
+  ScrollProps,
 } from "./config"
@@ -43,2 +44,3 @@ import { Pseudos } from "./pseudos"
     RingProps,
+    ScrollProps,
     InteractivityProps,
@@ -45,0 +47,0 @@ TextDecorationProps,

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

443076

increased by6.09%

Number of package files

127

increased by2.42%

Lines of code

11630

increased by5.22%

No dependency changes