@nextsparkjs/core 0.1.0-beta.187 → 0.1.0-beta.189

package/dist/components/entities/ErrorBoundary.js

@@ -101,32 +101,31 @@ class EntityErrorBoundary extends React.Component {
   };
   getErrorMessage = (error, entityType) => {
     const errorType = this.getErrorType(error);
-    const entityName = entityType ? ` de ${entityType}` : "";
     switch (errorType) {
       case "network":
         return {
-          title: "Error de Conexi\xF3n",
-          description: `No se pudo conectar con el servidor para cargar los datos${entityName}. Verifica tu conexi\xF3n a internet.`
+          title: "Connection Error",
+          description: `Could not connect to the server${entityType ? ` to load ${entityType}` : ""}. Check your internet connection.`
         };
       case "permission":
         return {
-          title: "Sin Permisos",
-          description: `No tienes los permisos necesarios para acceder a estos datos${entityName}.`
+          title: "No Permissions",
+          description: `You don't have the necessary permissions to access ${entityType || "this data"}.`
         };
       case "not-found":
         return {
-          title: "Recurso No Encontrado",
-          description: `Los datos${entityName} que solicitas no est\xE1n disponibles o han sido eliminados.`
+          title: "Resource Not Found",
+          description: `What you requested${entityType ? ` from ${entityType}` : ""} is not available or has been deleted.`
         };
       case "configuration":
         return {
-          title: "Error de Configuraci\xF3n",
-          description: `Hay un problema con la configuraci\xF3n${entityName}. Contacta al administrador.`
+          title: "Configuration Error",
+          description: `There is a problem with the configuration${entityType ? ` of ${entityType}` : ""}. Contact the administrator.`
         };
       default:
         return {
-          title: "Error Inesperado",
-          description: `Ha ocurrido un error inesperado${entityName}. Nuestro equipo ha sido notificado.`
+          title: "Unexpected Error",
+          description: `An unexpected error occurred${entityType ? ` while loading ${entityType}` : ""}. Our team has been notified.`
         };
     }
   };
@@ -156,9 +155,9 @@ class EntityErrorBoundary extends React.Component {
                 className: "inline-flex items-center",
                 children: [
                   /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 mr-2" }),
-                  "Reintentar (",
+                  "Retry (",
                   this.maxRetries - this.retryCount,
-                  " intentos restantes)"
+                  " attempts remaining)"
                 ]
               }
             ),
@@ -170,7 +169,7 @@ class EntityErrorBoundary extends React.Component {
                 className: "inline-flex items-center",
                 children: [
                   /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 mr-2" }),
-                  "Restablecer"
+                  "Reset"
                 ]
               }
             ),
@@ -182,7 +181,7 @@ class EntityErrorBoundary extends React.Component {
                 className: "inline-flex items-center",
                 children: [
                   /* @__PURE__ */ jsx(Home, { className: "h-4 w-4 mr-2" }),
-                  "Ir al Dashboard"
+                  "Go to Dashboard"
                 ]
               }
             ),
@@ -194,14 +193,14 @@ class EntityErrorBoundary extends React.Component {
                 className: "inline-flex items-center",
                 children: [
                   /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 mr-2" }),
-                  "Recargar P\xE1gina"
+                  "Reload Page"
                 ]
               }
             )
           ] }),
           (showDetails || process.env.NODE_ENV === "development") && errorInfo && /* @__PURE__ */ jsxs(Alert, { children: [
             /* @__PURE__ */ jsx(Bug, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx(AlertTitle, { children: "Detalles del Error (Desarrollo)" }),
+            /* @__PURE__ */ jsx(AlertTitle, { children: "Error Details (Development)" }),
             /* @__PURE__ */ jsx(AlertDescription, { className: "mt-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-sm font-mono", children: [
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("strong", { children: "Error ID:" }),
@@ -209,17 +208,17 @@ class EntityErrorBoundary extends React.Component {
                 errorId
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("strong", { children: "Tipo:" }),
+                /* @__PURE__ */ jsx("strong", { children: "Type:" }),
                 " ",
                 errorType
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("strong", { children: "Entidad:" }),
+                /* @__PURE__ */ jsx("strong", { children: "Entity:" }),
                 " ",
                 entityType || "N/A"
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("strong", { children: "Mensaje:" }),
+                /* @__PURE__ */ jsx("strong", { children: "Message:" }),
                 " ",
                 error.message
               ] }),
@@ -234,7 +233,7 @@ class EntityErrorBoundary extends React.Component {
             ] }) })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "text-center text-sm text-gray-500", children: [
-            "Si el problema persiste, contacta al soporte t\xE9cnico con el ID: ",
+            "If the problem persists, contact technical support with the ID: ",
             /* @__PURE__ */ jsx("code", { className: "bg-gray-100 px-1 rounded", children: errorId })
           ] })
         ] })

