@hopper-ui/components 1.0.6 → 1.0.8

package/dist/chunk-SVUAG4RI.js

@@ -0,0 +1,156 @@
+import { TextFieldContext } from './chunk-O4XPUINW.js';
+import { _InputGroup } from './chunk-Q4P2MTYE.js';
+import { _ClearButton } from './chunk-FJYIXPAV.js';
+import { useLocalizedString } from './chunk-YEYNRBMQ.js';
+import { LabelContext } from './chunk-QCA3ZR56.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { HelperMessageContext } from './chunk-HZKFQ33E.js';
+import { ErrorMessageContext } from './chunk-FAE27DLF.js';
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { _Text } from './chunk-375NGVSY.js';
+import { TextContext } from './chunk-X6SER3TZ.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { IconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { mergeRefs } from '@react-aria/utils';
+import { useControlledState } from '@react-stately/utils';
+import { forwardRef, useState, useCallback } from 'react';
+import { useObjectRef } from 'react-aria';
+import { useContextProps, composeRenderProps, Input, TextField as TextField$1 } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./TextField.module.css#css-module
+var TextField_module_default = { "hop-TextField": "TextField-module__hop-TextField___CA39c", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___KYJbS", "hop-TextField__Label": "TextField-module__hop-TextField__Label___RXpue", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___24cw0", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___MW0nv", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___K3wLR", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___BMw8g" };
+var GlobalTextFieldCssSelector = "hop-TextField";
+function TextField(props, ref) {
+  var _a;
+  const {
+    inputRef: userProvidedInputRef = null,
+    ...propsWithoutRef
+  } = props;
+  [props, ref] = useContextProps(propsWithoutRef, ref, TextFieldContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const [characterCount, setCharacterCount] = useState(() => {
+    var _a2, _b, _c, _d;
+    return (_d = (_c = (_a2 = props.value) == null ? void 0 : _a2.length) != null ? _c : (_b = props.defaultValue) == null ? void 0 : _b.length) != null ? _d : 0;
+  });
+  const {
+    className,
+    style: styleProp,
+    size,
+    prefix,
+    showCharacterCount,
+    maxLength,
+    placeholder,
+    isClearable,
+    onChange: onChangeProp,
+    children,
+    onClear,
+    defaultValue,
+    value: valueProp,
+    isFluid: isFluidProp,
+    isDisabled,
+    isInvalid,
+    ...otherProps
+  } = ownProps;
+  const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
+  const isFluid = (_a = useResponsiveValue(isFluidProp)) != null ? _a : false;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalTextFieldCssSelector,
+    cssModule(
+      TextField_module_default,
+      "hop-TextField",
+      isClearable && "clearable",
+      isFluid && "fluid"
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const handleTextChanged = useCallback((value2) => {
+    setCharacterCount(value2.length);
+    onChangeProp == null ? void 0 : onChangeProp(value2);
+  }, [onChangeProp]);
+  const [value, onChange] = useControlledState(valueProp, defaultValue || "", handleTextChanged);
+  const handleClear = useCallback(() => {
+    onChange("");
+    onClear == null ? void 0 : onClear();
+  }, [onChange, onClear]);
+  const showClearButton = isClearable && characterCount !== 0;
+  if (showCharacterCount && !maxLength) {
+    console.warn("If showCharacterCount is true, maxLength must be set to the maximum number of characters allowed in the TextField.");
+  }
+  const prefixMarkup = prefix ? /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [TextContext, { size, className: TextField_module_default["hop-TextField__prefix"] }],
+        [IconContext, { size, className: TextField_module_default["hop-TextField__prefix"] }]
+      ],
+      children: isTextOnlyChildren(prefix) ? /* @__PURE__ */ jsx(_Text, { children: prefix }) : prefix
+    }
+  ) : null;
+  const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
+    _InputGroup,
+    {
+      isFluid: true,
+      size,
+      className: TextField_module_default["hop-TextField__InputGroup"],
+      isDisabled,
+      isInvalid,
+      children: [
+        prefixMarkup,
+        /* @__PURE__ */ jsx(Input, { ref: inputRef, placeholder }),
+        showCharacterCount && maxLength && /* @__PURE__ */ jsx(CharacterCount, { characterLeft: maxLength - characterCount }),
+        showClearButton && /* @__PURE__ */ jsx(_ClearButton, { isDisabled, size: "lg", onPress: handleClear })
+      ]
+    }
+  ) });
+  const childrenMarkup = composeRenderProps(children, (prev) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [LabelContext, { className: TextField_module_default["hop-TextField__Label"] }],
+            [HelperMessageContext, { className: TextField_module_default["hop-TextField__HelperMessage"] }],
+            [ErrorMessageContext, { className: TextField_module_default["hop-TextField__ErrorMessage"] }]
+          ],
+          children: prev
+        }
+      ),
+      inputMarkup
+    ] });
+  });
+  return /* @__PURE__ */ jsx(
+    TextField$1,
+    {
+      ref,
+      value,
+      style,
+      className: classNames,
+      maxLength,
+      onChange,
+      isDisabled,
+      isInvalid,
+      ...otherProps,
+      children: childrenMarkup
+    }
+  );
+}
+function CharacterCount({ characterLeft }) {
+  const stringFormatter = useLocalizedString();
+  const accessibilityString = stringFormatter.format("Input.charactersLeft", { charLeft: characterLeft });
+  return /* @__PURE__ */ jsx(_Text, { "aria-label": accessibilityString, color: "neutral-weakest", size: "xs", children: characterLeft });
+}
+var _TextField = forwardRef(TextField);
+_TextField.displayName = "TextField";
+
+export { GlobalTextFieldCssSelector, _TextField };

