@paygreen/pgui 3.1.0 → 3.1.1

package/dist/pgui.css

@@ -1 +1 @@
-:root{--PhoneInput-color--focus: #03b2cb;--PhoneInputInternationalIconPhone-opacity: .8;--PhoneInputInternationalIconGlobe-opacity: .65;--PhoneInputCountrySelect-marginRight: .35em;--PhoneInputCountrySelectArrow-width: .3em;--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);--PhoneInputCountrySelectArrow-borderWidth: 1px;--PhoneInputCountrySelectArrow-opacity: .45;--PhoneInputCountrySelectArrow-color: currentColor;--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);--PhoneInputCountrySelectArrow-transform: rotate(45deg);--PhoneInputCountryFlag-aspectRatio: 1.5;--PhoneInputCountryFlag-height: 1em;--PhoneInputCountryFlag-borderWidth: 1px;--PhoneInputCountryFlag-borderColor: rgba(0,0,0,.5);--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,.1)}.PhoneInput{display:flex;align-items:center}.PhoneInputInput{flex:1;min-width:0}.PhoneInputCountryIcon{width:calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));height:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--square{width:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--border{background-color:var(--PhoneInputCountryFlag-backgroundColor--loading);box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor)}.PhoneInputCountryIconImg{display:block;width:100%;height:100%}.PhoneInputInternationalIconPhone{opacity:var(--PhoneInputInternationalIconPhone-opacity)}.PhoneInputInternationalIconGlobe{opacity:var(--PhoneInputInternationalIconGlobe-opacity)}.PhoneInputCountry{position:relative;align-self:stretch;display:flex;align-items:center;margin-right:var(--PhoneInputCountrySelect-marginRight)}.PhoneInputCountrySelect{position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;border:0;opacity:0;cursor:pointer}.PhoneInputCountrySelect[disabled],.PhoneInputCountrySelect[readonly]{cursor:default}.PhoneInputCountrySelectArrow{display:block;content:"";width:var(--PhoneInputCountrySelectArrow-width);height:var(--PhoneInputCountrySelectArrow-width);margin-left:var(--PhoneInputCountrySelectArrow-marginLeft);border-style:solid;border-color:var(--PhoneInputCountrySelectArrow-color);border-top-width:0;border-bottom-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-left-width:0;border-right-width:var(--PhoneInputCountrySelectArrow-borderWidth);transform:var(--PhoneInputCountrySelectArrow-transform);opacity:var(--PhoneInputCountrySelectArrow-opacity)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon+.PhoneInputCountrySelectArrow{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon--border{box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon .PhoneInputInternationalIconGlobe{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.select-custom-container{font-size:var(--chakra-font-sizes-sm);min-width:200px;display:inline-block;width:100%}.select-custom-container--error .select-custom__control{border-color:var(--chakra-colors-border-error)!important}.select-custom-container--error .select-custom__control--is-focused{border-color:var(--chakra-colors-border-error)!important;box-shadow:0 0 0 1px var(--chakra-colors-border-error)!important}.select-custom-container--error .select-custom__control:hover{border-color:var(--chakra-colors-border-error)!important}.select-custom__single-value{color:var(--chakra-colors-fg)!important}.select-custom__control{border:1px solid var(--chakra-colors-border)!important}.select-custom__control,.select-custom__control--is-focused{min-height:var(--chakra-sizes-9)!important;background-color:transparent!important}.select-custom__control--is-focused{box-shadow:none!important;outline-offset:0!important;outline-width:var(--focus-ring-width, 1px)!important;outline-color:var(--chakra-colors-color-palette-focus-ring)!important;outline-style:var(--focus-ring-style, solid)!important;border-color:var(--chakra-colors-color-palette-focus-ring)!important}@keyframes pgui-select-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.select-custom__menu{z-index:1000!important;border:1px solid var(--chakra-colors-border)!important;background-color:var(--chakra-colors-bg-panel)!important;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f!important;border-radius:var(--chakra-radii-md)!important;animation:pgui-select-menu-in .2s cubic-bezier(.4,0,.2,1)}.select-custom__menu-list{border-radius:var(--chakra-radii-md)!important;padding:0!important}.select-custom__multi-value{background-color:var(--chakra-colors-bg-panel)!important;border:1px solid var(--chakra-colors-border)!important;border-radius:var(--chakra-radii-sm)!important}.select-custom__multi-value__label{color:var(--chakra-colors-fg)!important}.select-custom__option{background-color:var(--chakra-colors-bg)!important;font-size:var(--chakra-font-sizes-sm)!important;padding:5px 10px!important}.select-custom__option:hover{background-color:var(--chakra-colors-bg-muted)!important;cursor:pointer!important}.select-custom__option--is-selected{color:var(--chakra-colors-fg)!important;background-color:var(--chakra-colors-bg-muted)!important}.select-custom__multi-value__label{font-size:var(--chakra-font-sizes-sm)!important}.select-custom__multi-value__remove{color:var(--chakra-colors-fg)!important}.select-custom__multi-value__remove:hover{cursor:pointer!important;background-color:var(--chakra-colors-danger-muted)!important}.select-custom__indicator svg{cursor:pointer;width:15px;height:15px}
+:root{--PhoneInput-color--focus: #03b2cb;--PhoneInputInternationalIconPhone-opacity: .8;--PhoneInputInternationalIconGlobe-opacity: .65;--PhoneInputCountrySelect-marginRight: .35em;--PhoneInputCountrySelectArrow-width: .3em;--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);--PhoneInputCountrySelectArrow-borderWidth: 1px;--PhoneInputCountrySelectArrow-opacity: .45;--PhoneInputCountrySelectArrow-color: currentColor;--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);--PhoneInputCountrySelectArrow-transform: rotate(45deg);--PhoneInputCountryFlag-aspectRatio: 1.5;--PhoneInputCountryFlag-height: 1em;--PhoneInputCountryFlag-borderWidth: 1px;--PhoneInputCountryFlag-borderColor: rgba(0,0,0,.5);--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,.1)}.PhoneInput{display:flex;align-items:center}.PhoneInputInput{flex:1;min-width:0}.PhoneInputCountryIcon{width:calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));height:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--square{width:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--border{background-color:var(--PhoneInputCountryFlag-backgroundColor--loading);box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor)}.PhoneInputCountryIconImg{display:block;width:100%;height:100%}.PhoneInputInternationalIconPhone{opacity:var(--PhoneInputInternationalIconPhone-opacity)}.PhoneInputInternationalIconGlobe{opacity:var(--PhoneInputInternationalIconGlobe-opacity)}.PhoneInputCountry{position:relative;align-self:stretch;display:flex;align-items:center;margin-right:var(--PhoneInputCountrySelect-marginRight)}.PhoneInputCountrySelect{position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;border:0;opacity:0;cursor:pointer}.PhoneInputCountrySelect[disabled],.PhoneInputCountrySelect[readonly]{cursor:default}.PhoneInputCountrySelectArrow{display:block;content:"";width:var(--PhoneInputCountrySelectArrow-width);height:var(--PhoneInputCountrySelectArrow-width);margin-left:var(--PhoneInputCountrySelectArrow-marginLeft);border-style:solid;border-color:var(--PhoneInputCountrySelectArrow-color);border-top-width:0;border-bottom-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-left-width:0;border-right-width:var(--PhoneInputCountrySelectArrow-borderWidth);transform:var(--PhoneInputCountrySelectArrow-transform);opacity:var(--PhoneInputCountrySelectArrow-opacity)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon+.PhoneInputCountrySelectArrow{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon--border{box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon .PhoneInputInternationalIconGlobe{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.select-custom-container{font-size:var(--chakra-font-sizes-sm);min-width:200px;display:inline-block;width:100%}.select-custom-container--error .select-custom__control{border-color:var(--chakra-colors-border-error)!important}.select-custom-container--error .select-custom__control--is-focused{border-color:var(--chakra-colors-border-error)!important;box-shadow:0 0 0 1px var(--chakra-colors-border-error)!important}.select-custom-container--error .select-custom__control:hover{border-color:var(--chakra-colors-border-error)!important}.select-custom__placeholder{color:var(--chakra-colors-fg-muted)!important}.select-custom__control--is-disabled{opacity:.5!important;cursor:not-allowed!important}.select-custom__control--is-disabled .select-custom__placeholder{color:var(--chakra-colors-fg-muted)!important}.select-custom__single-value{color:var(--chakra-colors-fg)!important}.select-custom__control{border:1px solid var(--chakra-colors-border)!important}.select-custom__control,.select-custom__control--is-focused{min-height:var(--chakra-sizes-9)!important;background-color:transparent!important}.select-custom__control--is-focused{box-shadow:none!important;outline-offset:0!important;outline-width:var(--focus-ring-width, 1px)!important;outline-color:var(--chakra-colors-color-palette-focus-ring)!important;outline-style:var(--focus-ring-style, solid)!important;border-color:var(--chakra-colors-color-palette-focus-ring)!important}@keyframes pgui-select-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.select-custom__menu{z-index:1000!important;border:1px solid var(--chakra-colors-border)!important;background-color:var(--chakra-colors-bg-panel)!important;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f!important;border-radius:var(--chakra-radii-md)!important;animation:pgui-select-menu-in .2s cubic-bezier(.4,0,.2,1)}.select-custom__menu-list{border-radius:var(--chakra-radii-md)!important;padding:0!important}.select-custom__multi-value{background-color:var(--chakra-colors-bg-panel)!important;border:1px solid var(--chakra-colors-border)!important;border-radius:var(--chakra-radii-sm)!important}.select-custom__multi-value__label{color:var(--chakra-colors-fg)!important}.select-custom__option{background-color:var(--chakra-colors-bg)!important;font-size:var(--chakra-font-sizes-sm)!important;padding:5px 10px!important}.select-custom__option:hover{background-color:var(--chakra-colors-bg-muted)!important;cursor:pointer!important}.select-custom__option--is-selected{color:var(--chakra-colors-fg)!important;background-color:var(--chakra-colors-bg-muted)!important}.select-custom__multi-value__label{font-size:var(--chakra-font-sizes-sm)!important}.select-custom__multi-value__remove{color:var(--chakra-colors-fg)!important}.select-custom__multi-value__remove:hover{cursor:pointer!important;background-color:var(--chakra-colors-danger-muted)!important}.select-custom__indicator svg{cursor:pointer;width:15px;height:15px}

package/dist/theme/recipes/alert-recipe.d.ts

@@ -26,5 +26,57 @@ declare const alertRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"cont
             };
         };
     };
