@dust-tt/sparkle 0.2.248 → 0.2.249

package/dist/esm/components/Input.d.ts

@@ -11,7 +11,8 @@ type InputProps = {
     disabled?: boolean;
     className?: string;
     label?: string;
+    maxLength?: number;
 };
-export declare function Input({ placeholder, value, size, onChange, error, showErrorLabel, name, isPassword, disabled, className, label, }: InputProps): React.JSX.Element;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export {};
 //# sourceMappingURL=Input.d.ts.map

package/dist/esm/components/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,UAAU,GAAG;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF,wBAAgB,KAAK,CAAC,EACpB,WAAW,EACX,KAAK,EACL,IAAW,EACX,QAAQ,EACR,KAAK,EACL,cAAsB,EACtB,IAAI,EACJ,UAAkB,EAClB,QAAgB,EAChB,SAAc,EACd,KAAK,GACN,EAAE,UAAU,qBAgDZ"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAS1C,KAAK,UAAU,GAAG;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,KAAK,qFAoEjB,CAAC"}

package/dist/esm/components/Input.js

@@ -1,14 +1,14 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { classNames } from "../lib/utils";
 var sizeInputClasses = {
     sm: "s-text-base s-rounded-md s-py-1.5 s-pl-4 s-pr-8",
     md: "s-text-lg s-rounded-lg s-py-2 s-pl-4 s-pr-10",
 };