package/dist/{chunk-RCX5B3S3.js → chunk-T3KA26BR.js}

@@ -12,7 +12,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./RadioField.module.css#css-module
-var RadioField_module_default = { "hop-RadioField": "RadioField-module__hop-RadioField___8QRjD", "hop-RadioField--sm": "RadioField-module__hop-RadioField--sm___X4Gkl", "hop-RadioField--md": "RadioField-module__hop-RadioField--md___Z451F", "hop-RadioField__description": "RadioField-module__hop-RadioField__description___SqBmM", "hop-RadioField__radio": "RadioField-module__hop-RadioField__radio___CfAFT" };
+var RadioField_module_default = { "hop-RadioField": "RadioField-module__hop-RadioField___A3lD0", "hop-RadioField--sm": "RadioField-module__hop-RadioField--sm___qT1Ga", "hop-RadioField--md": "RadioField-module__hop-RadioField--md___1sltk", "hop-RadioField__description": "RadioField-module__hop-RadioField__description___Tm3Cz", "hop-RadioField__radio": "RadioField-module__hop-RadioField__radio___RlTsT" };
 var GlobalRadioFieldCssSelector = "hop-RadioField";
 var RadioToDescriptionSizeAdapter = {
   sm: "xs",

package/dist/{chunk-4JAV3FIH.js → chunk-VILNMAVP.js}

@@ -2,7 +2,7 @@ import { SwitchContext } from './chunk-YHBJAXUY.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
-import { _Text } from './chunk-RG4JKE4N.js';
+import { _Text } from './chunk-375NGVSY.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, Switch as Switch$1 } from 'react-a
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./Switch.module.css#css-module
-var Switch_module_default = { "hop-Switch": "Switch-module__hop-Switch___xTzRj", "hop-Switch--sm": "Switch-module__hop-Switch--sm___pMOUQ", "hop-Switch--md": "Switch-module__hop-Switch--md___XkV-u", "hop-Switch__indicator": "Switch-module__hop-Switch__indicator___tCcAc", "hop-Switch__text": "Switch-module__hop-Switch__text___nvsfu", "hop-Switch__icon-list": "Switch-module__hop-Switch__icon-list___322IP", "hop-Switch__icon": "Switch-module__hop-Switch__icon___IIFNL" };
+var Switch_module_default = { "hop-Switch": "Switch-module__hop-Switch___WOJ5D", "hop-Switch--sm": "Switch-module__hop-Switch--sm___7GFmc", "hop-Switch--md": "Switch-module__hop-Switch--md___K-Izy", "hop-Switch__indicator": "Switch-module__hop-Switch__indicator___fXPHM", "hop-Switch__text": "Switch-module__hop-Switch__text___a30Hu", "hop-Switch__icon-list": "Switch-module__hop-Switch__icon-list___1bF-q", "hop-Switch__icon": "Switch-module__hop-Switch__icon___4kIpS" };
 var GlobalSwitchCssSelector = "hop-Switch";
 function Switch(props, ref) {
   var _a;

package/dist/chunk-WWLAPWPS.js

@@ -0,0 +1,118 @@
+import { SearchFieldContext } from './chunk-3NKF5TPD.js';
+import { _InputGroup } from './chunk-Q4P2MTYE.js';
+import { _ClearButton } from './chunk-FJYIXPAV.js';
+import { LabelContext } from './chunk-QCA3ZR56.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { HelperMessageContext } from './chunk-HZKFQ33E.js';
+import { ErrorMessageContext } from './chunk-FAE27DLF.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { IconContext, SearchIcon } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { mergeRefs } from '@react-aria/utils';
+import { forwardRef } from 'react';
+import { useObjectRef } from 'react-aria';
+import { useContextProps, composeRenderProps, Input, SearchField as SearchField$1 } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./SearchField.module.css#css-module
+var SearchField_module_default = { "hop-SearchField": "SearchField-module__hop-SearchField___vxKu8", "hop-SearchField--fluid": "SearchField-module__hop-SearchField--fluid___iBwfJ", "hop-SearchField__Label": "SearchField-module__hop-SearchField__Label___3TwT1", "hop-SearchField__prefix": "SearchField-module__hop-SearchField__prefix___BgL4d", "hop-SearchField__InputGroup": "SearchField-module__hop-SearchField__InputGroup___naXDe", "hop-SearchField--clearable": "SearchField-module__hop-SearchField--clearable___hkMGX", "hop-SearchField__ErrorMessage": "SearchField-module__hop-SearchField__ErrorMessage___6RK1i", "hop-SearchField__HelperMessage": "SearchField-module__hop-SearchField__HelperMessage___2wBE6", "hop-SearchField__ClearButton": "SearchField-module__hop-SearchField__ClearButton___eSX7R" };
+var GlobalSearchFieldCssSelector = "hop-SearchField";
+function SearchField(props, ref) {
+  var _a;
+  const {
+    inputRef: userProvidedInputRef = null,
+    ...propsWithoutRef
+  } = props;
+  [props, ref] = useContextProps(propsWithoutRef, ref, SearchFieldContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style: styleProp,
+    size,
+    placeholder,
+    isClearable = true,
+    children,
+    isFluid: isFluidProp,
+    icon = /* @__PURE__ */ jsx(SearchIcon, {}),
+    isDisabled,
+    isInvalid,
+    ...otherProps
+  } = ownProps;
+  const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
+  const isFluid = (_a = useResponsiveValue(isFluidProp)) != null ? _a : false;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalSearchFieldCssSelector,
+    cssModule(
+      SearchField_module_default,
+      "hop-SearchField",
+      isFluid && "fluid"
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
+    _InputGroup,
+    {
+      isDisabled,
+      isInvalid,
+      isFluid: true,
+      size,
+      className: SearchField_module_default["hop-SearchField__InputGroup"],
+      children: [
+        /* @__PURE__ */ jsx(
+          SlotProvider,
+          {
+            values: [
+              [IconContext, {
+                className: SearchField_module_default["hop-SearchField__prefix"]
+              }]
+            ],
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsx(Input, { ref: inputRef, placeholder }),
+        isClearable && /* @__PURE__ */ jsx(_ClearButton, { size: "lg", isDisabled, className: SearchField_module_default["hop-SearchField__ClearButton"] })
+      ]
+    }
+  ) });
+  const childrenMarkup = composeRenderProps(children, (prev) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [LabelContext, { className: SearchField_module_default["hop-SearchField__Label"] }],
+            [HelperMessageContext, { className: SearchField_module_default["hop-SearchField__HelperMessage"] }],
+            [ErrorMessageContext, { className: SearchField_module_default["hop-SearchField__ErrorMessage"] }]
+          ],
+          children: prev
+        }
+      ),
+      inputMarkup
+    ] });
+  });
+  return /* @__PURE__ */ jsx(
+    SearchField$1,
+    {
+      ref,
+      style,
+      className: classNames,
+      isDisabled,
+      isInvalid,
+      ...otherProps,
+      children: childrenMarkup
+    }
+  );
+}
+var _SearchField = forwardRef(SearchField);
+_SearchField.displayName = "SearchField";
+
+export { GlobalSearchFieldCssSelector, _SearchField };