+    variant: {
+        subtle: {
+            root: {
+                bg: "colorPalette.subtle";
+                color: "fg";
+                borderTopColor: "border.subtle";
+                borderRightColor: "border.subtle";
+                borderBottomColor: "border.subtle";
+                shadow: "none";
+                boxShadow: "none";
+            };
+        };
+        surface: {
+            root: {
+                bg: "colorPalette.subtle";
+                color: "fg";
+                shadow: "none";
+                boxShadow: "card";
+            };
+        };
+        outline: {
+            root: {
+                bg: "bg";
+                color: "fg";
+                shadow: "none";
+                boxShadow: "none";
+            };
+        };
+        solid: {
+            root: {
+                bg: "colorPalette.solid";
+                color: "colorPalette.contrast";
+                borderTopWidth: "1px";
+                borderRightWidth: "1px";
+                borderBottomWidth: "1px";
+                borderLeftWidth: "1px";
+                borderTopColor: "colorPalette.emphasized";
+                borderRightColor: "colorPalette.emphasized";
+                borderBottomColor: "colorPalette.emphasized";
+                borderLeftColor: "colorPalette.emphasized";
+            };
+            title: {
+                color: "colorPalette.contrast";
+            };
+            description: {
+                color: "colorPalette.contrast";
+            };
+            indicator: {
+                color: "colorPalette.contrast";
+            };
+        };
+    };
 }>;
 export default alertRecipe;