package/dist/components/entities/wrappers/EntityDetailWrapper.js

@@ -79,7 +79,7 @@ function EntityDetailWrapper({
     if (!entityConfig || !id) return;
     if (dataLoadedRef.current) return;
     if (!entityConfig.enabled) {
-      const error = new Error(`Entidad "${entityType}" est\xE1 deshabilitada`);
+      const error = new Error(`Entity "${entityType}" is disabled`);
       setDataError(error.message);
       onError == null ? void 0 : onError(error);
       return;
@@ -124,7 +124,7 @@ function EntityDetailWrapper({
         dataLoadedRef.current = true;
       } catch (err) {
         console.error(`[EntityDetailWrapper] Error loading data for "${entityType}" ${id}:`, err);
-        const errorMessage = `Error cargando datos: ${err instanceof Error ? err.message : "Error desconocido"}`;
+        const errorMessage = `Error loading data: ${err instanceof Error ? err.message : "Unknown error"}`;
         setDataError(errorMessage);
         setData(null);
         if (onError) {
@@ -179,7 +179,7 @@ function EntityDetailWrapper({
       setDataError(null);
     } catch (err) {
       console.error(`[EntityDetailWrapper] Error reloading data:`, err);
-      const errorMessage = `Error recargando datos: ${err instanceof Error ? err.message : "Error desconocido"}`;
+      const errorMessage = `Error reloading data: ${err instanceof Error ? err.message : "Unknown error"}`;
       setDataError(errorMessage);
     } finally {
       setIsLoadingData(false);
@@ -266,7 +266,7 @@ function EntityDetailWrapper({
     return /* @__PURE__ */ jsx(SkeletonEntityDetail, {});
   }
   if (configError || !entityConfig) {
-    return /* @__PURE__ */ jsx(Alert, { children: /* @__PURE__ */ jsx(AlertDescription, { children: configError || `No se pudo cargar la configuraci\xF3n para la entidad "${entityType}".` }) });
+    return /* @__PURE__ */ jsx(Alert, { children: /* @__PURE__ */ jsx(AlertDescription, { children: configError || `Could not load the configuration for entity "${entityType}".` }) });
   }
   if (isLoadingData) {
     return /* @__PURE__ */ jsx(SkeletonEntityDetail, {});
@@ -275,7 +275,7 @@ function EntityDetailWrapper({
     return /* @__PURE__ */ jsx(Alert, { children: /* @__PURE__ */ jsx(AlertDescription, { children: dataError }) });
   }
   if (!data) {
-    return /* @__PURE__ */ jsx(Alert, { children: /* @__PURE__ */ jsx(AlertDescription, { children: "No se encontraron datos para esta entidad." }) });
+    return /* @__PURE__ */ jsx(Alert, { children: /* @__PURE__ */ jsx(AlertDescription, { children: "No data found for this entity." }) });
   }
   return /* @__PURE__ */ jsx(
     EntityDetail,

package/dist/components/entities/wrappers/EntityFormWrapper.js

@@ -34,7 +34,7 @@ function EntityFormWrapper({
     const loadInitialData = async () => {
       if (mode === "edit" && id && entityConfig) {
         if (!entityConfig.enabled) {
-          onError == null ? void 0 : onError(new Error(`Entidad "${entityType}" est\xE1 deshabilitada`));
+          onError == null ? void 0 : onError(new Error(`Entity "${entityType}" is disabled`));
           return;
         }
         try {
@@ -87,7 +87,7 @@ function EntityFormWrapper({
     );
   }
   if (configError || !entityConfig) {
-    return /* @__PURE__ */ jsx(Alert, { children: /* @__PURE__ */ jsx(AlertDescription, { children: configError || `No se pudo cargar la configuraci\xF3n para la entidad "${entityType}".` }) });
+    return /* @__PURE__ */ jsx(Alert, { children: /* @__PURE__ */ jsx(AlertDescription, { children: configError || `Could not load the configuration for entity "${entityType}".` }) });
   }
   const customActions = additionalHeaderActions ? /* @__PURE__ */ jsx(Fragment, { children: additionalHeaderActions }) : void 0;
   return /* @__PURE__ */ jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto space-y-6", children: [

package/dist/components/entities/wrappers/EntityListWrapper.js

@@ -68,7 +68,7 @@ function EntityListWrapper({
   const loadData = useCallback(async (isInitial = false) => {
     if (!entityConfig) return;
     if (!entityConfig.enabled) {
-      setDataError(`Entidad "${entityType}" est\xE1 deshabilitada`);
+      setDataError(`Entity "${entityType}" is disabled`);
       return;
     }
     try {
@@ -90,7 +90,7 @@ function EntityListWrapper({
       setDataError(null);
     } catch (err) {
       console.error(`[EntityListWrapper] Error loading data for "${entityType}":`, err);
-      setDataError(`Error cargando datos: ${err instanceof Error ? err.message : "Error desconocido"}`);
+      setDataError(`Error loading data: ${err instanceof Error ? err.message : "Unknown error"}`);
       setData([]);
     } finally {
       setIsInitialLoad(false);
@@ -191,7 +191,7 @@ function EntityListWrapper({
     return /* @__PURE__ */ jsx(SkeletonEntityList, {});
   }
   if (configError || !entityConfig) {
-    return /* @__PURE__ */ jsx(Alert, { children: /* @__PURE__ */ jsx(AlertDescription, { children: configError || `No se pudo cargar la configuraci\xF3n para la entidad "${entityType}".` }) });
+    return /* @__PURE__ */ jsx(Alert, { children: /* @__PURE__ */ jsx(AlertDescription, { children: configError || `Could not load the configuration for entity "${entityType}".` }) });
   }
   if (dataError) {
     return /* @__PURE__ */ jsx(Alert, { children: /* @__PURE__ */ jsx(AlertDescription, { children: dataError }) });

package/dist/components/permissions/NoPermission.js

@@ -18,21 +18,21 @@ function NoPermission({
   const getActionText = () => {
     switch (action) {
       case "list":
-        return "ver la lista de";
+        return "view the list of";
       case "read":
-        return "ver los detalles de";
+        return "view the details of";
       case "create":
-        return "crear";
+        return "create";
       case "update":
-        return "editar";
+        return "edit";
       case "delete":
-        return "eliminar";
+        return "delete";
       default:
-        return "acceder a";
+        return "access";
     }
   };
-  const defaultTitle = title || "Acceso denegado";
-  const defaultDescription = description || (entityName ? `No tienes permisos para ${getActionText()} ${entityName}. Contacta a tu administrador si necesitas acceso.` : "No tienes permisos para acceder a esta secci\xF3n. Contacta a tu administrador si necesitas acceso.");
+  const defaultTitle = title || "Access denied";
+  const defaultDescription = description || (entityName ? `You don't have permission to ${getActionText()} ${entityName}. Contact your administrator if you need access.` : "You don't have permission to access this section. Contact your administrator if you need access.");
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -53,13 +53,13 @@ function NoPermission({
               className: "w-full",
               children: [
                 /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }),
-                "Volver atr\xE1s"
+                "Go back"
               ]
             }
           ),
           showHomeButton && /* @__PURE__ */ jsx(Button, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxs(Link, { href: redirectPath, children: [
             /* @__PURE__ */ jsx(Home, { className: "mr-2 h-4 w-4" }),
-            "Ir al Dashboard"
+            "Go to Dashboard"
           ] }) })
         ] })
       ] }) })

package/dist/components/public/pageBuilder/PageRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/public/pageBuilder/PageRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAiC1D,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAA;QACV,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,CAAA;QACZ,MAAM,EAAE,aAAa,EAAE,CAAA;QACvB,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;CACF;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,EAAE,iBAAiB,2CA+BvD"}
+{"version":3,"file":"PageRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/public/pageBuilder/PageRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAkC1D,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAA;QACV,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,CAAA;QACZ,MAAM,EAAE,aAAa,EAAE,CAAA;QACvB,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;CACF;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,EAAE,iBAAiB,2CA+BvD"}

package/dist/components/public/pageBuilder/PageRenderer.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { getBlockComponentSSR, normalizeBlockProps } from "../../../lib/blocks/loader.js";
+import { normalizeBlockProps } from "../../../lib/blocks/loader.js";
+import { getBlockComponentSSR } from "../../../lib/blocks/loader.server.js";
 function BlockError({ blockSlug }) {
   return /* @__PURE__ */ jsx("div", { className: "w-full py-12 px-4 bg-destructive/10 border border-destructive/20 rounded", children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto text-center", children: [
     /* @__PURE__ */ jsxs("p", { className: "text-destructive", children: [

package/dist/components/settings/SettingsPageSkeleton.js

@@ -56,8 +56,8 @@ function NotificationsPageSkeleton() {
   return /* @__PURE__ */ jsx(
     SettingsPageSkeleton,
     {
-      title: "Notificaciones",
-      description: "Configura c\xF3mo y cu\xE1ndo quieres recibir notificaciones.",
+      title: "Notifications",
+      description: "Choose how and when you want to be notified.",
       sectionsCount: 3,
       itemsPerSection: 3
     }
@@ -67,8 +67,8 @@ function SecurityPageSkeleton() {
   return /* @__PURE__ */ jsxs("div", { className: "container mx-auto p-6 max-w-4xl", children: [
     /* @__PURE__ */ jsx("div", { className: "mb-8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "Seguridad" }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Mant\xE9n tu cuenta segura con estas configuraciones de seguridad." })
+        /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "Security" }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Keep your account safe with these security settings." })
       ] }),
       /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-32" }),
       " "

package/dist/components/settings/layouts/SettingsSidebar.js

@@ -66,14 +66,14 @@ function SettingsSidebar({ className }) {
     }));
   }, [hasPassword]);
   const handleNavigation = useCallback((itemName, itemDescription) => {
-    setStatusMessage(`Navegando a ${itemName} - ${itemDescription}`);
-  }, []);
+    setStatusMessage(t("a11y.navigatingToAnnouncement", { name: itemName, description: itemDescription }));
+  }, [t]);
   const handleKeyDown = useCallback((e, href, itemName, itemDescription) => {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
-      setStatusMessage(`Navegando a ${itemName} - ${itemDescription}`);
+      setStatusMessage(t("a11y.navigatingToAnnouncement", { name: itemName, description: itemDescription }));
     }
-  }, []);
+  }, [t]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -89,7 +89,7 @@ function SettingsSidebar({ className }) {
       {
         className: cn("space-y-2", className),
         role: "navigation",
-        "aria-label": "Navegaci\xF3n de configuraci\xF3n",
+        "aria-label": t("a11y.settingsNavigation"),
         "data-cy": sel("settings.sidebar.container"),
         children: /* @__PURE__ */ jsxs("div", { className: "px-3 py-2", children: [
           /* @__PURE__ */ jsxs(
@@ -144,7 +144,7 @@ function SettingsSidebar({ className }) {
                           {
                             name: tSettings(`navigation.${item.name}`),
                             description: tSettings(`overview.${item.name}Description`),
-                            current: isActive ? " (p\xE1gina actual)" : ""
+                            current: isActive ? t("a11y.currentPageSuffix") : ""
                           }
                         ),
                         className: cn(

package/dist/components/shared/MultiSelectFilter.d.ts

@@ -13,6 +13,8 @@ export interface MultiSelectFilterProps {
     onChange: (values: string[]) => void;
     /** Additional class names for the trigger button */
     className?: string;
+    /** Label for the button that clears the whole field */
+    clearLabel?: string;
     /** data-cy attribute for E2E testing */
     'data-cy'?: string;
 }
@@ -37,5 +39,5 @@ export interface MultiSelectFilterProps {
  *   data-cy="filter-status"
  * />
  */
-export declare function MultiSelectFilter({ label, options, values, onChange, className, 'data-cy': dataCy, }: MultiSelectFilterProps): import("react/jsx-runtime").JSX.Element;
+export declare function MultiSelectFilter({ label, options, values, onChange, className, clearLabel, 'data-cy': dataCy, }: MultiSelectFilterProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MultiSelectFilter.d.ts.map

package/dist/components/shared/MultiSelectFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectFilter.d.ts","sourceRoot":"","sources":["../../../src/components/shared/MultiSelectFilter.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,sBAAsB;IACrC,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,+BAA+B;IAC/B,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,gCAAgC;IAChC,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,sCAAsC;IACtC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAMD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,EAAE,MAA8B,GAC1C,EAAE,sBAAsB,2CA0HxB"}
+{"version":3,"file":"MultiSelectFilter.d.ts","sourceRoot":"","sources":["../../../src/components/shared/MultiSelectFilter.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,sBAAsB;IACrC,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,+BAA+B;IAC/B,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,gCAAgC;IAChC,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,sCAAsC;IACtC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAMD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAoB,EACpB,SAAS,EAAE,MAA8B,GAC1C,EAAE,sBAAsB,2CA8HxB"}

package/dist/components/shared/MultiSelectFilter.js

@@ -15,6 +15,7 @@ function MultiSelectFilter({
   values,
   onChange,
   className,
+  clearLabel = "Clear",
   "data-cy": dataCy = "multi-select-filter"
 }) {
   const [open, setOpen] = useState(false);
@@ -74,6 +75,7 @@ function MultiSelectFilter({
             return /* @__PURE__ */ jsxs(
               "button",
               {
+                type: "button",
                 onClick: () => handleToggle(option.value),
                 className: cn(
                   "w-full text-left px-3 py-2 text-sm rounded-md",
@@ -108,6 +110,7 @@ function MultiSelectFilter({
             /* @__PURE__ */ jsx(
               "button",
               {
+                type: "button",
                 onClick: (e) => handleRemove(option.value, e),
                 className: "hover:bg-primary/20 rounded-sm p-0.5 transition-colors",
                 "aria-label": `Remove ${option.label}`,
@@ -119,17 +122,18 @@ function MultiSelectFilter({
         },
         option.value
       )),
-      selectedOptions.length > 1 && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
         "button",
         {
+          type: "button",
           onClick: handleClearAll,
           className: cn(
             "text-xs text-muted-foreground hover:text-foreground",
             "px-1.5 py-1 transition-colors"
           ),
-          "aria-label": "Clear all filters",
+          "aria-label": `Clear ${label} filter`,
           "data-cy": `${dataCy}-clear-all`,
-          children: "Clear"
+          children: clearLabel
         }
       )
     ] })

package/dist/components/shared/SearchInput.d.ts

@@ -4,6 +4,8 @@ export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElem
     icon?: ReactNode;
     /** Container class name */
     containerClassName?: string;
+    /** Accessible name for the clear button */
+    clearLabel?: string;
     /** data-cy attribute for E2E testing */
     'data-cy'?: string;
 }

package/dist/components/shared/SearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/shared/SearchInput.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAO3D,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3D,oDAAoD;IACpD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAMD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,+GA0BvB,CAAA"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/shared/SearchInput.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAO3D,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3D,oDAAoD;IACpD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,2BAA2B;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAMD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,+GAyGvB,CAAA"}

package/dist/components/shared/SearchInput.js

@@ -2,10 +2,48 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../lib/utils/index.js";
 import { Input } from "../ui/input.js";
-import { Search } from "lucide-react";
-import { forwardRef } from "react";
+import { Search, X } from "lucide-react";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 const SearchInput = forwardRef(
-  ({ className, containerClassName, icon, "data-cy": dataCy = "search-input", ...props }, ref) => {
+  ({
+    className,
+    containerClassName,
+    icon,
+    clearLabel = "Clear search",
+    "data-cy": dataCy = "search-input",
+    ...props
+  }, ref) => {
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current);
+    const isControlled = props.value !== void 0;
+    const [typedValue, setTypedValue] = useState(() => String(props.defaultValue ?? ""));
+    const currentValue = isControlled ? props.value : typedValue;
+    const hasValue = currentValue !== null && currentValue !== void 0 && String(currentValue) !== "";
+    const showClear = hasValue && !props.disabled && !props.readOnly;
+    const handleChange = (event) => {
+      var _a;
+      if (!isControlled) setTypedValue(event.target.value);
+      (_a = props.onChange) == null ? void 0 : _a.call(props, event);
+    };
+    useEffect(() => {
+      var _a;
+      if (isControlled) return;
+      const inDom = ((_a = innerRef.current) == null ? void 0 : _a.value) ?? "";
+      setTypedValue((current) => current === inDom ? current : inDom);
+    });
+    const handleClear = () => {
+      var _a;
+      const input = innerRef.current;
+      if (!input) return;
+      const setValue = (_a = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value"
+      )) == null ? void 0 : _a.set;
+      setValue == null ? void 0 : setValue.call(input, "");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      if (!isControlled) setTypedValue("");
+      input.focus();
+    };
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -23,11 +61,31 @@ const SearchInput = forwardRef(
           /* @__PURE__ */ jsx(
             Input,
             {
-              ref,
+              ref: innerRef,
               type: "search",
-              className: cn("pl-10 h-10 rounded-lg", className),
+              className: cn(
+                "pl-10 h-10 rounded-lg",
+                // The browser draws its own clear affordance on type="search", which
+                // carries no test hook and would sit on top of the button below.
+                "[&::-webkit-search-cancel-button]:appearance-none",
+                showClear && "pr-10",
+                className
+              ),
               "data-cy": `${dataCy}-input`,
-              ...props
+              ...props,
+              onChange: handleChange
+            }
+          ),
+          showClear && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              "aria-label": clearLabel,
+              title: clearLabel,
+              className: "absolute right-2 top-1/2 -translate-y-1/2 rounded-sm p-1 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "data-cy": `${dataCy}-clear`,
+              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
             }
           )
         ]