@agg-market/ui 5.0.0 → 7.0.0

package/dist/chunk-OAJBTVZT.mjs

@@ -0,0 +1,119 @@
+import {
+  Icon,
+  cn
+} from "./chunk-MUB7NYWZ.mjs";
+
+// src/primitives/inline-alert/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var toneIconName = {
+  error: "error-filled",
+  warning: "warning-filled"
+};
+var toneIconClassName = {
+  error: "text-agg-error",
+  warning: "text-agg-warning"
+};
+var surfaceClassNames = {
+  error: "rounded-agg-lg bg-agg-status-error-surface px-3 py-2.5",
+  warning: "rounded-agg-lg border border-agg-separator bg-agg-secondary-hover px-3 py-2.5"
+};
+var liveRegionConfig = {
+  error: {
+    role: "alert",
+    ariaLive: "assertive"
+  },
+  warning: {
+    role: "status",
+    ariaLive: "polite"
+  }
+};
+var resolveVariant = ({
+  tone,
+  variant
+}) => {
+  if (variant)
+    return variant;
+  return tone === "error" ? "surface" : "plain";
+};
+var InlineAlert = ({
+  tone = "error",
+  variant,
+  title,
+  message,
+  actionLabel,
+  onAction,
+  className,
+  "aria-label": ariaLabel
+}) => {
+  const resolvedVariant = resolveVariant({
+    tone,
+    variant
+  });
+  const hasAction = !!actionLabel && !!onAction;
+  const { ariaLive, role } = liveRegionConfig[tone];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full gap-3",
+        resolvedVariant === "plain" ? "items-center justify-center" : "items-start",
+        resolvedVariant === "surface" ? surfaceClassNames[tone] : null,
+        className
+      ),
+      role,
+      "aria-live": ariaLive,
+      "aria-label": ariaLabel,
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: toneIconName[tone],
+            className: cn("h-4 w-4 shrink-0", toneIconClassName[tone]),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "min-w-0",
+              resolvedVariant === "plain" && !hasAction ? "flex-none text-center" : "flex-1"
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col",
+                  title ? "gap-1" : null,
+                  resolvedVariant === "plain" && !hasAction ? "items-center" : null
+                ),
+                children: [
+                  title ? /* @__PURE__ */ jsx("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: title }) : null,
+                  /* @__PURE__ */ jsx("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: message })
+                ]
+              }
+            )
+          }
+        ),
+        hasAction ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "shrink-0 text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary-hover focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary"
+            ),
+            "aria-label": actionLabel,
+            onClick: onAction,
+            children: actionLabel
+          }
+        ) : null
+      ]
+    }
+  );
+};
+InlineAlert.displayName = "InlineAlert";
+
+export {
+  InlineAlert
+};

package/dist/{chunk-QDMHLRDY.mjs → chunk-OVQVAUAI.mjs}

@@ -1,22 +1,146 @@
 import {
-  SearchEmptyIcon
-} from "./chunk-4343LYSH.mjs";
-import {
-  VenueLogo
-} from "./chunk-PORVP72S.mjs";
-import {
-  Icon
-} from "./chunk-PZTHM6WG.mjs";
+  SearchEmptyIcon,
+  Typography
+} from "./chunk-ZYUJ7YEJ.mjs";
 import {
+  Icon,
+  VenueLogo,
   __spreadProps,
   __spreadValues,
   cn,
-  getMotionClassName
-} from "./chunk-GJ4U5NCE.mjs";
+  getMotionClassName,
+  iconSizeClasses
+} from "./chunk-MUB7NYWZ.mjs";
 
