@paygreen/pgui 2.12.2 → 2.13.1

package/dist/cjs/types/theme/components/index.d.ts

@@ -13,3 +13,4 @@ export { default as Slider } from './slider';
 export { default as Switch } from './switch';
 export { default as Tag } from './tag';
 export { default as Textarea } from './textarea';
+export { default as Tooltip } from './tooltip';

package/dist/cjs/types/theme/components/input.d.ts

@@ -19,6 +19,9 @@ declare const _default: {
                 _focusVisible: {
                     boxShadow: string;
                 };
+                _placeholder: {
+                    color: string;
+                };
             };
             addon: {
                 borderRadius: string;
@@ -40,6 +43,9 @@ declare const _default: {
                     bg: string;
                     boxShadow: string;
                 };
+                _placeholder: {
+                    color: string;
+                };
             };
             addon: {
                 borderRadius: string;

package/dist/cjs/types/theme/components/pin-input.d.ts

@@ -12,6 +12,9 @@ declare const _default: {
             _focusVisible: {
                 boxShadow: string;
             };
+            _placeholder: {
+                color: string;
+            };
         };
         filled: (props: any) => {
             bg: string;
@@ -28,6 +31,9 @@ declare const _default: {
                 bg: string;
                 boxShadow: string;
             };
+            _placeholder: {
+                color: string;
+            };
         };
     };
 };

package/dist/cjs/types/theme/components/textarea.d.ts

@@ -20,6 +20,9 @@ declare const _default: {
             _focusVisible: {
                 boxShadow: string;
             };
+            _placeholder: {
+                color: string;
+            };
         };
         filled: (props: any) => {
             bg: string;
@@ -36,6 +39,9 @@ declare const _default: {
                 bg: string;
                 boxShadow: string;
             };
+            _placeholder: {
+                color: string;
+            };
         };
     };
     defaultProps: {

package/dist/cjs/types/theme/components/tooltip.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    baseStyle: {
+        fontSize: string;
+        borderRadius: string;
+        padding: string;
+    };
+};
+export default _default;

package/dist/esm/index.js

