@pingux/astro 2.87.0-alpha.2 → 2.87.0-alpha.3

package/lib/cjs/components/ListBox/ListBox.js

@@ -28,6 +28,7 @@ var _listbox = require("@react-aria/listbox");
 var _listboxLayout = require("listbox-layout");
 var _listboxVirtualizer = require("listbox-virtualizer");
 var _hooks = require("../../hooks");
+var _Box = _interopRequireDefault(require("../Box"));
 var _Loader = _interopRequireDefault(require("../Loader"));
 var _index = require("./index");
 var _ListBoxContext = require("./ListBoxContext");
@@ -154,6 +155,8 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
   return (0, _react2.jsx)(_ListBoxContext.ListBoxContext.Provider, {
     value: state
+  }, (0, _react2.jsx)(_Box["default"], {
+    variant: "listBox.container"
   }, (0, _react2.jsx)(_listboxVirtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(listBoxProps, others), {
     autoFocus: hasAutoFocus,
     style: {
@@ -188,7 +191,7 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       });
     }
     return null;
-  }));
+  })));
 });
 var _default = ListBox;
 exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -1278,6 +1278,7 @@ declare const _default: {
             lineHeight: string;
             minHeight: string;
             fontFamily: string;
+            cursor: string;
             '&.is-hovered': {
                 color: string;
             };
@@ -1289,6 +1290,7 @@ declare const _default: {
             px: string;
             display: string;
             position: string;
+            cursor: string;
             '&:before': {
                 position: string;
                 display: string;
@@ -1545,7 +1547,14 @@ declare const _default: {
             ml: string;
         };
         listBox: {
+            container: {
+                px: string;
+                py: string;
+            };
             option: {
+                py: string;
+                pl: string;
+                pr: string;
                 '&.is-focused': {
                     color: string;
                     bg: string;

package/lib/cjs/styles/themes/next-gen/variants/cards.js

@@ -10,7 +10,7 @@ var interactive = {
   borderRadius: '1rem',
   border: '1px solid',
   borderColor: 'gray-300',
-  transition: 'border-color .15s ease-in',
+  transition: 'border-color .25s ease-in',
   '&.is-focused': {
     outline: '2px solid',
     outlineColor: 'focus',

package/lib/cjs/styles/themes/next-gen/variants/input.js

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.input = exports.fieldControlWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _text = require("./text");
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var defaultFocus = {
@@ -33,7 +34,8 @@ var input = {
   '&.is-focused': _objectSpread({}, defaultFocus),
   borderRadius: '4px',
   fontWeight: 1,
-  height: '50px'
+  height: '50px',
+  '&::placeholder': _text.text.placeholder
 };
 exports.input = input;
 input.search = _objectSpread(_objectSpread({}, input), {}, {

package/lib/cjs/styles/themes/next-gen/variants/links.d.ts

@@ -9,6 +9,7 @@ declare const _default: {
         lineHeight: string;
         minHeight: string;
         fontFamily: string;
+        cursor: string;
         '&.is-hovered': {
             color: string;
         };
@@ -20,6 +21,7 @@ declare const _default: {
         px: string;
         display: string;
         position: string;
+        cursor: string;
         '&:before': {
             position: string;
             display: string;

package/lib/cjs/styles/themes/next-gen/variants/links.js

@@ -26,6 +26,7 @@ var nextGen = {
   lineHeight: '1.5',
   minHeight: '22.5px',
   fontFamily: 'standard',
+  cursor: 'pointer',
   '&.is-hovered': {
     color: 'blue-600'
   },
@@ -37,6 +38,7 @@ var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
   px: '0',
   display: 'block',
   position: 'relative',
+  cursor: 'pointer',
   '&:before': {
     position: 'absolute',
     display: 'block',

package/lib/cjs/styles/themes/next-gen/variants/text.js

@@ -65,7 +65,7 @@ var text = _objectSpread({
     color: 'text.primary'
   },
   placeholder: {
-    color: 'text.primary',
+    color: 'gray-500',
     fontWeight: 1
   },
   paragraph: {

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -410,7 +410,14 @@ declare const _default: {
         ml: string;
     };
     listBox: {
+        container: {
+            px: string;
+            py: string;
+        };
         option: {
+            py: string;
+            pl: string;
+            pr: string;
             '&.is-focused': {
                 color: string;
                 bg: string;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -205,7 +205,14 @@ var menuTab = {
   ml: '0px !important'
 };
 var listBox = {
+  container: {
+    px: 'sm',
+    py: 'xs'
+  },
   option: {
+    py: '.75rem',
+    pl: '.75rem',
+    pr: '1rem',
     '&.is-focused': {
       color: 'text.primary',
       bg: 'gray-100'

package/lib/components/ListBox/ListBox.js

@@ -20,6 +20,7 @@ import { useListBox } from '@react-aria/listbox';
 import { ListLayout } from 'listbox-layout';
 import { Virtualizer, VirtualizerItem } from 'listbox-virtualizer';
 import { useLocalOrForwardRef } from '../../hooks';
+import Box from '../Box';
 import Loader from '../Loader';
 import { Option } from './index';
 import { ListBoxContext } from './ListBoxContext';
@@ -140,6 +141,8 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   return ___EmotionJSX(ListBoxContext.Provider, {
     value: state
+  }, ___EmotionJSX(Box, {
+    variant: "listBox.container"
   }, ___EmotionJSX(Virtualizer, _extends({}, mergeProps(listBoxProps, others), {
     autoFocus: hasAutoFocus,
     style: {
@@ -174,6 +177,6 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     }
     return null;
-  }));
+  })));
 });
 export default ListBox;

package/lib/styles/themes/next-gen/variants/cards.js

@@ -3,7 +3,7 @@ var interactive = {
   borderRadius: '1rem',
   border: '1px solid',
   borderColor: 'gray-300',
-  transition: 'border-color .15s ease-in',
+  transition: 'border-color .25s ease-in',
   '&.is-focused': {
     outline: '2px solid',
     outlineColor: 'focus',

package/lib/styles/themes/next-gen/variants/input.js

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { text } from './text';
 var defaultFocus = {
   boxShadow: '0 1px 1px rgba(0,0,0,.075), 0 0 0 .0625rem blue'
 };
@@ -26,7 +27,8 @@ export var input = {
   '&.is-focused': _objectSpread({}, defaultFocus),
   borderRadius: '4px',
   fontWeight: 1,
-  height: '50px'
+  height: '50px',
+  '&::placeholder': text.placeholder
 };
 input.search = _objectSpread(_objectSpread({}, input), {}, {
   '&.is-disabled': _objectSpread(_objectSpread({}, readOnlyandDisabledStyles), {}, {

package/lib/styles/themes/next-gen/variants/links.js

@@ -19,6 +19,7 @@ var nextGen = {
   lineHeight: '1.5',
   minHeight: '22.5px',
   fontFamily: 'standard',
+  cursor: 'pointer',
   '&.is-hovered': {
     color: 'blue-600'
   },
@@ -30,6 +31,7 @@ var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
   px: '0',
   display: 'block',
   position: 'relative',
+  cursor: 'pointer',
   '&:before': {
     position: 'absolute',
     display: 'block',

package/lib/styles/themes/next-gen/variants/text.js

@@ -58,7 +58,7 @@ export var text = _objectSpread({
     color: 'text.primary'
   },
   placeholder: {
-    color: 'text.primary',
+    color: 'gray-500',
     fontWeight: 1
   },
   paragraph: {

package/lib/styles/themes/next-gen/variants/variants.js

@@ -196,7 +196,14 @@ var menuTab = {
   ml: '0px !important'
 };
 var listBox = {
+  container: {
+    px: 'sm',
+    py: 'xs'
+  },
   option: {
+    py: '.75rem',
+    pl: '.75rem',
+    pr: '1rem',
     '&.is-focused': {
       color: 'text.primary',
       bg: 'gray-100'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.87.0-alpha.2",
+  "version": "2.87.0-alpha.3",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",