lndwn

import { useRef, useEffect } from 'react'

interface UseIntersectionObserverProps<T> {
  options: IntersectionObserverInit
  callback: IntersectionObserverCallback | null
}

export const useIntersectionObserver = <T extends HTMLElement>(
  props: UseIntersectionObserverProps<T>,
) => {

lndwn

import { useRef, useEffect } from 'react'

export const useResizeObserver = <T extends HTMLElement>(
  callback: ResizeObserverCallback,
) => {
  const ref = useRef<T | null>(null)
  useEffect(() => {
    const observer = new ResizeObserver(callback)
    if (ref.current) {
      observer.observe(ref.current)

lndwn

import * as React from 'react'
import { useMatchMedia } from './use-match-media'

export const usePrefersColorScheme = () => {
  const [prefersScheme, setPrefersScheme] = React.useState<'light' | 'dark'>(
    'light',
  )

  const handlePrefersSchemeDarkChange = (event: MediaQueryListEvent) => {
    if (event.matches) setPrefersScheme('dark')

lndwn

import * as React from 'react'

export const useMatchMedia = (
  mediaQueryString: string,
  handleChange: (e: MediaQueryListEvent) => void,
) => {
  React.useEffect(() => {
    const mqList = window.matchMedia(mediaQueryString)
    mqList.addEventListener('change', handleChange)
    const event = new window.MediaQueryListEvent('change', {

lndwn

interface ThemeSpacings {
  none: number
  xxsmall: number
  xsmall: number
  small: number
  medium: number
  large: number
  xlarge: number
  xxlarge: number
}

lndwn

interface ColorSequence {
  primary: string
  secondary?: string
  tertiary?: string
  quaternary?: string
}

interface BrandColors extends ColorSequence {}

interface ControlColors {

lndwn

export const toDate = (datestring: string): Date => {
  const options = {year: "numeric", month: "long", day: "numeric"}
  return new Date(datestring).toLocaleDateString(undefined, options)
}

lndwn

import styled from 'styled-components'

export const TextInput = styled.input(
  ({ theme }) => `
  display: block;
  width: 100%;
  box-sizing: content-box;
  height: ${theme.sizes[2]};
  padding: 2px;
  margin-left: -4px;

lndwn

#!/bin/bash

brew tap homebrew/cask-versions

brew install \
  node \
  yarn \
  zsh \
  git \
  gpg

lndwn

.defaults {
  font-feature-settings: "ss03", "cv02", "cv03", "cv04", "cv05", "cv06", "cv08", "cv09", "cv10";
}
.tabular    { font-feature-settings: "tnum"; }
.fractions  { font-feature-settings: "frac"; }
.eyebrow    { font-feature-settings: "cpsp"; }