-export function Input(_a) {
-    var placeholder = _a.placeholder, value = _a.value, _b = _a.size, size = _b === void 0 ? "sm" : _b, onChange = _a.onChange, error = _a.error, _c = _a.showErrorLabel, showErrorLabel = _c === void 0 ? false : _c, name = _a.name, _d = _a.isPassword, isPassword = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.className, className = _f === void 0 ? "" : _f, label = _a.label;
+export var Input = forwardRef(function (_a, ref) {
+    var placeholder = _a.placeholder, value = _a.value, _b = _a.size, size = _b === void 0 ? "sm" : _b, onChange = _a.onChange, error = _a.error, _c = _a.showErrorLabel, showErrorLabel = _c === void 0 ? false : _c, name = _a.name, _d = _a.isPassword, isPassword = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.className, className = _f === void 0 ? "" : _f, label = _a.label, maxLength = _a.maxLength;
     return (React.createElement("div", { className: "s-flex s-flex-col s-gap-1 s-p-px" },
         label && (React.createElement("label", { htmlFor: name, className: "s-pb-1 s-text-sm s-font-medium s-text-element-700 dark:s-text-element-700-dark" }, label)),
-        React.createElement("input", { type: isPassword ? "password" : "text", name: name, id: name, className: classNames("s-w-full s-border-0 s-outline-none s-ring-1 focus:s-outline-none focus:s-ring-2", "s-bg-structure-50 s-placeholder-element-700", "dark:s-bg-structure-50-dark dark:s-placeholder-element-700-dark", sizeInputClasses[size], "s-transition-all s-duration-300 s-ease-out", className !== null && className !== void 0 ? className : "", !error
+        React.createElement("input", { ref: ref, type: isPassword ? "password" : "text", name: name, id: name, maxLength: maxLength, className: classNames("s-w-full s-border-0 s-outline-none s-ring-1 focus:s-outline-none focus:s-ring-2", "s-bg-structure-50 s-placeholder-element-700", "dark:s-bg-structure-50-dark dark:s-placeholder-element-700-dark", sizeInputClasses[size], "s-transition-all s-duration-300 s-ease-out", className !== null && className !== void 0 ? className : "", !error
                 ? classNames("s-ring-structure-200 focus:s-ring-action-300", "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark")
                 : classNames("s-ring-warning-200 focus:s-ring-warning-300", "dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark"), disabled
                 ? "s-text-element-500 hover:s-cursor-not-allowed"
@@ -16,5 +16,6 @@ export function Input(_a) {
                 onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
             }, "data-1p-ignore": !isPassword, disabled: disabled }),
         React.createElement("div", { className: "s-ml-2 s-text-sm s-text-warning-500" }, showErrorLabel && error ? error : null)));
-}
+});
+Input.displayName = "Input";
 //# sourceMappingURL=Input.js.map

package/dist/esm/components/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAgBhD,IAAM,gBAAgB,GAAG;IACvB,EAAE,EAAE,iDAAiD;IACrD,EAAE,EAAE,8CAA8C;CACnD,CAAC;AAEF,MAAM,UAAU,KAAK,CAAC,EAYT;QAXX,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,YAAW,EAAX,IAAI,mBAAG,IAAI,KAAA,EACX,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,IAAI,UAAA,EACJ,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,KAAK,WAAA;IAEL,OAAO,CACL,6BAAK,SAAS,EAAC,kCAAkC;QAC9C,KAAK,IAAI,CACR,+BACE,OAAO,EAAE,IAAI,EACb,SAAS,EAAC,gFAAgF,IAEzF,KAAK,CACA,CACT;QACD,+BACE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,EACtC,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,IAAI,EACR,SAAS,EAAE,UAAU,CACnB,iFAAiF,EACjF,6CAA6C,EAC7C,iEAAiE,EACjE,gBAAgB,CAAC,IAAI,CAAC,EACtB,4CAA4C,EAC5C,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,EACf,CAAC,KAAK;gBACJ,CAAC,CAAC,UAAU,CACR,8CAA8C,EAC9C,kEAAkE,CACnE;gBACH,CAAC,CAAC,UAAU,CACR,6CAA6C,EAC7C,iEAAiE,CAClE,EACL,QAAQ;gBACN,CAAC,CAAC,+CAA+C;gBACjD,CAAC,CAAC,iDAAiD,CACtD,EACD,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,EAClB,QAAQ,EAAE,UAAC,CAAC;gBACV,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC,oBACe,CAAC,UAAU,EAC3B,QAAQ,EAAE,QAAQ,GAClB;QACF,6BAAK,SAAS,EAAC,qCAAqC,IACjD,cAAc,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CACnC,CACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,IAAM,gBAAgB,GAAG;IACvB,EAAE,EAAE,iDAAiD;IACrD,EAAE,EAAE,8CAA8C;CACnD,CAAC;AAiBF,MAAM,CAAC,IAAM,KAAK,GAAG,UAAU,CAC7B,UACE,EAaC,EACD,GAAG;QAbD,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,YAAW,EAAX,IAAI,mBAAG,IAAI,KAAA,EACX,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,IAAI,UAAA,EACJ,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,KAAK,WAAA,EACL,SAAS,eAAA;IAIX,OAAO,CACL,6BAAK,SAAS,EAAC,kCAAkC;QAC9C,KAAK,IAAI,CACR,+BACE,OAAO,EAAE,IAAI,EACb,SAAS,EAAC,gFAAgF,IAEzF,KAAK,CACA,CACT;QACD,+BACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,EACtC,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,IAAI,EACR,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,UAAU,CACnB,iFAAiF,EACjF,6CAA6C,EAC7C,iEAAiE,EACjE,gBAAgB,CAAC,IAAI,CAAC,EACtB,4CAA4C,EAC5C,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,EACf,CAAC,KAAK;gBACJ,CAAC,CAAC,UAAU,CACR,8CAA8C,EAC9C,kEAAkE,CACnE;gBACH,CAAC,CAAC,UAAU,CACR,6CAA6C,EAC7C,iEAAiE,CAClE,EACL,QAAQ;gBACN,CAAC,CAAC,+CAA+C;gBACjD,CAAC,CAAC,iDAAiD,CACtD,EACD,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,EAClB,QAAQ,EAAE,UAAC,CAAC;gBACV,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC,oBACe,CAAC,UAAU,EAC3B,QAAQ,EAAE,QAAQ,GAClB;QACF,6BAAK,SAAS,EAAC,qCAAqC,IACjD,cAAc,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CACnC,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA"}

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

@@ -1,12 +1,14 @@
 import React from "react";
-export declare const Searchbar: React.ForwardRefExoticComponent<{
+type SearchbarProps = {
     placeholder: string;
     value: string | null;
-    onChange?: ((value: string) => void) | undefined;
-    onKeyDown?: ((e: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
+    onChange?: (value: string) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     name: string;
-    size?: "xs" | "sm" | "md" | undefined;
-    disabled?: boolean | undefined;
-    className?: string | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
+    size?: "xs" | "sm" | "md";
+    disabled?: boolean;
+    className?: string;
+};
+export declare const Searchbar: React.ForwardRefExoticComponent<SearchbarProps & React.RefAttributes<HTMLInputElement>>;
+export {};
 //# sourceMappingURL=Searchbar.d.ts.map

package/dist/esm/components/Searchbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Searchbar.d.ts","sourceRoot":"","sources":["../../../src/components/Searchbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAmB1C,eAAO,MAAM,SAAS;iBAGL,MAAM;WACZ,MAAM,GAAG,IAAI;wBACD,MAAM,KAAK,IAAI;qBAClB,mBAAmB,CAAC,gBAAgB,CAAC,KAAK,IAAI;UACxD,MAAM;;;;0CA4Ef,CAAC"}
+{"version":3,"file":"Searchbar.d.ts","sourceRoot":"","sources":["../../../src/components/Searchbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAmB1C,KAAK,cAAc,GAAG;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAA;AAED,eAAO,MAAM,SAAS,yFAyErB,CAAC"}

package/dist/esm/components/Searchbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Searchbar.js","sourceRoot":"","sources":["../../../src/components/Searchbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,IAAM,WAAW,GAAG;IAClB,EAAE,EAAE,6CAA6C;IACjD,EAAE,EAAE,6CAA6C;IACjD,EAAE,EAAE,gDAAgD;CACrD,CAAC;AACF,IAAM,WAAW,GAAG;IAClB,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;CACb,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAG,UAAU,CAajC,UACE,EASC,EACD,GAAG;QATD,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,YAAW,EAAX,IAAI,mBAAG,IAAI,KAAA,EACX,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA;IAIhB,IAAM,eAAe,GAAG;QACtB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,+BAA+B;QAC5C,+BACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,6FAA6F,EAC7F,mFAAmF,EACnF,8CAA8C,EAC9C,kEAAkE,EAClE,4CAA4C,EAC5C,WAAW,CAAC,IAAI,CAAC,EACjB,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,EACf,QAAQ;gBACN,CAAC,CAAC,qCAAqC;gBACvC,CAAC,CAAC,oBAAoB,CACzB,EACD,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,EAClB,QAAQ,EAAE,UAAC,CAAC;gBACV,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,GAClB;QACF,6BACE,SAAS,EAAE,UAAU,CACnB,+DAA+D,EAC/D,WAAW,CAAC,IAAI,CAAC,CAClB,IAEA,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CACnB,oBAAC,UAAU,IACT,IAAI,EAAE,SAAS,EACf,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,eAAe,GACxB,CACH,CAAC,CAAC,CAAC,CACF,6BACE,SAAS,EAAE,UAAU,CACnB,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,CACvD;YAED,oBAAC,IAAI,IAAC,MAAM,EAAE,yBAAyB,EAAE,IAAI,EAAE,IAAI,GAAI,CACnD,CACP,CACG,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}
+{"version":3,"file":"Searchbar.js","sourceRoot":"","sources":["../../../src/components/Searchbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,IAAM,WAAW,GAAG;IAClB,EAAE,EAAE,6CAA6C;IACjD,EAAE,EAAE,6CAA6C;IACjD,EAAE,EAAE,gDAAgD;CACrD,CAAC;AACF,IAAM,WAAW,GAAG;IAClB,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;CACb,CAAC;AAaF,MAAM,CAAC,IAAM,SAAS,GAAG,UAAU,CAGjC,UACE,EASC,EACD,GAAG;QATD,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,YAAW,EAAX,IAAI,mBAAG,IAAI,KAAA,EACX,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA;IAIhB,IAAM,eAAe,GAAG;QACtB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,+BAA+B;QAC5C,+BACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,6FAA6F,EAC7F,mFAAmF,EACnF,8CAA8C,EAC9C,kEAAkE,EAClE,4CAA4C,EAC5C,WAAW,CAAC,IAAI,CAAC,EACjB,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,EACf,QAAQ;gBACN,CAAC,CAAC,qCAAqC;gBACvC,CAAC,CAAC,oBAAoB,CACzB,EACD,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,EAClB,QAAQ,EAAE,UAAC,CAAC;gBACV,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,GAClB;QACF,6BACE,SAAS,EAAE,UAAU,CACnB,+DAA+D,EAC/D,WAAW,CAAC,IAAI,CAAC,CAClB,IAEA,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CACnB,oBAAC,UAAU,IACT,IAAI,EAAE,SAAS,EACf,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,eAAe,GACxB,CACH,CAAC,CAAC,CAAC,CACF,6BACE,SAAS,EAAE,UAAU,CACnB,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,CACvD;YAED,oBAAC,IAAI,IAAC,MAAM,EAAE,yBAAyB,EAAE,IAAI,EAAE,IAAI,GAAI,CACnD,CACP,CACG,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/esm/stories/Input.stories.d.ts

@@ -1,8 +1,20 @@
 import React from "react";
-import { Input } from "../index_with_tw_base";
 declare const meta: {
     title: string;
-    component: typeof Input;
+    component: React.ForwardRefExoticComponent<{
+        placeholder: string;
+        size?: "sm" | "md" | undefined;
+        value: string | null;
+        onChange?: ((value: string) => void) | undefined;
+        error?: string | null | undefined;
+        showErrorLabel?: boolean | undefined;
+        name: string;
+        isPassword?: boolean | undefined;
+        disabled?: boolean | undefined;
+        className?: string | undefined;
+        label?: string | undefined;
+        maxLength?: number | undefined;
+    } & React.RefAttributes<HTMLInputElement>>;
 };
 export default meta;
 export declare const InputExample: () => React.JSX.Element;

package/dist/esm/stories/Input.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Input.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAE9C,QAAA,MAAM,IAAI;;;CAGoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,YAAY,yBAmFxB,CAAC"}
+{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Input.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;CAGoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,YAAY,yBAmFxB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.248",
+  "version": "0.2.249",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/Input.tsx

@@ -1,7 +1,12 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import { classNames } from "@sparkle/lib/utils";
 
+const sizeInputClasses = {
+  sm: "s-text-base s-rounded-md s-py-1.5 s-pl-4 s-pr-8",
+  md: "s-text-lg s-rounded-lg s-py-2 s-pl-4 s-pr-10",
+};
+
 type InputProps = {
   placeholder: string;
   size?: "sm" | "md";
@@ -14,71 +19,77 @@ type InputProps = {
   disabled?: boolean;
   className?: string;
   label?: string;
+  maxLength?: number;
 };
 
-const sizeInputClasses = {
-  sm: "s-text-base s-rounded-md s-py-1.5 s-pl-4 s-pr-8",
-  md: "s-text-lg s-rounded-lg s-py-2 s-pl-4 s-pr-10",
-};
-
-export function Input({
-  placeholder,
-  value,
-  size = "sm",
-  onChange,
-  error,
-  showErrorLabel = false,
-  name,
-  isPassword = false,
-  disabled = false,
-  className = "",
-  label,
-}: InputProps) {
-  return (
-    <div className="s-flex s-flex-col s-gap-1 s-p-px">
-      {label && (
-        <label
-          htmlFor={name}
-          className="s-pb-1 s-text-sm s-font-medium s-text-element-700 dark:s-text-element-700-dark"
-        >
-          {label}
-        </label>
-      )}
-      <input
-        type={isPassword ? "password" : "text"}
-        name={name}
-        id={name}
-        className={classNames(
-          "s-w-full s-border-0 s-outline-none s-ring-1 focus:s-outline-none focus:s-ring-2",
-          "s-bg-structure-50 s-placeholder-element-700",
-          "dark:s-bg-structure-50-dark dark:s-placeholder-element-700-dark",
-          sizeInputClasses[size],
-          "s-transition-all s-duration-300 s-ease-out",
-          className ?? "",
-          !error
-            ? classNames(
-                "s-ring-structure-200 focus:s-ring-action-300",
-                "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark"
-              )
-            : classNames(
-                "s-ring-warning-200 focus:s-ring-warning-300",
-                "dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark"
-              ),
-          disabled
-            ? "s-text-element-500 hover:s-cursor-not-allowed"
-            : "s-text-element-900 dark:s-text-element-800-dark"
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      placeholder,
+      value,
+      size = "sm",
+      onChange,
+      error,
+      showErrorLabel = false,
+      name,
+      isPassword = false,
+      disabled = false,
+      className = "",
+      label,
+      maxLength,
+    },
+    ref
+  ) => {
+    return (
+      <div className="s-flex s-flex-col s-gap-1 s-p-px">
+        {label && (
+          <label
+            htmlFor={name}
+            className="s-pb-1 s-text-sm s-font-medium s-text-element-700 dark:s-text-element-700-dark"
+          >
+            {label}
+          </label>
         )}
-        placeholder={placeholder}
-        value={value ?? ""}
-        onChange={(e) => {
-          onChange?.(e.target.value);
-        }}
-        data-1p-ignore={!isPassword}
-        disabled={disabled}
-      />
-      <div className="s-ml-2 s-text-sm s-text-warning-500">
-        {showErrorLabel && error ? error : null}
+        <input
+          ref={ref}
+          type={isPassword ? "password" : "text"}
+          name={name}
+          id={name}
+          maxLength={maxLength}
+          className={classNames(
+            "s-w-full s-border-0 s-outline-none s-ring-1 focus:s-outline-none focus:s-ring-2",
+            "s-bg-structure-50 s-placeholder-element-700",
+            "dark:s-bg-structure-50-dark dark:s-placeholder-element-700-dark",
+            sizeInputClasses[size],
+            "s-transition-all s-duration-300 s-ease-out",
+            className ?? "",
+            !error
+              ? classNames(
+                  "s-ring-structure-200 focus:s-ring-action-300",
+                  "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark"
+                )
+              : classNames(
+                  "s-ring-warning-200 focus:s-ring-warning-300",
+                  "dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark"
+                ),
+            disabled
+              ? "s-text-element-500 hover:s-cursor-not-allowed"
+              : "s-text-element-900 dark:s-text-element-800-dark"
+          )}
+          placeholder={placeholder}
+          value={value ?? ""}
+          onChange={(e) => {
+            onChange?.(e.target.value);
+          }}
+          data-1p-ignore={!isPassword}
+          disabled={disabled}
+        />
+        <div className="s-ml-2 s-text-sm s-text-warning-500">
+          {showErrorLabel && error ? error : null}
+        </div>
       </div>
-    </div>
-  );
-}
+    );
+  }
+);
+
+Input.displayName = "Input"

package/src/components/Searchbar.tsx

@@ -17,18 +17,19 @@ const iconClasses = {
   md: "s-pr-4",
 };
 
+type SearchbarProps = {
+  placeholder: string;
+  value: string | null;
+  onChange?: (value: string) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  name: string;
+  size?: "xs" | "sm" | "md";
+  disabled?: boolean;
+  className?: string;
+}
+
 export const Searchbar = forwardRef<
-  HTMLInputElement,
-  {
-    placeholder: string;
-    value: string | null;
-    onChange?: (value: string) => void;
-    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    name: string;
-    size?: "xs" | "sm" | "md";
-    disabled?: boolean;
-    className?: string;
-  }
+  HTMLInputElement, SearchbarProps
 >(
   (
     {