@hopper-ui/components 1.0.1 → 1.0.3

package/dist/inputs/src/SearchField.d.ts

@@ -0,0 +1,42 @@
+import * as react from 'react';
+import { MutableRefObject } from 'react';
+import { StyledComponentProps, ResponsiveProp } from '@hopper-ui/styled-system';
+import { SearchFieldProps as SearchFieldProps$1 } from 'react-aria-components';
+
+declare const GlobalSearchFieldCssSelector = "hop-SearchField";
+interface SearchFieldProps extends StyledComponentProps<SearchFieldProps$1> {
+    /**
+     * Whether the SearchField is clearable.
+     * @default true
+     */
+    isClearable?: boolean;
+    /**
+     * The placeholder text when the SearchField is empty.
+     */
+    placeholder?: string;
+    /**
+     * The size of the SearchField.
+     * @default "md"
+     */
+    size?: ResponsiveProp<"sm" | "md">;
+    /**
+     * If `true`, the SearchField will take all available width.
+     */
+    isFluid?: ResponsiveProp<boolean>;
+    /**
+     * An icon to display at the start of the input.
+     */
+    icon?: React.ReactNode | null;
+    /**
+     * A ref for the HTML input element.
+     */
+    inputRef?: MutableRefObject<HTMLInputElement>;
+}
+/**
+ * A specialized text input for [search input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search).
+ *
+ * [View Documentation](TODO)
+ */
+declare const _SearchField: react.ForwardRefExoticComponent<SearchFieldProps & react.RefAttributes<HTMLDivElement>>;
+
+export { GlobalSearchFieldCssSelector, _SearchField as SearchField, type SearchFieldProps };

package/dist/inputs/src/SearchField.js

@@ -0,0 +1,186 @@
+import { SearchFieldContext } from '../../chunk-3NKF5TPD.js';
+import '../../chunk-LJXTJRSB.js';
+import '../../chunk-OQW6BT6B.js';
+import '../../chunk-TXZ6BMFR.js';
+import '../../chunk-TIPN4VYD.js';
+import '../../chunk-OGMLQRES.js';
+import '../../chunk-EWMWQ2MC.js';
+import '../../chunk-LCAS3YQV.js';
+import '../../chunk-WWRB4K4M.js';
+import '../../chunk-XLKYXKWE.js';
+import '../../chunk-7NT6M6KM.js';
+import '../../chunk-5MBJWRZD.js';
+import '../../chunk-NKHMUPAP.js';
+import '../../chunk-A7TZHALP.js';
+import '../../chunk-XFKAXBB5.js';
+import '../../chunk-OUN5KSHD.js';
+import '../../chunk-H7VJS4MX.js';
+import '../../chunk-YHBJAXUY.js';
+import '../../chunk-Z3ID4UEE.js';
+import '../../chunk-Y7HUXUHX.js';
+import '../../chunk-D6UTDI2K.js';
+import '../../chunk-JLF7DSUY.js';
+import '../../chunk-IOLNBXZM.js';
+import '../../chunk-FU5CCPLP.js';
+import '../../chunk-DGLAGYBD.js';
+import '../../chunk-GXBVNCVP.js';
+import '../../chunk-IXB2WK56.js';
+import '../../chunk-TVFC2MJ4.js';
+import '../../chunk-AQITZWYM.js';
+import '../../chunk-I67NHYK4.js';
+import { _InputGroup } from '../../chunk-RXBKOHT2.js';
+import '../../chunk-6BFSSZCY.js';
+import '../../chunk-DJU2DUTQ.js';
+import '../../chunk-WTKIUAHI.js';
+import '../../chunk-3DWVMCIV.js';
+import '../../chunk-2VBOJKEP.js';
+import '../../chunk-3XFTRBIC.js';
+import '../../chunk-EE75ND6V.js';
+import { ErrorMessageContext } from '../../chunk-ACVMW6YD.js';
+import { HelperMessageContext } from '../../chunk-ESVVLTEN.js';
+import '../../chunk-ZGNK4GWA.js';
+import '../../chunk-N7YDPVZL.js';
+import '../../chunk-3LRBUQC2.js';
+import '../../chunk-WDUQUPTE.js';
+import '../../chunk-BAKCRZAG.js';
+import '../../chunk-VJQ7M2BK.js';
+import { _ClearButton } from '../../chunk-UARL5M2W.js';
+import '../../chunk-DXVKHP4V.js';
+import '../../chunk-LYV2D5RZ.js';
+import '../../chunk-O7IJYNVQ.js';
+import '../../chunk-DLTYFRKN.js';
+import '../../chunk-2EAZPH3M.js';
+import '../../chunk-GF2U6E4D.js';
+import '../../chunk-5EPNXRCT.js';
+import '../../chunk-WPNVVGFW.js';
+import '../../chunk-ZSFJVMJN.js';
+import '../../chunk-UY7WQ7TC.js';
+import '../../chunk-H5YTU3U7.js';
+import '../../chunk-NH3IVMXB.js';
+import '../../chunk-H6CDFWVR.js';
+import '../../chunk-WLSLSMK7.js';
+import '../../chunk-CTK5YVBZ.js';
+import { LabelContext } from '../../chunk-QCA3ZR56.js';
+import '../../chunk-4ZYV2XLW.js';
+import '../../chunk-WMTWFKKP.js';
+import '../../chunk-ANVMQBBG.js';
+import '../../chunk-XIOIAME2.js';
+import '../../chunk-JLFHTZUA.js';
+import '../../chunk-ZWU6DRRZ.js';
+import '../../chunk-4RIAVSLK.js';
+import { ClearContainerSlots } from '../../chunk-HXI3MEEK.js';
+import '../../chunk-X6SER3TZ.js';
+import { composeClassnameRenderProps } from '../../chunk-65JPI4FL.js';
+import { cssModule } from '../../chunk-KVDXQMWI.js';
+import { SlotProvider } from '../../chunk-M36KANKC.js';
+import '../../chunk-DHVVYSLB.js';
+import '../../chunk-4VVNSXIB.js';
+import '../../chunk-2P3A4VVY.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___Ig9yj", "hop-SearchField--fluid": "SearchField-module__hop-SearchField--fluid___WPNQz", "hop-SearchField__Label": "SearchField-module__hop-SearchField__Label___YQzmR", "hop-SearchField__prefix": "SearchField-module__hop-SearchField__prefix___FG3Rt", "hop-SearchField__InputGroup": "SearchField-module__hop-SearchField__InputGroup___kyA1m", "hop-SearchField--clearable": "SearchField-module__hop-SearchField--clearable___RjeYV", "hop-SearchField__ErrorMessage": "SearchField-module__hop-SearchField__ErrorMessage___D519f", "hop-SearchField__HelperMessage": "SearchField-module__hop-SearchField__HelperMessage___hlceE", "hop-SearchField__ClearButton": "SearchField-module__hop-SearchField__ClearButton___cExII" };
+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,
+      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 as SearchField };

package/dist/inputs/src/SearchFieldContext.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+import { ContextValue } from 'react-aria-components';
+import { SearchFieldProps } from './SearchField.js';
+import '@hopper-ui/styled-system';
+
+declare const SearchFieldContext: react.Context<ContextValue<SearchFieldProps, HTMLDivElement>>;
+
+export { SearchFieldContext };

package/dist/inputs/src/SearchFieldContext.js

@@ -0,0 +1,2 @@
+export { SearchFieldContext } from '../../chunk-3NKF5TPD.js';
+import '../../chunk-2P3A4VVY.js';