@dust-tt/sparkle 0.2.156 → 0.2.157

package/dist/cjs/components/Searchbar.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
-export declare function Searchbar({ placeholder, value, onChange, onKeyDown, name, size, disabled, className, }: {
+export declare const Searchbar: React.ForwardRefExoticComponent<{
     placeholder: string;
     value: string | null;
-    onChange?: (value: string) => void;
-    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onChange?: ((value: string) => void) | undefined;
+    onKeyDown?: ((e: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
     name: string;
-    size?: "xs" | "sm" | "md";
-    disabled?: boolean;
-    className?: string;
-}): React.JSX.Element;
+    size?: "xs" | "sm" | "md" | undefined;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/cjs/index.js

@@ -97638,20 +97638,21 @@ var iconClasses = {
     sm: "s-pr-3",
     md: "s-pr-4",
 };
-function Searchbar(_a) {
+var Searchbar = React.forwardRef(function (_a, ref) {
     var placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, onKeyDown = _a.onKeyDown, name = _a.name, _b = _a.size, size = _b === void 0 ? "sm" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.className, className = _d === void 0 ? "" : _d;
     var clearInputField = function () {
         onChange === null || onChange === void 0 ? void 0 : onChange("");
     };
     return (React.createElement("div", { className: "s-relative s-m-px s-flex-grow" },
-        React.createElement("input", { type: "text", name: name, id: name, className: classNames("s-border-0 s-outline-none s-ring-1 s-ring-structure-200 focus:s-outline-none focus:s-ring-2", "s-w-full s-rounded-full s-bg-structure-50 s-font-normal s-placeholder-element-600", "s-ring-structure-200 focus:s-ring-action-300", "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark", "s-transition-all s-duration-300 s-ease-out", sizeClasses[size], className !== null && className !== void 0 ? className : "", disabled
+        React.createElement("input", { type: "text", name: name, id: name, ref: ref, className: classNames("s-border-0 s-outline-none s-ring-1 s-ring-structure-200 focus:s-outline-none focus:s-ring-2", "s-w-full s-rounded-full s-bg-structure-50 s-font-normal s-placeholder-element-600", "s-ring-structure-200 focus:s-ring-action-300", "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark", "s-transition-all s-duration-300 s-ease-out", sizeClasses[size], className !== null && className !== void 0 ? className : "", disabled
                 ? "s-cursor-default s-text-element-600"
                 : "s-text-element-900"), placeholder: placeholder, value: value !== null && value !== void 0 ? value : "", onChange: function (e) {
                 onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
             }, onKeyDown: onKeyDown, disabled: disabled }),
         React.createElement("div", { className: classNames("s-absolute s-inset-y-0 s-right-0 s-flex s-items-center s-pr-3", iconClasses[size]) }, value && onChange ? (React.createElement(IconButton, { icon: SvgXMark$1, variant: "secondary", size: size, onClick: clearInputField })) : (React.createElement("div", { className: classNames(disabled ? "s-text-element-600" : "s-text-element-900") },
             React.createElement(Icon, { visual: SvgMagnifyingGlass, size: size }))))));
-}
+});
+Searchbar.displayName = "Searchbar";
 
 var labelClasses = {
     base: "s-text-sm s-text-element-800 dark:s-text-element-800-dark",