package/dist/theme/recipes/native-select-recipe.d.ts

@@ -0,0 +1,6 @@
+/**
+ * NativeSelect overrides — align empty-state text with Chakra Input placeholders.
+ * Native <select> has no ::placeholder; the empty option is styled via :has().
+ */
+declare const nativeSelectRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"field" | "root" | "indicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"field" | "root" | "indicator">>;
+export default nativeSelectRecipe;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paygreen/pgui",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "core ui for paygreen apps",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -36,14 +36,14 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@chakra-ui/react": "^3.35.0",
+    "@chakra-ui/react": "^3.36.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@fontsource-variable/geist": "^5.2.9",
-    "@internationalized/date": "^3.12.1",
+    "@internationalized/date": "^3.12.2",
     "@tanstack/react-table": "^8.21.3",
-    "dayjs": "^1.11.20",
-    "libphonenumber-js": "^1.12.39",
+    "dayjs": "^1.11.21",
+    "libphonenumber-js": "1.12.39",
     "next-themes": "^0.4.6",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
@@ -54,24 +54,25 @@
     "use-mask-input": "^3.7.4"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^9.1.17",
-    "@storybook/addon-docs": "^9.1.17",
-    "@storybook/addon-links": "^9.1.17",
-    "@storybook/addon-themes": "^9.1.17",
-    "@storybook/addon-vitest": "^9.1.17",
-    "@storybook/builder-vite": "^9.1.17",
-    "@storybook/react-vite": "^9.1.17",
+    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-links": "^10.4.6",
+    "@storybook/addon-themes": "^10.4.6",
+    "@storybook/addon-vitest": "^10.4.6",
+    "@storybook/builder-vite": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
     "@testing-library/react": "^16.3.2",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
