Temp port gutter util

src/alf/index.tsx

@@ -143,13 +143,28 @@ export function useTheme(theme?: ThemeName) {
   }, [theme, alf])
 }
 
-export function useBreakpoints() {
+export type Breakpoint = 'gtPhone' | 'gtMobile' | 'gtTablet'
+
+export function useBreakpoints(): Record<Breakpoint, boolean> & {
+  activeBreakpoint: Breakpoint | undefined
+} {
   const gtPhone = useMediaQuery({minWidth: 500})
   const gtMobile = useMediaQuery({minWidth: 800})
   const gtTablet = useMediaQuery({minWidth: 1300})
-  return {
+  return React.useMemo(() => {
-    gtPhone,
+    let active: Breakpoint | undefined
-    gtMobile,
+    if (gtTablet) {
-    gtTablet,
+      active = 'gtTablet'
-  }
+    } else if (gtMobile) {
+      active = 'gtMobile'
+    } else if (gtPhone) {
+      active = 'gtPhone'
+    }
+    return {
+      activeBreakpoint: active,
+      gtPhone,
+      gtMobile,
+      gtTablet,
+    }
+  }, [gtPhone, gtMobile, gtTablet])
 }

src/alf/util/useGutterStyles.ts

@@ -1,6 +1,12 @@
 import React from 'react'
 
-import {atoms as a, useBreakpoints, ViewStyleProp} from '#/alf'
+import {
+  atoms as a,
+  Breakpoint,
+  tokens,
+  useBreakpoints,
+  ViewStyleProp,
+} from '#/alf'
 
 export function useGutterStyles({
   top,
@@ -19,3 +25,70 @@ export function useGutterStyles({
     ]
   }, [gtMobile, top, bottom])
 }
+
+type Gutter = 'compact' | 'base' | 'wide' | 0
+
+const gutters: Record<
+  Exclude<Gutter, 0>,
+  Record<Breakpoint | 'default', number>
+> = {
+  compact: {
+    default: tokens.space.sm,
+    gtPhone: tokens.space.sm,
+    gtMobile: tokens.space.md,
+    gtTablet: tokens.space.md,
+  },
+  base: {
+    default: tokens.space.lg,
+    gtPhone: tokens.space.lg,
+    gtMobile: tokens.space.xl,
+    gtTablet: tokens.space.xl,
+  },
+  wide: {
+    default: tokens.space.xl,
+    gtPhone: tokens.space.xl,
+    gtMobile: tokens.space._3xl,
+    gtTablet: tokens.space._3xl,
+  },
+}
+
+type Gutters = {
+  paddingTop?: number
+  paddingRight?: number
+  paddingBottom?: number
+  paddingLeft?: number
+}
+
+export function useGutters([all]: [Gutter]): Gutters
+export function useGutters([vertical, horizontal]: [Gutter, Gutter]): Gutters
+export function useGutters([top, right, bottom, left]: [
+  Gutter,
+  Gutter,
+  Gutter,
+  Gutter,
+]): Gutters
+export function useGutters([top, right, bottom, left]: Gutter[]) {
+  const {activeBreakpoint} = useBreakpoints()
+  return React.useMemo(() => {
+    if (!right) {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      right = bottom = left = top
+    } else if (!bottom || !left) {
+      bottom = top
+      left = right
+    }
+
+    return {
+      paddingTop:
+        top === 0 ? undefined : gutters[top][activeBreakpoint || 'default'],
+      paddingRight:
+        right === 0 ? undefined : gutters[right][activeBreakpoint || 'default'],
+      paddingBottom:
+        bottom === 0
+          ? undefined
+          : gutters[bottom][activeBreakpoint || 'default'],
+      paddingLeft:
+        left === 0 ? undefined : gutters[left][activeBreakpoint || 'default'],
+    }
+  }, [activeBreakpoint, top, bottom, left, right])
+}