@basic-ui/material 1.0.0-alpha.49 → 1.0.0-alpha.50

package/build/cjs/index.js

@@ -4272,6 +4272,75 @@ const RadioGroup = /*#__PURE__*/react$1.forwardRef(function RadioGroup(props, fo
   });
 });
 
+const SearchBar = /*#__PURE__*/react$1.forwardRef(function SearchBar(props, forwardedRef) {
+  const {
+    type = 'text',
+    id: idProp,
+    color = 'primary',
+    value: valueProp,
+    defaultValue = '',
+    error,
+    onChange: onChangeProp,
+    leadingIcon = null,
+    trailingIcon = null,
+    containerProps,
+    variant,
+    __css,
+    ...otherProps
+  } = props;
+  const {
+    __css: __containerCss,
+    ...otherContainerProps
+  } = containerProps || {};
+  const [value, onChange] = core.useControlledState(valueProp, onChangeProp, defaultValue, setState => e => {
+    setState(e.target.value);
+  });
+  const fallbackId = react$1.useId();
+  const hasError = Boolean(error);
+  const id = idProp || fallbackId;
+  const inputId = `${id}-search-bar`;
+  return /*#__PURE__*/jsxRuntime.jsxs(Box, {
+    __css: {
+      display: 'inline-flex',
+      position: 'relative',
+      ...__containerCss
+    },
+    ...otherContainerProps,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
+      __css: {
+        borderRadius: 'full',
+        backgroundColor: 'surface-container-high',
+        height: "3.5rem",
+        pl: leadingIcon ? "3rem" : "1.5rem",
+        pr: trailingIcon ? "3rem" : "1.5rem",
+        py: 0,
+        transition: `outline-color .2s ${EASING_STANDARD}`,
+        outlineStyle: 'solid',
+        outlineWidth: "0.125rem",
+        outlineColor: 'transparent',
+        outlineOffset: polished.rem(-1),
+        '&:focus': {
+          outlineColor: hasError ? 'error' : color
+        },
+        ...__css
+      },
+      type: type,
+      ref: forwardedRef,
+      hasLabel: false,
+      id: inputId,
+      value: value,
+      onChange: onChange,
+      ...otherProps
+    }), leadingIcon && /*#__PURE__*/jsxRuntime.jsx(IconContainer, {
+      position: "start",
+      children: leadingIcon
+    }), trailingIcon && /*#__PURE__*/jsxRuntime.jsx(IconContainer, {
+      position: "end",
+      children: trailingIcon
+    })]
+  });
+});
+
 const Select$1 = /*#__PURE__*/react$1.forwardRef(({
   as: asProp = 'select',
   ...props
@@ -6091,6 +6160,7 @@ exports.RadioButton = RadioButton;
 exports.RadioGroup = RadioGroup;
 exports.Ripple = Ripple;
 exports.RippleBox = RippleBox;
+exports.SearchBar = SearchBar;
 exports.Select = Select;
 exports.SelectItem = SelectItem;
 exports.Skeleton = Skeleton;