-    "@types/node": "^24.12.4",
-    "@types/react": "^19.2.15",
+    "@types/node": "^24.13.2",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "@vitejs/plugin-react": "^4.5.2",
-    "@vitest/browser": "^3.2.3",
-    "@vitest/coverage-istanbul": "^3.2.4",
-    "@vitest/coverage-v8": "^3.2.3",
+    "@vitest/browser": "^4.1.9",
+    "@vitest/browser-playwright": "^4.1.9",
+    "@vitest/coverage-istanbul": "^4.1.9",
+    "@vitest/coverage-v8": "^4.1.9",
     "eslint": "^8.2.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
@@ -79,22 +80,22 @@
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "^0.11.2",
+    "eslint-plugin-storybook": "^10.4.6",
     "globals": "^16.2.0",
     "husky": "^9.1.7",
     "jsdom": "^29.1.1",
     "lint-staged": "^16.3.2",
-    "playwright": "^1.60.0",
-    "prettier": "^3.8.3",
+    "playwright": "^1.61.0",
+    "prettier": "^3.8.4",
     "prop-types": "^15.8.1",
-    "storybook": "^9.1.17",
+    "storybook": "^10.4.6",
     "typescript": "^5.9.3",
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.3"
+    "vitest": "^4.1.9"
   },
   "peerDependencies": {
-    "@chakra-ui/react": "^3.35.0",
+    "@chakra-ui/react": "^3.36.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@tanstack/react-table": "^8.21.3",
@@ -108,5 +109,8 @@
     "@chakra-ui/react": {
       "optional": false
     }
+  },
+  "overrides": {
+    "esbuild": "0.28.1"
   }
 }

package/src/components/select/select.css

@@ -18,6 +18,19 @@
   border-color: var(--chakra-colors-border-error) !important;
 }
 
+.select-custom__placeholder {
+  color: var(--chakra-colors-fg-muted) !important;
+}
+
+.select-custom__control--is-disabled {
+  opacity: 0.5 !important;
+  cursor: not-allowed !important;
+}
+
+.select-custom__control--is-disabled .select-custom__placeholder {
+  color: var(--chakra-colors-fg-muted) !important;
+}
+
 .select-custom__single-value {
   color: var(--chakra-colors-fg) !important;
 }