@@ -46981,9 +46981,34 @@ var PaginationButtonNextPage = function (_a) {
 };
 var PaginationInfo = function (_a) {
     var rest = __rest$c(_a, []);
-    var _b = useContext(PaginationContext), isLoadingPage = _b.isLoadingPage, page = _b.page, lastPage = _b.lastPage, setPage = _b.setPage;
+    var _b = useContext(PaginationContext), isLoadingPage = _b.isLoadingPage, page = _b.page, firstPage = _b.firstPage, lastPage = _b.lastPage, setPage = _b.setPage;
     var _c = useState(false), isEdit = _c[0], setIsEdit = _c[1];
+    var _d = useState(page), inputValue = _d[0], setInputValue = _d[1];
     var numberInputRef = useRef(null);
+    /**
+     * Handles the page change event.
+     *
+     * @param {string} value - The value from the input field.
+     * @returns {number} The new page number.
+     *
+     * The function first tries to parse the input value to an integer.
+     * If the input is not a number, it defaults to the `firstPage`.
+     * If the input exceeds the `lastPage`, it sets the page to the `lastPage`.
+     * If the input is less than `firstPage`, it sets the page to the `firstPage`.
+     */
+    var handlePageChange = function (value) {
+        var newPage = parseInt(value, 10);
+        if (isNaN(newPage)) {
+            newPage = firstPage; // default to first page if input is not a number
+        }
+        else if (newPage >= parseInt(lastPage, 10)) {
+            newPage = lastPage; // set to last page if input exceeds last page
+        }
+        else if (newPage < parseInt(firstPage, 10)) {
+            newPage = firstPage; // set to first page if input is less than first page
+        }
+        return newPage;
+    };
     useEffect(function () {
         var _a;
         if (isEdit) {
@@ -46997,14 +47022,23 @@ var PaginationInfo = function (_a) {
         }, cursor: "pointer", wrap: "nowrap" }, rest),
         React__default.createElement(React__default.Fragment, null, !isLoadingPage && (React__default.createElement(React__default.Fragment, null,
             !isEdit && (React__default.createElement(Text, { as: "span", cursor: "pointer" }, page)),
-            isEdit && (React__default.createElement(NumberInput, { w: 20, min: 1, max: lastPage, onChange: function (value) {
-                    var newPage = value
-                        ? parseInt(value, 10) >= parseInt(lastPage, 10)
-                            ? lastPage
-                            : value
-                        : 1;
-                    setPage(parseInt(newPage, 10));
-                }, defaultValue: page, size: "sm", onBlur: function () { return setIsEdit(false); } },
+            isEdit && (React__default.createElement(NumberInput, { w: 20, min: 1, max: lastPage, onBlur: function (event) {
+                    var value = event.target.value;
+                    var newPage = handlePageChange(value);
+                    setPage(newPage);
+                    setIsEdit(false);
+                }, onChange: function (value) {
+                    var newPage = handlePageChange(value);
+                    setInputValue(newPage);
+                }, onKeyDown: function (event) {
+                    if (event.key === 'Enter') {
+                        event.preventDefault();
+                        var value = inputValue;
+                        var newPage = handlePageChange(String(value));
+                        setPage(newPage);
+                        setIsEdit(false);
+                    }
+                }, defaultValue: page, size: "sm" },
                 React__default.createElement(NumberInputField, { ref: numberInputRef }),
                 React__default.createElement(NumberInputStepper, null,
                     React__default.createElement(NumberIncrementStepper, null),
@@ -55774,7 +55808,10 @@ var SelectInner = function (_a, ref) {
     }); })), getComponentStyles('control', function (_a) {
         var isFocused = _a.isFocused, isDisabled = _a.isDisabled;
         return (__assign$g(__assign$g(__assign$g({ color: fieldTextColor, fontSize: fieldFontSize, height: 'fit-content', minHeight: fieldHeight, borderRadius: fieldBorderRadius, borderColor: fieldBorderColor, backgroundColor: fieldBg, ':hover': {
-                borderColor: theme.colors.gray[300],
+                borderColor: !!isError && !isFocused ? fieldErrorBorderColor : fieldBorderColor,
+                backgroundColor: isLightMode
+                    ? theme.colors.gray['100']
+                    : theme.colors.gray['700'],
                 cursor: 'text'
             } }, getConditionalStyles(isFocused && fieldFocusBorderColor, {
             borderColor: fieldFocusBorderColor,
@@ -55784,9 +55821,13 @@ var SelectInner = function (_a, ref) {
             }
         })), getConditionalStyles(!!isError, {
             borderColor: fieldErrorBorderColor,
-            boxShadow: "0 0 0 1px ".concat(fieldErrorBorderColor),
+            boxShadow: "none",
+            borderWidth: '1px',
             '&:hover': {
-                borderColor: fieldErrorBorderColor
+                borderColor: fieldErrorBorderColor,
+                boxShadow: "none",
+                borderWidth: '1px',
+                borderStyle: 'solid'
             }
         })), getConditionalStyles(isDisabled, {
             opacity: 0.6
@@ -56323,6 +56364,9 @@ var Input = {
                 },
                 _focusVisible: {
                     boxShadow: "0 0 0 1px ".concat(props.theme.colors.gray[300])
+                },
+                _placeholder: {
+                    color: 'gray.500'
                 }
             },
             addon: {
@@ -56344,6 +56388,9 @@ var Input = {
                 _focusVisible: {
                     bg: props.colorMode === 'light' ? 'gray.200' : 'gray.800',
                     boxShadow: "0 0 0 1px ".concat(props.theme.colors.gray[300])
+                },
+                _placeholder: {
+                    color: 'gray.500'
                 }
             },
             addon: {
@@ -56480,6 +56527,14 @@ var textarea = {
     defaultProps: defaultProps
 };
 
+var tooltip = {
+    baseStyle: {
+        fontSize: 'sm',
+        borderRadius: 'md',
+        padding: '0.5rem'
+    }
+};
+
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Alert: alert,
@@ -56496,7 +56551,8 @@ var components = /*#__PURE__*/Object.freeze({
   Slider: slider,
   Switch: _switch,
   Tag: tag,
-  Textarea: textarea
+  Textarea: textarea,
+  Tooltip: tooltip
 });
 
 var colors = {
@@ -56539,7 +56595,7 @@ var colors = {
         800: '#430F0F',
         900: '#210707'
     },
-    background: '#F4FDFF',
+    background: '#FBFBFB',
     gray: {
         50: '#F8FAFC',
         100: '#F1F5F9',