package/dist/{chunk-JRDN364E.js → chunk-XGLY57N7.js}

@@ -4,8 +4,8 @@ import { RadioListContext } from './chunk-A7TZHALP.js';
 import { RadioContext } from './chunk-FU5CCPLP.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
-import { ErrorMessageContext } from './chunk-FAE27DLF.js';
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
+import { ErrorMessageContext } from './chunk-FAE27DLF.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, RadioGroup as RadioGroup$1 } from
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./RadioGroup.module.css#css-module
-var RadioGroup_module_default = { "hop-RadioGroup": "RadioGroup-module__hop-RadioGroup___S6s5y", "hop-RadioGroup--bordered": "RadioGroup-module__hop-RadioGroup--bordered___CFrBV", "hop-RadioGroup--sm": "RadioGroup-module__hop-RadioGroup--sm___2p7Wk", "hop-RadioGroup--md": "RadioGroup-module__hop-RadioGroup--md___eqGjG", "hop-RadioGroup__label": "RadioGroup-module__hop-RadioGroup__label___7-iXB", "hop-RadioGroup__list": "RadioGroup-module__hop-RadioGroup__list___C5N0N", "hop-RadioGroup__radio": "RadioGroup-module__hop-RadioGroup__radio___k3eYk", "hop-RadioGroup__error-message": "RadioGroup-module__hop-RadioGroup__error-message___vOUPq", "hop-RadioGroup__helper-message": "RadioGroup-module__hop-RadioGroup__helper-message___uQgIj" };
+var RadioGroup_module_default = { "hop-RadioGroup": "RadioGroup-module__hop-RadioGroup___gKLRP", "hop-RadioGroup--bordered": "RadioGroup-module__hop-RadioGroup--bordered___1-bcY", "hop-RadioGroup--sm": "RadioGroup-module__hop-RadioGroup--sm___lnLkS", "hop-RadioGroup--md": "RadioGroup-module__hop-RadioGroup--md___Jvqyo", "hop-RadioGroup__label": "RadioGroup-module__hop-RadioGroup__label___sv-Ey", "hop-RadioGroup__list": "RadioGroup-module__hop-RadioGroup__list___pw9--", "hop-RadioGroup__radio": "RadioGroup-module__hop-RadioGroup__radio___QEo5I", "hop-RadioGroup__error-message": "RadioGroup-module__hop-RadioGroup__error-message___qh3t0", "hop-RadioGroup__helper-message": "RadioGroup-module__hop-RadioGroup__helper-message___b51mt" };
 var GlobalRadioGroupCssSelector = "hop-RadioGroup";
 function RadioGroup(props, ref) {
   var _a, _b;

package/dist/{chunk-ZOTVZM6F.js → chunk-YEYNRBMQ.js}

@@ -1,4 +1,4 @@
-import { __commonJS, __toESM } from './chunk-2P3A4VVY.js';
+import { __commonJS, __toESM } from './chunk-JSBRDJBE.js';
 import { useLocalizedStringFormatter } from 'react-aria';
 
 // src/i18n/intl/en-US.json

package/dist/{chunk-J33IFG4U.js → chunk-YORVWKUU.js}

@@ -1,5 +1,5 @@
 import { AvatarContext } from './chunk-AES7QBQE.js';
-import { _RichIconAvatarImage } from './chunk-ITQK6JTD.js';
+import { _RichIconAvatarImage } from './chunk-DERV7IO4.js';
 import { DeletedUserRichIcon } from '@hopper-ui/icons';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import clsx from 'clsx';

package/dist/i18n/src/index.js

@@ -1,2 +1,2 @@
-export { useLocalizedString } from '../../chunk-ZOTVZM6F.js';
-import '../../chunk-2P3A4VVY.js';
+export { useLocalizedString } from '../../chunk-YEYNRBMQ.js';
+import '../../chunk-JSBRDJBE.js';

package/dist/i18n/src/useLocalizedString.js

@@ -1,2 +1,2 @@
-export { useLocalizedString } from '../../chunk-ZOTVZM6F.js';
-import '../../chunk-2P3A4VVY.js';
+export { useLocalizedString } from '../../chunk-YEYNRBMQ.js';
+import '../../chunk-JSBRDJBE.js';