@thorprovider/blocks 2.0.0 → 3.0.0

package/dist/blocks/e-commerce/category-filters/category-listing.js

@@ -0,0 +1,562 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var category_listing_exports = {};
+__export(category_listing_exports, {
+  CategoryListing: () => CategoryListing,
+  CategoryListingStatusView: () => CategoryListingStatusView,
+  buildFilterChange: () => buildFilterChange,
+  default: () => category_listing_default,
+  reconcileSearchDraft: () => reconcileSearchDraft,
+  toggleFilterValue: () => toggleFilterValue
+});
+module.exports = __toCommonJS(category_listing_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_badge = require("../../../ui/badge.js");
+var import_button = require("../../../ui/button.js");
+var import_drawer = require("../../../ui/drawer.js");
+var import_empty = require("../../../ui/empty.js");
+var import_input = require("../../../ui/input.js");
+var import_label = require("../../../ui/label.js");
+var import_pagination = require("../../../ui/pagination.js");
+var import_radio_group = require("../../../ui/radio-group.js");
+var import_select = require("../../../ui/select.js");
+var import_sheet = require("../../../ui/sheet.js");
+var import_skeleton = require("../../../ui/skeleton.js");
+var import_utils = require("../../../lib/utils.js");
+var import_product_card = require("../product-list/product-card.js");
+var import_category_listing_filter_fields = require("./category-listing-filter-fields.js");
+const DEFAULT_VIEW_OPTIONS = [10, 25, 50, 100];
+function toggleFilterValue(current, value, checked) {
+  return checked ? [...current, value] : current.filter((candidate) => candidate !== value);
+}
+function buildFilterChange(input) {
+  const change = {
+    categories: input.categories,
+    collections: input.collections
+  };
+  if (input.priceRange) change.priceRange = input.priceRange;
+  if (input.facets) change.facets = input.facets;
+  return change;
+}
+function reconcileSearchDraft(input) {
+  const { searchValue, prevSearchValue, draft } = input;
+  if (searchValue === void 0 || searchValue === prevSearchValue) return null;
+  const clean = prevSearchValue === void 0 || draft === prevSearchValue;
+  return { draft: clean ? searchValue : draft, prevSearchValue: searchValue };
+}
+function describeQueryError(error, state) {
+  const fields = error.fields.join(", ");
+  if (state === "unmounted-capability" && error.feature) {
+    return `${fields} pertenece a la funci\xF3n \xAB${error.feature}\xBB, que no est\xE1 instalada.`;
+  }
+  return error.message ?? `Par\xE1metros: ${fields}`;
+}
+function CategoryListingStatusView({
+  status,
+  activeFilters = [],
+  activeFiltersTitle = "Filtros activos",
+  removeFilterLabel = "Quitar filtro",
+  loadingLabel = "Cargando productos",
+  emptyTitle = "Sin resultados",
+  emptyDescription = "Ning\xFAn producto coincide con los filtros activos.",
+  clearFiltersLabel = "Limpiar filtros",
+  invalidQueryTitle = "Consulta no v\xE1lida",
+  unsupportedQueryTitle = "Filtro no disponible",
+  unmountedCapabilityTitle = "Funci\xF3n no disponible",
+  errorTitle = "No se pudieron cargar los productos",
+  errorDescription = "Int\xE9ntalo de nuevo.",
+  repairLabel = "Corregir b\xFAsqueda",
+  retryLabel = "Reintentar",
+  onClearFilters,
+  onRepair,
+  onRetry,
+  onRemoveFilter
+}) {
+  const chips = activeFilters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "group", "aria-label": activeFiltersTitle, className: "flex flex-wrap items-center gap-2", children: activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_badge.Badge, { variant: "secondary", className: "gap-1 pr-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: filter.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_button.Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-xs",
+        className: "size-4 cursor-pointer rounded-full",
+        "aria-label": `${removeFilterLabel}: ${filter.label}`,
+        "data-action": "remove-filter",
+        "data-filter-id": filter.id,
+        onClick: () => onRemoveFilter?.(filter),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { "aria-hidden": "true" })
+      }
+    )
+  ] }, filter.id)) }) : null;
+  if (status.state === "ready") return chips;
+  let body;
+  switch (status.state) {
+    case "loading":
+      body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { role: "status", "aria-live": "polite", "aria-busy": "true", className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: loadingLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3", children: Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "aspect-3/4 w-full rounded-lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "h-4 w-3/4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skeleton.Skeleton, { className: "h-4 w-1/3" })
+        ] }, index)) })
+      ] });
+      break;
+    case "empty":
+      body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_empty.Empty, { role: "status", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_empty.EmptyHeader, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_empty.EmptyTitle, { children: emptyTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_empty.EmptyDescription, { children: emptyDescription })
+        ] }),
+        onClearFilters ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_empty.EmptyContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "button", variant: "outline", "data-action": "clear-filters", onClick: () => onClearFilters(), children: clearFiltersLabel }) }) : null
+      ] });
+      break;
+    case "invalid-query":
+    case "unsupported-query":
+    case "unmounted-capability":
+      body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_empty.Empty, { role: "alert", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_empty.EmptyHeader, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_empty.EmptyTitle, { children: status.state === "invalid-query" ? invalidQueryTitle : status.state === "unsupported-query" ? unsupportedQueryTitle : unmountedCapabilityTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_empty.EmptyDescription, { children: describeQueryError(status.error, status.state) })
+        ] }),
+        onRepair ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_empty.EmptyContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.Button,
+          {
+            type: "button",
+            variant: "outline",
+            "data-action": "repair",
+            onClick: () => onRepair(status.error.fields),
+            children: repairLabel
+          }
+        ) }) : null
+      ] });
+      break;
+    case "error":
+      body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_empty.Empty, { role: "alert", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_empty.EmptyHeader, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_empty.EmptyTitle, { children: errorTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_empty.EmptyDescription, { children: status.message ?? errorDescription })
+        ] }),
+        onRetry ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_empty.EmptyContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "button", variant: "default", "data-action": "retry", onClick: () => onRetry(), children: retryLabel }) }) : null
+      ] });
+      break;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4", children: [
+    chips,
+    body
+  ] });
+}
+function CategoryListing({
+  presentation = "sidebar",
+  products,
+  pagination,
+  searchValue,
+  selectedCategories,
+  selectedCollections,
+  selectedSort,
+  selectedPage,
+  selectedPageSize,
+  selectedPriceRange,
+  selectedFacets = {},
+  categories = [],
+  collections = [],
+  sortOptions = [],
+  priceRange: priceRangeConfig,
+  facets = [],
+  viewOptions = DEFAULT_VIEW_OPTIONS,
+  showSearch,
+  showFilters,
+  showSort,
+  showPrice = true,
+  status,
+  activeFilters,
+  filtersTitle = "Filtros",
+  applyFiltersLabel = "Aplicar filtros",
+  selectedText = "Filtros",
+  clearAllLabel = "Restablecer",
+  priceRangeTitle = "Rango de precio",
+  minLabel = "M\xEDnimo",
+  maxLabel = "M\xE1ximo",
+  categoriesTitle = "Categor\xEDa",
+  collectionsTitle = "Colecci\xF3n",
+  sortTitle = "Ordenar por",
+  viewLabel = "Ver",
+  viewPlaceholder = "Seleccionar",
+  sortPlaceholder = "Ordenar por",
+  productsTitle = "Productos",
+  currentLabel = "(actual)",
+  searchLabel = "Buscar",
+  searchPlaceholder = "Buscar",
+  loadingLabel,
+  emptyTitle,
+  emptyDescription,
+  clearFiltersLabel,
+  invalidQueryTitle,
+  unsupportedQueryTitle,
+  unmountedCapabilityTitle,
+  errorTitle,
+  errorDescription,
+  repairLabel,
+  retryLabel,
+  activeFiltersTitle,
+  removeFilterLabel,
+  onProductClick,
+  onPageChange,
+  onPageSizeChange,
+  onSortChange,
+  onFilterChange,
+  onSearchChange,
+  onClearFilters,
+  onRepair,
+  onRetry,
+  onRemoveFilter
+}) {
+  const searchInputId = (0, import_react.useId)();
+  const [draftSearch, setDraftSearch] = (0, import_react.useState)(searchValue);
+  const [prevSearchValue, setPrevSearchValue] = (0, import_react.useState)(searchValue);
+  const [isSheetOpen, setIsSheetOpen] = (0, import_react.useState)(false);
+  const [isFilterDrawerOpen, setIsFilterDrawerOpen] = (0, import_react.useState)(false);
+  const [isSortDrawerOpen, setIsSortDrawerOpen] = (0, import_react.useState)(false);
+  const reconciledSearch = reconcileSearchDraft({ searchValue, prevSearchValue, draft: draftSearch });
+  if (reconciledSearch) {
+    setPrevSearchValue(reconciledSearch.prevSearchValue);
+    if (reconciledSearch.draft !== draftSearch) setDraftSearch(reconciledSearch.draft);
+  }
+  (0, import_react.useEffect)(() => {
+    const mediaQuery = window.matchMedia("(min-width: 1024px)");
+    const handleChange = (event) => {
+      if (event.matches) {
+        setIsSheetOpen(false);
+        setIsFilterDrawerOpen(false);
+        setIsSortDrawerOpen(false);
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  const priceRangeValue = priceRangeConfig ? selectedPriceRange ?? [priceRangeConfig.min, priceRangeConfig.max] : [0, 0];
+  const emitFilters = (overrides = {}) => {
+    onFilterChange?.(
+      buildFilterChange({
+        categories: selectedCategories,
+        collections: selectedCollections,
+        ...priceRangeConfig ? { priceRange: priceRangeValue } : {},
+        facets: selectedFacets,
+        ...overrides
+      })
+    );
+  };
+  const handleCategoryChange = (category, checked) => {
+    emitFilters({ categories: toggleFilterValue(selectedCategories, category, checked) });
+  };
+  const handleCollectionChange = (collection, checked) => {
+    emitFilters({ collections: toggleFilterValue(selectedCollections, collection, checked) });
+  };
+  const handleFacetChange = (group, value, checked) => {
+    const current = selectedFacets[group.id] ?? [];
+    const nextValues = toggleFilterValue(current, value, checked);
+    const nextFacets = { ...selectedFacets };
+    if (nextValues.length > 0) nextFacets[group.id] = nextValues;
+    else delete nextFacets[group.id];
+    emitFilters({ facets: nextFacets });
+  };
+  const handlePriceChange = (next) => {
+    emitFilters({ priceRange: next });
+  };
+  const handleClearAll = () => {
+    emitFilters({
+      categories: [],
+      collections: [],
+      ...priceRangeConfig ? { priceRange: [priceRangeConfig.min, priceRangeConfig.max] } : {},
+      facets: {}
+    });
+  };
+  const handlePageSizeChange = (size) => {
+    if (Number.isFinite(size)) onPageSizeChange?.(size);
+  };
+  const handlePageChange = (page) => {
+    if (page === "...") return;
+    const numeric = Number(page);
+    if (Number.isFinite(numeric)) onPageChange?.(numeric);
+  };
+  const handleSortChange = (sort) => {
+    onSortChange?.(sort);
+  };
+  const handleSearchChange = (text) => {
+    setDraftSearch(text);
+    onSearchChange?.(text);
+  };
+  const fields = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_category_listing_filter_fields.CategoryListingFilterFields,
+    {
+      selectedText,
+      clearAllLabel,
+      priceRangeTitle,
+      priceRange: priceRangeValue,
+      priceRangeConfig: showPrice ? priceRangeConfig : void 0,
+      minLabel,
+      maxLabel,
+      onPriceChange: handlePriceChange,
+      categoriesTitle,
+      categories,
+      selectedCategories,
+      onCategoryChange: handleCategoryChange,
+      collectionsTitle,
+      collections,
+      selectedCollections,
+      onCollectionChange: handleCollectionChange,
+      facets,
+      selectedFacets,
+      onFacetChange: handleFacetChange,
+      onClearAll: handleClearAll
+    }
+  );
+  const sortControl = (ariaLabel) => showSort && sortOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_select.Select, { value: selectedSort, onValueChange: handleSortChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectTrigger, { className: "h-8 w-[180px]", "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectValue, { placeholder: sortPlaceholder }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectContent, { children: sortOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectItem, { value: option.value, children: option.label }, option.value)) })
+  ] }) : null;
+  const searchControl = showSearch ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative w-full sm:w-64", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: searchInputId, className: "sr-only", children: searchLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_lucide_react.Search,
+      {
+        "aria-hidden": "true",
+        className: "text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_input.Input,
+      {
+        id: searchInputId,
+        type: "search",
+        value: draftSearch,
+        onChange: (event) => handleSearchChange(event.target.value),
+        placeholder: searchPlaceholder,
+        "aria-label": searchLabel,
+        className: "h-8 pl-8"
+      }
+    )
+  ] }) : null;
+  const pageSizeControl = viewOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hidden items-center gap-2 sm:flex", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm", children: viewLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_select.Select,
+      {
+        value: String(selectedPageSize),
+        onValueChange: (value) => {
+          const option = viewOptions.find((candidate) => String(candidate) === value);
+          handlePageSizeChange(option ?? Number(value));
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectTrigger, { className: "h-8 w-[100px]", "aria-label": viewLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectValue, { placeholder: viewPlaceholder }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectContent, { children: viewOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectItem, { value: String(option), children: option }, option)) })
+        ]
+      }
+    )
+  ] }) : null;
+  const statusView = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    CategoryListingStatusView,
+    {
+      status,
+      activeFilters,
+      loadingLabel,
+      emptyTitle,
+      emptyDescription,
+      clearFiltersLabel,
+      invalidQueryTitle,
+      unsupportedQueryTitle,
+      unmountedCapabilityTitle,
+      errorTitle,
+      errorDescription,
+      repairLabel,
+      retryLabel,
+      activeFiltersTitle,
+      removeFilterLabel,
+      onClearFilters,
+      onRepair,
+      onRetry,
+      onRemoveFilter
+    }
+  );
+  const results = status.state === "ready" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { "aria-labelledby": "products-heading", className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { id: "products-heading", className: "sr-only", children: productsTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "ul",
+      {
+        "data-slot": "category-listing-products",
+        className: (0, import_utils.cn)(
+          "grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6",
+          presentation === "sidebar" ? "lg:grid-cols-3" : "lg:grid-cols-4"
+        ),
+        children: products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_product_card.ProductCard,
+          {
+            item: product,
+            presentation: "minimal",
+            hideAddToCart: true,
+            onProductClick
+          }
+        ) }, product.id))
+      }
+    ),
+    pagination.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pagination.Pagination, { "aria-label": "Paginaci\xF3n", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pagination.PaginationContent, { children: pagination.map(
+      (page, index) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pagination.PaginationEllipsis, {}, `${page}-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pagination.PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_button.Button,
+        {
+          type: "button",
+          variant: selectedPage === page ? "outline" : "ghost",
+          size: "icon",
+          "data-slot": "pagination-link",
+          "data-active": selectedPage === page,
+          "aria-current": selectedPage === page ? "page" : void 0,
+          className: "size-8 cursor-pointer p-0",
+          onClick: () => handlePageChange(page),
+          children: [
+            page,
+            selectedPage === page && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: currentLabel })
+          ]
+        }
+      ) }, page)
+    ) }) }) : null
+  ] }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_utils.cn)("flex flex-col gap-8", presentation === "sidebar" && "lg:flex-row"), children: [
+      presentation === "sidebar" && showFilters ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", { className: "hidden w-full flex-none lg:block lg:w-72", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "max-h-100vh sticky top-4 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-6 pb-6", children: fields }) }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: "flex min-w-0 flex-1 flex-col gap-6", children: [
+        presentation === "toolbar" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-background/95 supports-[backdrop-filter]:bg-background/80 sticky top-0 z-10 -mx-4 flex items-center gap-2 border-b px-4 py-2 backdrop-blur lg:hidden", children: [
+            showFilters ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_button.Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                className: "h-9 flex-1 cursor-pointer justify-start",
+                onClick: () => setIsFilterDrawerOpen(true),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.SlidersHorizontal, { "aria-hidden": "true" }),
+                  filtersTitle,
+                  activeFilters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.Badge, { variant: "secondary", className: "ms-auto", children: activeFilters.length }) : null
+                ]
+              }
+            ) : null,
+            showSort && sortOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_button.Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                className: "h-9 cursor-pointer",
+                "aria-label": sortTitle,
+                onClick: () => setIsSortDrawerOpen(true),
+                children: sortTitle
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hidden items-center gap-3 lg:flex", children: [
+            showFilters ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_button.Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                className: "h-8 cursor-pointer",
+                onClick: () => setIsFilterDrawerOpen(true),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.SlidersHorizontal, { "aria-hidden": "true" }),
+                  filtersTitle,
+                  activeFilters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.Badge, { variant: "secondary", children: activeFilters.length }) : null
+                ]
+              }
+            ) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ms-auto", children: sortControl(sortTitle) })
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-1 items-center gap-4", children: [
+            presentation === "sidebar" && showFilters ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sheet.Sheet, { open: isSheetOpen, onOpenChange: setIsSheetOpen, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.SheetTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_button.Button,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  className: "h-8 cursor-pointer px-3 text-xs lg:hidden",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.SlidersHorizontal, { "aria-hidden": "true" }),
+                    filtersTitle
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sheet.SheetContent, { side: "left", className: "w-full p-0 sm:w-[380px] lg:hidden", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.SheetHeader, { className: "border-b px-6 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.SheetTitle, { className: "text-lg", children: filtersTitle }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-[calc(100vh-4rem)] overflow-y-auto p-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-6", children: fields }) })
+              ] })
+            ] }) : null,
+            searchControl,
+            pageSizeControl
+          ] }),
+          presentation === "sidebar" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-4", children: sortControl(sortPlaceholder) }) : null
+        ] }),
+        statusView,
+        results
+      ] })
+    ] }),
+    presentation === "toolbar" && showFilters ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.Drawer, { open: isFilterDrawerOpen, onOpenChange: setIsFilterDrawerOpen, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_drawer.DrawerContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.DrawerHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.DrawerTitle, { children: filtersTitle }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto px-4", children: fields }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 border-t p-4 pb-[max(1rem,env(safe-area-inset-bottom))]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "button", variant: "ghost", onClick: handleClearAll, children: clearAllLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "button", className: "flex-1", onClick: () => setIsFilterDrawerOpen(false), children: applyFiltersLabel })
+      ] })
+    ] }) }) : null,
+    presentation === "toolbar" && showSort && sortOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.Drawer, { open: isSortDrawerOpen, onOpenChange: setIsSortDrawerOpen, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_drawer.DrawerContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.DrawerHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.DrawerTitle, { children: sortTitle }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_radio_group.RadioGroup,
+        {
+          value: selectedSort,
+          onValueChange: (value) => {
+            if (typeof value === "string") {
+              handleSortChange(value);
+              setIsSortDrawerOpen(false);
+            }
+          },
+          className: "gap-3",
+          children: sortOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radio_group.RadioGroupItem, { value: option.value, id: `listing-sort-${option.value}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_label.Label, { htmlFor: `listing-sort-${option.value}`, className: "min-h-11 font-normal", children: option.label })
+          ] }, option.value))
+        }
+      ) })
+    ] }) }) : null
+  ] });
+}
+var category_listing_default = CategoryListing;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CategoryListing,
+  CategoryListingStatusView,
+  buildFilterChange,
+  reconcileSearchDraft,
+  toggleFilterValue
+});
+//# sourceMappingURL=category-listing.js.map