@paygreen/pgui 2.3.0 → 2.4.0

package/dist/cjs/index.js

@@ -43933,7 +43933,7 @@ var inputStyle = function inputStyle(isHidden) {
   }, spacingStyle);
 };
 
-var Input = function Input(props) {
+var Input$1 = function Input(props) {
   var className = props.className,
       cx = props.cx,
       getStyles = props.getStyles,
@@ -44195,7 +44195,7 @@ var components$1 = {
   GroupHeading: GroupHeading,
   IndicatorsContainer: IndicatorsContainer,
   IndicatorSeparator: IndicatorSeparator,
-  Input: Input,
+  Input: Input$1,
   LoadingIndicator: LoadingIndicator,
   Menu: Menu,
   MenuList: MenuList,
@@ -45289,7 +45289,7 @@ var defaultTheme = {
   spacing: spacing
 };
 
-var defaultProps = {
+var defaultProps$5 = {
   'aria-live': 'polite',
   backspaceRemovesValue: true,
   blurInputOnSelect: isTouchCapable(),
@@ -47073,7 +47073,7 @@ var Select$1 = /*#__PURE__*/function (_Component) {
   return Select;
 }(React.Component);
 
-Select$1.defaultProps = defaultProps;
+Select$1.defaultProps = defaultProps$5;
 
 var StateManagedSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var baseSelectProps = useStateManager(props);
@@ -51085,6 +51085,19 @@ var button = {
     }
 };
 
+var defaultProps$4 = {
+    colorScheme: 'brand'
+};
+var baseStyle$1 = {
+    control: {
+        borderRadius: '4px'
+    }
+};
+var checkbox = {
+    defaultProps: defaultProps$4,
+    baseStyle: baseStyle$1
+};
+
 var getSize = function (value) {
     if (value === 'full') {
         return {
@@ -51102,10 +51115,64 @@ var drawer = {
     sizes: sizes$1
 };
 
-var input = {
+var Input = {
+    baseStyle: {
+        field: {
+            borderRadius: 'full'
+        }
+    },
+    variants: {
+        outline: function (props) {
+            return {
+                field: {
+                    bg: 'white',
+                    borderColor: 'gray.200',
+                    _focus: {
+                        borderColor: 'brand.500'
+                    },
+                    _focusVisible: {
+                        boxShadow: "0 0 0 1px ".concat(props.theme.colors.brand[500])
+                    }
+                },
+                addon: {
+                    borderRadius: 'full'
+                }
+            };
+        },
+        filled: function (props) { return ({
+            field: {
+                bg: 'gray.50',
+                borderWidth: '1px',
+                borderColor: 'gray.200',
+                _hover: {
+                    bg: 'gray.50',
+                    borderColor: 'gray.200'
+                },
+                _focus: {
+                    bg: 'gray.50',
+                    borderColor: 'brand.500'
+                },
+                _focusVisible: {
+                    boxShadow: "0 0 0 1px ".concat(props.theme.colors.brand[500])
+                }
+            },
+            addon: {
+                borderRadius: 'full'
+            }
+        }); }
+    }
+};
+
+var numberInput = {
     baseStyle: {
         field: {
             borderRadius: 'full'
+        },
+        stepperGroup: {
+            width: '2rem'
+        },
+        stepper: {
+            paddingRight: '0.2rem'
         }
     },
     variants: {
@@ -51152,6 +51219,35 @@ var input = {
     }
 };
 
+var variants$1 = {
+    outline: function (props) { var _a; return (_a = Input.variants.outline(props).field) !== null && _a !== void 0 ? _a : {}; },
+    filled: function (props) { var _a; return (_a = Input.variants.filled(props).field) !== null && _a !== void 0 ? _a : {}; }
+};
+var pinInput = {
+    variants: variants$1
+};
+
+var defaultProps$3 = {
+    colorScheme: 'brand'
+};
+var radio = {
+    defaultProps: defaultProps$3
+};
+
+var defaultProps$2 = {
+    colorScheme: 'brand'
+};
+var slider = {
+    defaultProps: defaultProps$2
+};
+
+var defaultProps$1 = {
+    colorScheme: 'brand'
+};
+var _switch = {
+    defaultProps: defaultProps$1
+};
+
 var tag = {
     baseStyle: {
         container: {
@@ -51161,13 +51257,35 @@ var tag = {
     }
 };
 
+var baseStyle = __assign$2(__assign$2({}, Input.baseStyle.field), { paddingY: '8px', minHeight: '80px', lineHeight: 'short', verticalAlign: 'top' });
+var variants = {
+    outline: function (props) { var _a; return (_a = Input.variants.outline(props).field) !== null && _a !== void 0 ? _a : {}; },
+    filled: function (props) { var _a; return (_a = Input.variants.filled(props).field) !== null && _a !== void 0 ? _a : {}; }
+};
+var defaultProps = {
+    size: 'md',
+    variant: 'outline'
+};
+var textarea = {
+    baseStyle: baseStyle,
+    variants: variants,
+    defaultProps: defaultProps
+};
+
 var components = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Badge: badge,
     Button: button,
+    Checkbox: checkbox,
     Drawer: drawer,
-    Input: input,
-    Tag: tag
+    Input: Input,
+    NumberInput: numberInput,
+    PinInput: pinInput,
+    Radio: radio,
+    Slider: slider,
+    Switch: _switch,
+    Tag: tag,
+    Textarea: textarea
 });
 
 var colors = {