@agg-market/ui 0.0.1

package/dist/chunk-QE46DVJG.mjs

@@ -0,0 +1,323 @@
+import {
+  VenueLogo
+} from "./chunk-LY6474C4.mjs";
+import {
+  Icon
+} from "./chunk-DA6KZWSK.mjs";
+import {
+  getIconA11yProps
+} from "./chunk-BNDFQPHF.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  cn,
+  getMotionClassName
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/primitives/search/index.tsx
+import { useMemo } from "react";
+import { useLabels, useSdkUiConfig } from "@agg-market/hooks";
+
+// src/primitives/search/search-empty-icon.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SearchEmptyIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 40 40",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+        /* @__PURE__ */ jsx("circle", { cx: "19.9987", cy: "20.0013", r: "9.2", stroke: "currentColor", strokeWidth: "1.6" }),
+        /* @__PURE__ */ jsx(
+          "ellipse",
+          {
+            cx: "19.9987",
+            cy: "20.0012",
+            rx: "17.2",
+            ry: "6.6",
+            transform: "rotate(-35 19.9987 20.0012)",
+            stroke: "currentColor",
+            strokeWidth: "1.6"
+          }
+        )
+      ]
+    })
+  );
+};
+SearchEmptyIcon.displayName = "SearchEmptyIcon";
+
+// src/primitives/search/search.types.ts
+import { z } from "zod";
+var searchResultVenues = ["kalshi", "polymarket", "opinion", "probable"];
+var isSearchResultVenue = (value) => {
+  if (typeof value !== "string")
+    return false;
+  return searchResultVenues.includes(value);
+};
+var searchResultVenueSchema = z.custom(
+  (value) => isSearchResultVenue(value),
+  "Invalid venue logo name"
+);
+var searchResultItemSchema = z.object({
+  id: z.string().min(1),
+  title: z.string().min(1),
+  thumbnailSrc: z.string().min(1),
+  thumbnailAlt: z.string().optional(),
+  venue: searchResultVenueSchema,
+  valueLabel: z.string().min(1),
+  contextLabel: z.string().min(1)
+});
+var searchResultItemsSchema = z.array(searchResultItemSchema);
+
+// src/primitives/search/index.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SearchResultRow = ({
+  item,
+  resultAria,
+  onSelect,
+  classNames
+}) => {
+  var _a;
+  const handleResultClick = () => {
+    onSelect == null ? void 0 : onSelect(item);
+  };
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "group flex w-full items-center gap-6 px-5 py-3 text-left",
+        "focus-visible:outline-none focus-visible:bg-agg-secondary-hover",
+        "hover:bg-agg-secondary-hover",
+        classNames == null ? void 0 : classNames.resultButton
+      ),
+      onClick: handleResultClick,
+      "aria-label": resultAria(item.title),
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          /* @__PURE__ */ jsx2(
+            "img",
+            {
+              src: item.thumbnailSrc,
+              alt: (_a = item.thumbnailAlt) != null ? _a : "",
+              className: cn(
+                "h-10 w-10 shrink-0 rounded-[8px] object-cover",
+                classNames == null ? void 0 : classNames.resultThumbnail
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "p",
+            {
+              className: cn(
+                "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-agg-sans text-agg-base leading-agg-6 font-agg-normal text-agg-foreground",
+                classNames == null ? void 0 : classNames.resultTitle
+              ),
+              children: item.title
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: cn("flex w-[200px] shrink-0 items-center gap-2", classNames == null ? void 0 : classNames.resultMeta), children: [
+          /* @__PURE__ */ jsx2(VenueLogo, { venue: item.venue, size: "s" }),
+          /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [
+            /* @__PURE__ */ jsx2(
+              "p",
+              {
+                className: cn(
+                  "shrink-0 whitespace-nowrap font-agg-sans text-[18px] leading-7 font-agg-bold text-agg-foreground",
+                  classNames == null ? void 0 : classNames.resultValue
+                ),
+                children: item.valueLabel
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "p",
+              {
+                className: cn(
+                  "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-foreground",
+                  classNames == null ? void 0 : classNames.resultContext
+                ),
+                children: item.contextLabel
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          Icon,
+          {
+            name: "chevron-right",
+            size: "m",
+            className: cn("h-5 w-5 shrink-0 text-agg-muted-foreground", classNames == null ? void 0 : classNames.resultChevron)
+          }
+        )
+      ]
+    }
+  );
+};
+var getValidatedResults = (results) => {
+  if (!(results == null ? void 0 : results.length))
+    return [];
+  const parsedResults = searchResultItemsSchema.safeParse(results);
+  if (!parsedResults.success)
+    return [];
+  return parsedResults.data;
+};
+var Search = ({
+  value,
+  onValueChange,
+  results,
+  onSelect,
+  classNames,
+  inputProps
+}) => {
+  const labels = useLabels();
+  const { enableAnimations } = useSdkUiConfig();
+  const validatedResults = useMemo(() => {
+    return getValidatedResults(results);
+  }, [results]);
+  const hasSearchValue = value.trim().length > 0;
+  const resolvedIsActive = hasSearchValue;
+  const shouldRenderDropdown = hasSearchValue;
+  const shouldRenderNoResults = shouldRenderDropdown && !validatedResults.length;
+  const shouldRenderResults = shouldRenderDropdown && !!validatedResults.length;
+  const handleInputChange = (event) => {
+    onValueChange(event.target.value);
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex w-full flex-col gap-1", classNames == null ? void 0 : classNames.root), children: [
+    /* @__PURE__ */ jsx2("label", { className: "w-full", children: /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: cn(
+          "flex h-10 w-full items-center gap-2 rounded-[4px] bg-agg-secondary px-3",
+          resolvedIsActive ? "border-2 border-agg-primary" : "border border-agg-separator",
+          "focus-within:border-2 focus-within:border-agg-primary",
+          getMotionClassName(
+            enableAnimations,
+            "transition-[border-color,box-shadow] duration-200 ease-out"
+          ),
+          classNames == null ? void 0 : classNames.inputContainer
+        ),
+        children: [
+          /* @__PURE__ */ jsx2(
+            Icon,
+            {
+              name: "search",
+              size: "s",
+              className: cn("text-agg-muted-foreground", classNames == null ? void 0 : classNames.searchIcon)
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "input",
+            __spreadProps(__spreadValues({}, inputProps), {
+              type: "text",
+              value,
+              onChange: handleInputChange,
+              placeholder: labels.search.placeholder,
+              "aria-label": labels.search.inputAria,
+              className: cn(
+                "h-6 w-full min-w-0 border-0 bg-transparent p-0",
+                "font-agg-sans text-agg-base leading-agg-6 font-agg-normal text-agg-foreground",
+                "placeholder:text-agg-muted-foreground",
+                "outline-none focus:outline-none",
+                "disabled:cursor-not-allowed disabled:text-agg-muted-foreground",
+                classNames == null ? void 0 : classNames.input
+              )
+            })
+          )
+        ]
+      }
+    ) }),
+    shouldRenderResults ? /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: cn(
+          "w-full overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary py-2 shadow-[0px_8px_16px_0px_rgba(0,0,0,0.1)]",
+          classNames == null ? void 0 : classNames.dropdown
+        ),
+        children: /* @__PURE__ */ jsx2(
+          "ul",
+          {
+            className: cn("m-0 flex list-none flex-col p-0", classNames == null ? void 0 : classNames.resultsList),
+            role: "listbox",
+            "aria-label": labels.search.resultsAria,
+            children: validatedResults.map((item, index) => /* @__PURE__ */ jsx2(
+              "li",
+              {
+                className: cn(index > 0 && "border-t border-agg-separator", classNames == null ? void 0 : classNames.resultItem),
+                children: /* @__PURE__ */ jsx2(
+                  SearchResultRow,
+                  {
+                    item,
+                    resultAria: labels.search.resultAria,
+                    onSelect,
+                    classNames
+                  }
+                )
+              },
+              item.id
+            ))
+          }
+        )
+      }
+    ) : null,
+    shouldRenderNoResults ? /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: cn(
+          "w-full overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary py-10 shadow-[0px_8px_16px_0px_rgba(0,0,0,0.1)]",
+          classNames == null ? void 0 : classNames.emptyState
+        ),
+        children: /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: cn("flex flex-col items-center gap-5", classNames == null ? void 0 : classNames.emptyStateContent),
+            role: "status",
+            "aria-live": "polite",
+            children: [
+              /* @__PURE__ */ jsx2(
+                SearchEmptyIcon,
+                {
+                  className: cn("h-10 w-10 text-agg-muted-foreground", classNames == null ? void 0 : classNames.emptyStateIcon),
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center gap-1 text-center", children: [
+                /* @__PURE__ */ jsx2(
+                  "p",
+                  {
+                    className: cn(
+                      "font-agg-sans text-agg-base leading-agg-6 font-agg-bold text-agg-foreground",
+                      classNames == null ? void 0 : classNames.emptyStateTitle
+                    ),
+                    children: labels.search.noResultsTitle
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "p",
+                  {
+                    className: cn(
+                      "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-foreground",
+                      classNames == null ? void 0 : classNames.emptyStateDescription
+                    ),
+                    children: labels.search.noResultsDescription
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    ) : null
+  ] });
+};
+Search.displayName = "Search";
+
+export {
+  Search
+};