@fairmint/ui 0.2.15 → 0.2.17

package/dist/fairmint-ui.js

@@ -15839,14 +15839,14 @@ function useAvatarGroupContext() {
   const ctx = useContext(AvatarGroupContext);
   return { withinGroup: !!ctx };
 }
-const varsResolver$v = createVarsResolver((_, { spacing }) => ({
+const varsResolver$v = createVarsResolver((_, { spacing: spacing2 }) => ({
   group: {
-    "--ag-spacing": getSpacing(spacing)
+    "--ag-spacing": getSpacing(spacing2)
   }
 }));
 const AvatarGroup = factory((_props, ref) => {
   const props = useProps("AvatarGroup", null, _props);
-  const { classNames: classNames2, className, style, styles, unstyled, vars, spacing, attributes, ...others } = props;
+  const { classNames: classNames2, className, style, styles, unstyled, vars, spacing: spacing2, attributes, ...others } = props;
   const getStyles2 = useStyles({
     name: "AvatarGroup",
     classes: classes$t,
@@ -21383,15 +21383,15 @@ Select$1.classes = { ...InputBase.classes, ...Combobox.classes };
 Select$1.displayName = "@mantine/core/Select";
 var classes$8 = { "container": "m_925c2d2c", "root": "m_2415a157" };
 function SimpleGridMediaVariables({
-  spacing,
+  spacing: spacing2,
   verticalSpacing,
   cols,
   selector
 }) {
   const theme2 = useMantineTheme();
-  const _verticalSpacing = verticalSpacing === void 0 ? spacing : verticalSpacing;
+  const _verticalSpacing = verticalSpacing === void 0 ? spacing2 : verticalSpacing;
   const baseStyles = filterProps({
-    "--sg-spacing-x": getSpacing(getBaseValue$1(spacing)),
+    "--sg-spacing-x": getSpacing(getBaseValue$1(spacing2)),
     "--sg-spacing-y": getSpacing(getBaseValue$1(_verticalSpacing)),
     "--sg-cols": getBaseValue$1(cols)?.toString()
   });
@@ -21400,8 +21400,8 @@ function SimpleGridMediaVariables({
       if (!acc[breakpoint]) {
         acc[breakpoint] = {};
       }
-      if (typeof spacing === "object" && spacing[breakpoint] !== void 0) {
-        acc[breakpoint]["--sg-spacing-x"] = getSpacing(spacing[breakpoint]);
+      if (typeof spacing2 === "object" && spacing2[breakpoint] !== void 0) {
+        acc[breakpoint]["--sg-spacing-x"] = getSpacing(spacing2[breakpoint]);
       }
       if (typeof _verticalSpacing === "object" && _verticalSpacing[breakpoint] !== void 0) {
         acc[breakpoint]["--sg-spacing-y"] = getSpacing(_verticalSpacing[breakpoint]);
@@ -21432,13 +21432,13 @@ function sortBreakpoints(breakpoints) {
   return breakpoints.sort((a, b) => px(a) - px(b));
 }
 function getUniqueBreakpoints({
-  spacing,
+  spacing: spacing2,
   verticalSpacing,
   cols
 }) {
   const breakpoints = Array.from(
     /* @__PURE__ */ new Set([
-      ...getBreakpoints(spacing),
+      ...getBreakpoints(spacing2),
       ...getBreakpoints(verticalSpacing),
       ...getBreakpoints(cols)
     ])
@@ -21446,25 +21446,25 @@ function getUniqueBreakpoints({
   return sortBreakpoints(breakpoints);
 }
 function SimpleGridContainerVariables({
-  spacing,
+  spacing: spacing2,
   verticalSpacing,
   cols,
   selector
 }) {
-  const _verticalSpacing = verticalSpacing === void 0 ? spacing : verticalSpacing;
+  const _verticalSpacing = verticalSpacing === void 0 ? spacing2 : verticalSpacing;
   const baseStyles = filterProps({
-    "--sg-spacing-x": getSpacing(getBaseValue$1(spacing)),
+    "--sg-spacing-x": getSpacing(getBaseValue$1(spacing2)),
     "--sg-spacing-y": getSpacing(getBaseValue$1(_verticalSpacing)),
     "--sg-cols": getBaseValue$1(cols)?.toString()
   });
-  const uniqueBreakpoints = getUniqueBreakpoints({ spacing, verticalSpacing, cols });
+  const uniqueBreakpoints = getUniqueBreakpoints({ spacing: spacing2, verticalSpacing, cols });
   const queries = uniqueBreakpoints.reduce(
     (acc, breakpoint) => {
       if (!acc[breakpoint]) {
         acc[breakpoint] = {};
       }
-      if (typeof spacing === "object" && spacing[breakpoint] !== void 0) {
-        acc[breakpoint]["--sg-spacing-x"] = getSpacing(spacing[breakpoint]);
+      if (typeof spacing2 === "object" && spacing2[breakpoint] !== void 0) {
+        acc[breakpoint]["--sg-spacing-x"] = getSpacing(spacing2[breakpoint]);
       }
       if (typeof _verticalSpacing === "object" && _verticalSpacing[breakpoint] !== void 0) {
         acc[breakpoint]["--sg-spacing-y"] = getSpacing(_verticalSpacing[breakpoint]);
@@ -21498,7 +21498,7 @@ const SimpleGrid = factory((_props, ref) => {
     vars,
     cols,
     verticalSpacing,
-    spacing,
+    spacing: spacing2,
     type,
     attributes,
     ...others
@@ -26768,6 +26768,13 @@ const z = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   },
   void: voidType
 }, Symbol.toStringTag, { value: "Module" }));
+const spacing = {
+  xs: "0.625rem",
+  sm: "0.75rem",
+  md: "1rem",
+  lg: "1.25rem",
+  xl: "2rem"
+};
 const colors = {
   /** Primary UI color — buttons, links, active states. */
   primary: "indigo",
@@ -26919,6 +26926,7 @@ const theme = createTheme({
   },
   radius: radii,
   defaultRadius: "md",
+  spacing,
   breakpoints: {
     xs: "30em",
     sm: "48em",
@@ -26967,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. */
@@ -26977,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 = {
@@ -28467,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,
@@ -28536,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);
@@ -28545,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,
@@ -28634,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
@@ -28920,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
@@ -31116,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 }),
@@ -31138,7 +31195,9 @@ export {
   Card,
   Center,
   Checkbox,
+  ClickableCard,
   Collapse,
+  ColorDot,
   ConfirmDialog,
   Container,
   Currency,
@@ -31197,6 +31256,7 @@ export {
   StatCard,
   StatusBadge,
   Switch,
+  TABLET_BREAKPOINT,
   Table,
   Tabs,
   Text,
@@ -31241,6 +31301,7 @@ export {
   phoneSchema,
   radii,
   semanticColors,
+  spacing,
   theme,
   truncateAddress,
   typography,
@@ -31254,6 +31315,7 @@ export {
   useId$1 as useId,
   useIntersection,
   useIsMobile,
+  useIsTablet,
   useMediaQuery,
   useScrollIntoView,
   useViewportSize,