-// src/primitives/search/index.tsx
-import { useMemo } from "react";
+// src/primitives/hello-world.tsx
+import { useHello } from "@agg-market/hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+function HelloWorld() {
+  const { data, error, isLoading } = useHello();
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "body", children: "Loading..." });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs(Typography, { variant: "body", children: [
+      "Error: ",
+      error.message
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Typography, { variant: "body", children: data == null ? void 0 : data.message });
+}
+HelloWorld.displayName = "HelloWorld";
+
+// src/primitives/loading-icon/index.tsx
 import { useLabels, useSdkUiConfig } from "@agg-market/hooks";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var LoadingIcon = ({
+  size = "medium",
+  className,
+  ariaLabel
+}) => {
+  const labels = useLabels();
+  const { enableAnimations } = useSdkUiConfig();
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.common.loading,
+      className: cn(
+        "group/agg-loading-icon",
+        "inline-grid place-items-center text-agg-primary will-change-transform",
+        className
+      ),
+      children: /* @__PURE__ */ jsx2("span", { className: "inline-grid place-items-center", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 44 44", className: cn("block", iconSizeClasses[size]), children: /* @__PURE__ */ jsxs2("g", { children: [
+        enableAnimations ? /* @__PURE__ */ jsx2(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            attributeType: "XML",
+            type: "rotate",
+            from: "0 22 22",
+            to: "360 22 22",
+            dur: "1.4s",
+            repeatCount: "indefinite"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx2(
+          "circle",
+          {
+            cx: "22",
+            cy: "22",
+            r: "16",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "6",
+            strokeLinecap: "round",
+            strokeDasharray: "60 100",
+            strokeDashoffset: "0",
+            children: enableAnimations ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx2(
+                "animate",
+                {
+                  attributeName: "stroke-dasharray",
+                  values: "1 100;60 100;1 100",
+                  dur: "1.2s",
+                  repeatCount: "indefinite"
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "animate",
+                {
+                  attributeName: "stroke-dashoffset",
+                  values: "0;-25;-100",
+                  dur: "1.2s",
+                  repeatCount: "indefinite"
+                }
+              )
+            ] }) : null
+          }
+        )
+      ] }) }) })
+    }
+  );
+};
+LoadingIcon.displayName = "LoadingIcon";
+
+// src/primitives/number-value.tsx
+import { useMemo } from "react";
+import { useSdkUiConfig as useSdkUiConfig2 } from "@agg-market/hooks";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var NumberValue = ({
+  value,
+  format = "number",
+  fallback = "\u2014",
+  className,
+  ariaLabel
+}) => {
+  const config = useSdkUiConfig2();
+  const formatted = useMemo(() => {
+    if (value == null)
+      return fallback;
+    if (format === "date") {
+      if (value instanceof Date)
+        return config.formatDate(value);
+      return fallback;
+    }
+    if (typeof value !== "number")
+      return fallback;
+    if (format === "percent")
+      return config.formatPercent(value);
+    if (format === "currency")
+      return config.formatCurrency(value);
+    if (format === "compactCurrency") {
+      return config.formatCompactCurrency(value);
+    }
+    return config.formatNumber(value);
+  }, [config, fallback, format, value]);
+  return /* @__PURE__ */ jsx3("span", { className: cn("font-agg-sans", className), "aria-label": ariaLabel, children: formatted });
+};
+NumberValue.displayName = "NumberValue";
+
+// src/primitives/search/index.tsx
+import { useMemo as useMemo2 } from "react";
+import { useLabels as useLabels2, useSdkUiConfig as useSdkUiConfig3 } from "@agg-market/hooks";
 
 // src/primitives/search/search.types.ts
 import { z } from "zod";
