@fairmint/ui 0.2.16 → 0.2.18

package/dist/fairmint-ui.js

@@ -26975,7 +26975,8 @@ const theme = createTheme({
 const fairmintCssVariables = () => ({
   variables: {
     "--fairmint-font-headings": typography.headingFontFamily,
-    "--fairmint-font-body": typography.fontFamily
+    "--fairmint-font-body": typography.fontFamily,
+    "--fairmint-interactive-focus-ring": indigo[5]
   },
   light: {
     /** Large decorative background text on error/empty pages. */
@@ -26985,13 +26986,17 @@ const fairmintCssVariables = () => ({
     /** Faint metadata text (timestamps, tertiary labels). Replaces neutral.4 */
     "--fairmint-color-text-tertiary": neutral[4],
     /** Background tint for selected / active rows. Replaces primary.0 */
-    "--fairmint-color-surface-selected": indigo[0]
+    "--fairmint-color-surface-selected": indigo[0],
+    "--fairmint-interactive-hover-shadow": `0 2px 6px ${neutral[9]}0F`,
+    "--fairmint-interactive-hover-bg": neutral[0]
   },
   dark: {
     "--fairmint-watermark-color": neutral[7],
     "--fairmint-color-text-secondary": neutral[4],
     "--fairmint-color-text-tertiary": neutral[5],
-    "--fairmint-color-surface-selected": indigo[9]
+    "--fairmint-color-surface-selected": indigo[9],
+    "--fairmint-interactive-hover-shadow": `0 2px 6px ${neutral[0]}1A`,
+    "--fairmint-interactive-hover-bg": neutral[8]
   }
 });
 const fairmintVars = {
@@ -28475,6 +28480,64 @@ function AnimateIn({
   };
   return /* @__PURE__ */ jsx("div", { style, className, children });
 }
+function ClickableCard({
+  onClick,
+  ariaLabel,
+  animationDelay,
+  bg,
+  padding = "md",
+  radius = "md",
+  withBorder = true,
+  children
+}) {
+  const handleKeyDown = (e) => {
+    if (e.key === " ") {
+      e.preventDefault();
+    }
+  };
+  const animate = animationDelay !== void 0;
+  const animationStyle = animate ? {
+    opacity: 0,
+    animation: `rowSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) ${animationDelay}s forwards`
+  } : void 0;
+  const card = /* @__PURE__ */ jsx(
+    Card,
+    {
+      bg,
+      padding,
+      radius,
+      withBorder,
+      style: { overflow: "hidden" },
+      children
+    }
+  );
+  if (!onClick) {
+    return animate ? /* @__PURE__ */ jsx("div", { style: animationStyle, children: card }) : card;
+  }
+  const button = /* @__PURE__ */ jsx(
+    UnstyledButton,
+    {
+      onClick,
+      onKeyDown: handleKeyDown,
+      "aria-label": ariaLabel,
+      className: "fairmint-clickable-card",
+      w: "100%",
+      style: { borderRadius: radii[radius] ?? radius },
+      children: card
+    }
+  );
+  return animate ? /* @__PURE__ */ jsx("div", { style: animationStyle, children: button }) : button;
+}
+function ColorDot({ color, size: size2 = 8, style, ...rest }) {
+  const baseStyle = {
+    width: size2,
+    height: size2,
+    borderRadius: "50%",
+    backgroundColor: color,
+    flexShrink: 0
+  };
+  return /* @__PURE__ */ jsx(Box, { "data-testid": "color-dot", style: [baseStyle, style], ...rest });
+}
 function ConfirmDialog({
   title,
   message,
@@ -28544,7 +28607,8 @@ function formatDate(dateString) {
 function formatPercent(n, decimals = 2) {
   return `${n.toFixed(decimals)}%`;
 }
-function Currency({ value, precise = false, currency, ...rest }) {
+const TABULAR_NUMS = { fontVariantNumeric: "tabular-nums" };
+function Currency({ value, precise = false, currency, style, ...rest }) {
   let formatted;
   if (currency) {
     formatted = formatPreciseWithCurrency(value, currency);
@@ -28553,7 +28617,7 @@ function Currency({ value, precise = false, currency, ...rest }) {
   } else {
     formatted = formatCurrency(value);
   }
-  return /* @__PURE__ */ jsx(Text, { component: "span", ...rest, children: formatted });
+  return /* @__PURE__ */ jsx(Text, { component: "span", style: [TABULAR_NUMS, style], ...rest, children: formatted });
 }
 function EmptyState({
   icon,
@@ -28642,17 +28706,7 @@ function DataTable({
         Table.Tr,
         {
           onClick: onRowClick ? () => onRowClick(row) : void 0,
-          style: onRowClick ? {
-            cursor: "pointer",
-            transition: "background-color 0.15s ease"
-          } : void 0,
-          styles: onRowClick ? {
-            tr: {
-              "&:hover": {
-                backgroundColor: neutralColors[50]
-              }
-            }
-          } : void 0,
+          className: onRowClick ? "fairmint-table-row-clickable" : void 0,
           children: columns.map((col) => /* @__PURE__ */ jsx(Table.Td, { children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key))
         },
         key
@@ -28928,21 +28982,10 @@ function ListRow({
     {
       bg: isSelected ? fairmintVars.colorSurfaceSelected : void 0,
       onClick,
+      className: "fairmint-list-row",
       w: "100%",
       py: "sm",
       px: "md",
-      styles: {
-        root: {
-          transition: "background-color 0.15s ease",
-          "&:hover": {
-            backgroundColor: neutralColors[50]
-          },
-          "&:focus-visible": {
-            outline: `2px solid ${brandColors.indigo}`,
-            outlineOffset: "-2px"
-          }
-        }
-      },
       style: animationStyle,
       "aria-label": ariaLabel ?? title,
       children: content
@@ -31124,6 +31167,12 @@ function useIsMobile() {
     getInitialValueInEffect: false
   }) ?? false;
 }
+const TABLET_BREAKPOINT = "(max-width: 68em)";
+function useIsTablet() {
+  return useMediaQuery(TABLET_BREAKPOINT, false, {
+    getInitialValueInEffect: false
+  }) ?? false;
+}
 const notify = {
   success: ({ title, message, autoClose = 4e3 }) => notifications.show({ title, message, color: colors.success, autoClose }),
   error: ({ title, message, autoClose = 6e3 }) => notifications.show({ title, message, color: colors.error, autoClose }),
@@ -31146,7 +31195,9 @@ export {
   Card,
   Center,
   Checkbox,
+  ClickableCard,
   Collapse,
+  ColorDot,
   ConfirmDialog,
   Container,
   Currency,
@@ -31205,6 +31256,7 @@ export {
   StatCard,
   StatusBadge,
   Switch,
+  TABLET_BREAKPOINT,
   Table,
   Tabs,
   Text,
@@ -31263,6 +31315,7 @@ export {
   useId$1 as useId,
   useIntersection,
   useIsMobile,
+  useIsTablet,
   useMediaQuery,
   useScrollIntoView,
   useViewportSize,