@@ -42,7 +166,7 @@ var searchResultItemSchema = z.object({
 var searchResultItemsSchema = z.array(searchResultItemSchema);
 
 // src/primitives/search/index.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var SearchResultRow = ({
   item,
   resultAria,
@@ -53,7 +177,7 @@ var SearchResultRow = ({
   const handleResultClick = () => {
     onSelect == null ? void 0 : onSelect(item);
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs3(
     "button",
     {
       type: "button",
@@ -69,8 +193,8 @@ var SearchResultRow = ({
       onClick: handleResultClick,
       "aria-label": resultAria(item.title),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-          /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          /* @__PURE__ */ jsx4(
             "img",
             {
               src: item.thumbnailSrc,
@@ -81,7 +205,7 @@ var SearchResultRow = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx4(
             "p",
             {
               className: cn(
@@ -92,10 +216,10 @@ var SearchResultRow = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("flex w-[200px] shrink-0 items-center gap-2", classNames == null ? void 0 : classNames.resultMeta), children: [
-          /* @__PURE__ */ jsx(VenueLogo, { venue: item.venue, size: "small" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [
-            /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs3("div", { className: cn("flex w-[200px] shrink-0 items-center gap-2", classNames == null ? void 0 : classNames.resultMeta), children: [
+          /* @__PURE__ */ jsx4(VenueLogo, { venue: item.venue, size: "small" }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [
+            /* @__PURE__ */ jsx4(
               "p",
               {
                 className: cn(
@@ -105,7 +229,7 @@ var SearchResultRow = ({
                 children: item.valueLabel
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx4(
               "p",
               {
                 className: cn(
@@ -117,7 +241,7 @@ var SearchResultRow = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx4(
           Icon,
           {
             name: "chevron-right",
@@ -145,9 +269,9 @@ var Search = ({
   classNames,
   inputProps
 }) => {
-  const labels = useLabels();
-  const { enableAnimations } = useSdkUiConfig();
-  const validatedResults = useMemo(() => {
+  const labels = useLabels2();
+  const { enableAnimations } = useSdkUiConfig3();
+  const validatedResults = useMemo2(() => {
     return getValidatedResults(results);
   }, [results]);
   const hasSearchValue = value.trim().length > 0;
@@ -158,8 +282,8 @@ var Search = ({
   const handleInputChange = (event) => {
     onValueChange(event.target.value);
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("group/agg-search", "flex w-full flex-col gap-1", classNames == null ? void 0 : classNames.root), children: [
-    /* @__PURE__ */ jsx("label", { className: "w-full", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs3("div", { className: cn("group/agg-search", "flex w-full flex-col gap-1", classNames == null ? void 0 : classNames.root), children: [
+    /* @__PURE__ */ jsx4("label", { className: "w-full", children: /* @__PURE__ */ jsxs3(
       "div",
       {
         className: cn(
@@ -173,7 +297,7 @@ var Search = ({
           classNames == null ? void 0 : classNames.inputContainer
         ),
         children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx4(
             Icon,
             {
               name: "search",
@@ -181,7 +305,7 @@ var Search = ({
               className: cn("text-agg-muted-foreground", classNames == null ? void 0 : classNames.searchIcon)
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx4(
             "input",
             __spreadProps(__spreadValues({}, inputProps), {
               type: "text",
@@ -202,25 +326,25 @@ var Search = ({
         ]
       }
     ) }),
-    shouldRenderResults ? /* @__PURE__ */ jsx(
+    shouldRenderResults ? /* @__PURE__ */ jsx4(
       "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__ */ jsx(
+        children: /* @__PURE__ */ jsx4(
           "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__ */ jsx(
+            children: validatedResults.map((item, index) => /* @__PURE__ */ jsx4(
               "li",
               {
                 role: "presentation",
                 className: cn(index > 0 && "border-t border-agg-separator", classNames == null ? void 0 : classNames.resultItem),
-                children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsx4(
                   SearchResultRow,
                   {
                     item,
@@ -236,29 +360,29 @@ var Search = ({
         )
       }
     ) : null,
-    shouldRenderNoResults ? /* @__PURE__ */ jsx(
+    shouldRenderNoResults ? /* @__PURE__ */ jsx4(
       "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__ */ jsxs(
+        children: /* @__PURE__ */ jsxs3(
           "div",
           {
             className: cn("flex flex-col items-center gap-5", classNames == null ? void 0 : classNames.emptyStateContent),
             role: "status",
             "aria-live": "polite",
             children: [
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx4(
                 SearchEmptyIcon,
                 {
                   className: cn("h-10 w-10 text-agg-muted-foreground", classNames == null ? void 0 : classNames.emptyStateIcon),
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 text-center", children: [
-                /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center gap-1 text-center", children: [
+                /* @__PURE__ */ jsx4(
                   "p",
                   {
                     className: cn(
@@ -268,7 +392,7 @@ var Search = ({
                     children: labels.search.noResultsTitle
                   }
                 ),
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx4(
                   "p",
                   {
                     className: cn(
@@ -289,5 +413,8 @@ var Search = ({
 Search.displayName = "Search";
 
 export {
+  HelloWorld,
+  LoadingIcon,
+  NumberValue,
   Search
 };