@hzblj/kara-sx 0.0.0-stage → 0.1.0

package/lib/typescript/view-sx-to-style.d.ts

@@ -0,0 +1,17 @@
+import { type Theme } from '@hzblj/kara-theme';
+import type { ViewStyle } from 'react-native';
+import type { ResponsiveViewSx } from './responsive-sx';
+import type { ViewSx } from './view-sx.types';
+/**
+ * Every key the RN style engine owns — what `sx()` and `useSx` split off a component's props. Built
+ * from `SX_CORE_KEYS` rather than `SX_KEYS` on purpose: including the `ios`/`android` buckets would
+ * have `Box` strip them off its props and drop them, since a React Native style has nothing to
+ * resolve them into.
+ */
+export declare const VIEW_SX_KEYS: readonly (keyof ViewSx & string)[];
+export declare const viewSxToStyle: (sx: ViewSx, theme: Theme) => ViewStyle;
+/**
+ * `split` hands back a `ResponsiveViewSx`, because that is what a component's props hold — `resolve`
+ * only accepts the flat `ViewSx` that `flattenSx` turns those into, so the two cannot be crossed.
+ */
+export declare const viewSxCache: import("./resolve-cache").SxCache<ViewSx, ViewStyle, ResponsiveViewSx>;

package/lib/typescript/view-sx.types.d.ts

@@ -0,0 +1,80 @@
+import type { RadiiSize, SpaceSize } from '@hzblj/kara-theme';
+import type { ViewStyle } from 'react-native';
+import type { StyleSx, SxDimension } from './sx.types';
+/**
+ * Corner radii cascade the way padding does: a single corner beats its edge pair,
+ * which beats `borderRadius`. So `borderRadius="medium" borderBottomRadius="none"`
+ * rounds the top two corners only.
+ *
+ * Exported so `CORNER_KEYS` can be held to exactly these keys.
+ */
+export type ViewRadiiSx = {
+    borderBottomLeftRadius?: RadiiSize;
+    borderBottomRadius?: RadiiSize;
+    borderBottomRightRadius?: RadiiSize;
+    borderLeftRadius?: RadiiSize;
+    borderRightRadius?: RadiiSize;
+    borderTopLeftRadius?: RadiiSize;
+    borderTopRadius?: RadiiSize;
+    borderTopRightRadius?: RadiiSize;
+};
+/** Per-side widths draw only the edges you name — a one-sided hairline divider needs just one. */
+type ViewBorderSx = {
+    borderBottomWidth?: number;
+    borderLeftWidth?: number;
+    borderRightWidth?: number;
+    borderStyle?: ViewStyle['borderStyle'];
+    borderTopWidth?: number;
+};
+/** `minW`/`minH` live in `StyleSx` — every target can express those, so they are not view-only. */
+type ViewSizingSx = {
+    aspectRatio?: number;
+    maxH?: SxDimension;
+    maxW?: SxDimension;
+};
+/**
+ * `grow` is deliberately React Native only. Compose's `weight` is the same proportional share of the
+ * leftover space, but SwiftUI has no per-child weight at all — its nearest move is an infinite `maxWidth`,
+ * which splits the space equally and ignores the ratio. So the modifier paths expose it as
+ * `android={{weight}}` and `ios={{layoutPriority}}`, which is what each of them actually does.
+ */
+type ViewFlexSx = {
+    align?: ViewStyle['alignItems'];
+    alignContent?: ViewStyle['alignContent'];
+    alignSelf?: ViewStyle['alignSelf'];
+    basis?: SxDimension;
+    columnGap?: SpaceSize;
+    flex?: number;
+    flexDirection?: ViewStyle['flexDirection'];
+    gap?: SpaceSize;
+    grow?: number;
+    justify?: ViewStyle['justifyContent'];
+    rowGap?: SpaceSize;
+    shrink?: number;
+    wrap?: ViewStyle['flexWrap'];
+};
+/** Margins mirror the padding scale: `m` all round, `mx`/`my` per axis, `mt`/`mr`/`mb`/`ml` per side. */
+type ViewMarginSx = {
+    m?: SpaceSize;
+    mb?: SpaceSize;
+    ml?: SpaceSize;
+    mr?: SpaceSize;
+    mt?: SpaceSize;
+    mx?: SpaceSize;
+    my?: SpaceSize;
+};
+type ViewLayoutSx = {
+    bottom?: SxDimension;
+    display?: ViewStyle['display'];
+    left?: SxDimension;
+    overflow?: ViewStyle['overflow'];
+    position?: ViewStyle['position'];
+    right?: SxDimension;
+    top?: SxDimension;
+};
+/**
+ * The widest `sx` surface: everything a React Native view can be styled with. `Sx` is the subset the
+ * SwiftUI and Compose modifier paths can also express, so only this one reaches the RN style engine.
+ */
+export type ViewSx = StyleSx & ViewBorderSx & ViewFlexSx & ViewLayoutSx & ViewMarginSx & ViewRadiiSx & ViewSizingSx;
+export {};

package/lib/typescript/with-sx.d.ts

@@ -0,0 +1,28 @@
+import { type ComponentPropsWithRef, type ElementType } from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { ResponsiveViewSx } from './responsive-sx';
+/**
+ * `sx()` resolves a view style; React Native's text and image styles accept those keys too, so this
+ * covers every flavour of `style` a wrapped component might declare.
+ */
+type SxStyle = StyleProp<TextStyle | ViewStyle>;
+/** The wrapped component's own props — ref included — with the whole `sx` surface added. */
+export type SxProps<TProps> = Omit<TProps, 'style' | keyof ResponsiveViewSx> & ResponsiveViewSx & {
+    style?: SxStyle;
+};
+/**
+ * Turns any style-taking component into an `sx` one: the `sx` props are split off, resolved against
+ * the theme and handed over as `style`. An explicit `style` still wins — it is merged on top.
+ *
+ * Props come from `ComponentPropsWithRef`, so a `ref` survives the wrapping. The component has to
+ * accept a `style`; that cannot be a constraint here, because narrowing `TComponent` past
+ * `ElementType` is what breaks the ref inference.
+ *
+ * Memoised because the point of the cache is a stable style object — without `memo` a parent
+ * re-render would walk the child anyway and throw that stability away.
+ */
+export declare const sx: <TComponent extends ElementType>(Component: TComponent) => import("react").MemoExoticComponent<{
+    ({ style, ...props }: SxProps<ComponentPropsWithRef<TComponent>>): import("react").JSX.Element;
+    displayName: string;
+}>;
+export {};

package/package.json

@@ -1,6 +1,80 @@
 {
   "name": "@hzblj/kara-sx",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "The token-typed sx styling engine behind @hzblj/kara-ui: one surface resolved into SwiftUI modifiers, Compose modifiers or a React Native style.",
+  "author": "Jan Blazej",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hzblj/kara-ui.git",
+    "directory": "packages/sx"
+  },
+  "bugs": {
+    "url": "https://github.com/hzblj/kara-ui/issues"
+  },
+  "homepage": "https://github.com/hzblj/kara-ui/tree/main/packages/sx#readme",
+  "keywords": [
+    "react-native",
+    "expo",
+    "kara-ui"
+  ],
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./lib/typescript/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/*.stories.tsx",
+    "!**/contract.check.ts",
+    "!**/story-decorators.tsx",
+    "!**/__tests__"
+  ],
+  "scripts": {
+    "build": "bob build && tsc -p ./tsconfig.build.json && node ../../scripts/fallback-declarations.mjs",
+    "clean": "rm -rf lib",
+    "prepack": "yarn run -T turbo run build --filter=$npm_package_name...",
+    "lint": "yarn run -T concurrently \"yarn biome:check\" \"yarn tsc:check\"",
+    "lint:fix": "yarn run -T biome check --write .",
+    "biome:check": "yarn run -T biome check .",
+    "tsc:check": "yarn run -T concurrently \"tsc -p ./tsconfig.ios.json\" \"tsc -p ./tsconfig.android.json\""
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "exclude": "{**/__tests__/**,**/__fixtures__/**,**/__mocks__/**,**/*.stories.tsx,**/contract.check.ts,**/story-decorators.tsx}",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "@hzblj/kara-theme": "^0.1.0"
+  },
+  "peerDependencies": {
+    "@expo/ui": "~57.0.0",
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@expo/ui": "~57.0.18",
+    "@types/react": "~19.2.18",
+    "react": "19.2.3",
+    "react-native": "0.86.3",
+    "react-native-builder-bob": "^0.43.0",
+    "typescript": "~7.0.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/src/flatten-sx.ts

@@ -0,0 +1,70 @@
+import {type ActiveBreakpoint, BREAKPOINT_ORDER, type Breakpoint} from '@hzblj/kara-theme'
+
+import type {ResponsiveOf} from './responsive.types'
+
+/** The runtime shape of a `Responsive` object — what `isResponsive` narrows an `sx` value to. */
+type ResponsiveValue = {base: unknown} & Partial<Record<Breakpoint, unknown>>
+
+/**
+ * No responsive-capable key takes an object value — each one is a token, a dimension, a number or a
+ * boolean — so `base` being present identifies a per-breakpoint value outright, with nothing it could
+ * be confused for. That is exactly why the visual keys stay scalar: `scale` and the platform buckets
+ * *are* objects, and admitting them would make this test ambiguous.
+ */
+const isResponsive = (value: unknown): value is ResponsiveValue =>
+  typeof value === 'object' && value !== null && 'base' in value
+
+/** Mobile-first: the widest breakpoint declared at or below the active one, falling back to `base`. */
+const valueAt = (value: ResponsiveValue, active: ActiveBreakpoint): unknown => {
+  let resolved = value.base
+
+  if (active === 'base') {
+    return resolved
+  }
+
+  for (const name of BREAKPOINT_ORDER) {
+    const declared = value[name]
+
+    if (declared !== undefined) {
+      resolved = declared
+    }
+
+    if (name === active) {
+      break
+    }
+  }
+
+  return resolved
+}
+
+/**
+ * Collapses a responsive `sx` into the flat one the active breakpoint asks for.
+ *
+ * Deliberately upstream of the caches rather than inside them: `resolve-cache` and `sxKey` only ever
+ * see flat values, so neither their one-level key flattening nor their key space has to grow a
+ * breakpoint dimension — and two devices that land on the same flat `sx` still share its entry. A
+ * breakpoint folded into the cache key instead would have doubled the entries for every `sx` in the
+ * app, responsive or not.
+ *
+ * Hands back the very object it was given when nothing in it is responsive, which is the overwhelming
+ * case: `sx()` wraps every view, and those call sites paying nothing is what keeps it affordable.
+ */
+export const flattenSx = <TSx extends object, TKey extends keyof TSx & string>(
+  sx: ResponsiveOf<TSx, TKey>,
+  keys: readonly TKey[],
+  active: ActiveBreakpoint
+): TSx => {
+  const source = sx as Record<string, unknown>
+  let flattened: Record<string, unknown> | undefined
+
+  for (const name of keys) {
+    const value = source[name]
+
+    if (isResponsive(value)) {
+      flattened ??= {...source}
+      flattened[name] = valueAt(value, active)
+    }
+  }
+
+  return (flattened ?? source) as TSx
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+export * from './flatten-sx'
+export * from './resolve-cache'
+export * from './responsive.types'
+export * from './responsive-sx'
+export * from './sx.types'
+export * from './sx-key'
+export * from './sx-keys'
+export * from './sx-padding'
+export * from './sx-to-modifiers'
+export * from './sx-to-style'
+export * from './use-sx'
+export * from './use-sx-modifiers'
+export * from './value-key'
+export * from './view-sx.types'
+export * from './view-sx-to-style'
+export * from './with-sx'

package/src/resolve-cache.ts

@@ -0,0 +1,105 @@
+import type {Theme} from '@hzblj/kara-theme'
+
+import {valueKey} from './value-key'
+
+type StyleResolver<TProps, TStyle> = (props: TProps, theme: Theme) => TStyle
+
+/**
+ * `resolve` takes `TProps`, `split` hands back `TInput`. The same surface, except that props reach
+ * `split` straight off a component with responsive values still in them, and reach `resolve` only once
+ * `flattenSx` has collapsed those — so a caller who splits has to flatten before it can resolve.
+ * Defaults to `TProps`, for a cache whose surface has nothing responsive in it.
+ */
+export type SxCache<TProps, TStyle, TInput = TProps> = {
+  resolve: (props: TProps, theme: Theme) => TStyle
+  split: <T extends Record<string, unknown>>(props: T) => [TInput, Record<string, unknown>]
+}
+
+/**
+ * Token-typed values keep the key space small, but `sx` also takes free-form numbers — an `sx`
+ * driven per frame would otherwise grow the map for the life of the app. Past the cap the whole map
+ * resets: re-resolving is cheap, and an LRU would tax every hit to soften a rare misuse.
+ */
+const MAX_CACHE_ENTRIES = 1024
+
+const identities = new WeakMap<object, string>()
+
+let nextIdentity = 0
+
+/**
+ * The variant alone does not identify a theme's colours. On Android the palette resolver closes over a Material
+ * scheme generated at runtime, which can change while the variant stays put — a new seed, or a wallpaper change on
+ * Android 12+ — and on both platforms the app's own overrides decide what a token's hex is. Keying on the identity of
+ * the resolver *and* of the palette is what stops a resolved style outliving the colours it was built from. Both are
+ * memoised by the provider, so a steady theme costs one entry each.
+ */
+const identity = (value: object): string => {
+  const existing = identities.get(value)
+
+  if (existing) {
+    return existing
+  }
+
+  nextIdentity += 1
+
+  const id = `#${nextIdentity}`
+  identities.set(value, id)
+
+  return id
+}
+
+export const createSxCache = <TProps extends Record<string, unknown>, TStyle, TInput = TProps>(
+  keys: readonly (keyof TProps & string)[],
+  resolver: StyleResolver<TProps, TStyle>
+): SxCache<TProps, TStyle, TInput> => {
+  const cache = new Map<string, TStyle>()
+  const keySet = new Set<string>(keys)
+
+  const cacheKey = (props: TProps, theme: Theme) => {
+    let key = `${theme.dark ? 'd' : 'l'}${identity(theme.resolver)}${identity(theme.palette)}`
+
+    for (const name of keys) {
+      const value = props[name]
+
+      if (value !== undefined) {
+        key += `|${name}:${valueKey(value)}`
+      }
+    }
+
+    return key
+  }
+
+  return {
+    resolve: (props, theme) => {
+      const key = cacheKey(props, theme)
+      const cached = cache.get(key)
+
+      if (cached) {
+        return cached
+      }
+
+      if (cache.size >= MAX_CACHE_ENTRIES) {
+        cache.clear()
+      }
+
+      const style = resolver(props, theme)
+      cache.set(key, style)
+
+      return style
+    },
+    split: props => {
+      const owned: Record<string, unknown> = {}
+      const rest: Record<string, unknown> = {}
+
+      for (const name of Object.keys(props)) {
+        if (keySet.has(name)) {
+          owned[name] = props[name]
+        } else {
+          rest[name] = props[name]
+        }
+      }
+
+      return [owned as TInput, rest]
+    },
+  }
+}

package/src/responsive-sx.ts

@@ -0,0 +1,75 @@
+import type {ResponsiveOf} from './responsive.types'
+import type {Sx, SxCore} from './sx.types'
+import type {ViewSx} from './view-sx.types'
+
+/**
+ * Layout keys only, and deliberately so: a wider screen wants a different gap, padding or column
+ * count — not a different colour. `bg`, `shadow`, the radii, `opacity`, the transforms and both
+ * platform buckets therefore stay scalar. Every key admitted here is one more that `flattenSx` walks
+ * on every render, for a kind of change a design system should not be making anyway.
+ *
+ * `Partial` because this is a subset by design; what the `satisfies` buys is the other direction — a
+ * key renamed in `SxCore` stops compiling here instead of silently going non-responsive.
+ */
+const SX_RESPONSIVE_KEY_RECORD = {
+  h: true,
+  minH: true,
+  minW: true,
+  p: true,
+  pb: true,
+  pl: true,
+  pr: true,
+  pt: true,
+  px: true,
+  py: true,
+  tall: true,
+  w: true,
+  wide: true,
+} as const satisfies Partial<Record<keyof SxCore, true>>
+
+export type ResponsiveSxKey = keyof typeof SX_RESPONSIVE_KEY_RECORD
+
+/** What `useSxModifiers` flattens before the SwiftUI and Compose paths see it. */
+export const SX_RESPONSIVE_KEYS = Object.keys(SX_RESPONSIVE_KEY_RECORD) as readonly ResponsiveSxKey[]
+
+/** The core keys plus what only the React Native style path has: margins, gaps, flex, sizing maxima. */
+const VIEW_RESPONSIVE_KEY_RECORD = {
+  ...SX_RESPONSIVE_KEY_RECORD,
+  align: true,
+  alignContent: true,
+  alignSelf: true,
+  basis: true,
+  columnGap: true,
+  display: true,
+  flex: true,
+  flexDirection: true,
+  gap: true,
+  grow: true,
+  justify: true,
+  m: true,
+  maxH: true,
+  maxW: true,
+  mb: true,
+  ml: true,
+  mr: true,
+  mt: true,
+  mx: true,
+  my: true,
+  rowGap: true,
+  shrink: true,
+  wrap: true,
+} as const satisfies Partial<Record<keyof ViewSx, true>>
+
+export type ResponsiveViewSxKey = keyof typeof VIEW_RESPONSIVE_KEY_RECORD
+
+/** What `useSx` flattens before the style cache sees it. */
+export const VIEW_RESPONSIVE_KEYS = Object.keys(VIEW_RESPONSIVE_KEY_RECORD) as readonly ResponsiveViewSxKey[]
+
+/**
+ * The native modifier surface as a component takes it — `Sx` is the same surface once a breakpoint
+ * has been picked, which is what every resolver and cache downstream of `flattenSx` works with.
+ */
+export type ResponsiveSx = ResponsiveOf<Sx, ResponsiveSxKey>
+
+/** `ViewSx` as a component takes it, standing to it as `ResponsiveSx` does to `Sx`. */
+export type ResponsiveViewSx = ResponsiveOf<ViewSx, ResponsiveViewSxKey>

package/src/responsive.types.ts

@@ -0,0 +1,23 @@
+import type {Breakpoint} from '@hzblj/kara-theme'
+
+/**
+ * A value that may differ per breakpoint: the plain value, or one keyed by breakpoint.
+ *
+ * `base` is mandatory. Partly because the cascade needs a floor to fall back to, and partly because
+ * an `sx` that applies nothing on the narrowest phone is a bug rather than a style.
+ *
+ * The cascade runs mobile-first — a breakpoint holds until a wider one overrides it. So
+ * `{base: 's8', md: 's16'}` pads by 8 below `md` and by 16 from `md` up, `lg` and `xl` included.
+ */
+export type Responsive<TValue> = TValue | ({base: TValue} & Partial<Record<Breakpoint, TValue>>)
+
+/**
+ * Widens the named keys of a flat `sx` surface to `Responsive`, leaving the rest alone.
+ *
+ * A transform over the flat type rather than a hand-written twin, so a key added to `Sx` or `ViewSx`
+ * needs no second edit here — and `NonNullable`, so the optionality stays on the prop and cannot
+ * sneak into `base`, which would defeat the point of requiring it.
+ */
+export type ResponsiveOf<TSx, TKey extends keyof TSx> = Omit<TSx, TKey> & {
+  [K in TKey]?: Responsive<NonNullable<TSx[K]>>
+}

package/src/sx-key.ts

@@ -0,0 +1,32 @@
+import type {Sx} from './sx.types'
+import {SX_BUCKET_KEYS, SX_CORE_KEYS} from './sx-keys'
+import {valueKey} from './value-key'
+
+/**
+ * Keys sorted, because two buckets holding the same values can list them in a different order and
+ * still have to key alike. Object configs flatten through `valueKey`, one level — which is all the
+ * `Bucket` constraint admits. `modifiers` is skipped: it holds opaque configs, so no string stands
+ * in for it — `useSxModifiers` depends on that array itself alongside this key.
+ */
+const bucketKey = (bucket: Record<string, unknown> | undefined): string => {
+  if (!bucket) {
+    return ''
+  }
+
+  return Object.keys(bucket)
+    .filter(name => name !== 'modifiers')
+    .sort()
+    .map(name => `${name}:${valueKey(bucket[name])}`)
+    .join(',')
+}
+
+/**
+ * A stable `useMemo` dependency for an `Sx`. Atoms take theirs from a rest spread, so the object is
+ * a fresh identity on every render even when nothing in it changed — the values flattened into one
+ * string say exactly as much as the object does.
+ */
+export const sxKey = (sx: Sx): string =>
+  [
+    ...SX_CORE_KEYS.map(name => (sx[name] === undefined ? '' : valueKey(sx[name]))),
+    ...SX_BUCKET_KEYS.map(name => bucketKey(sx[name])),
+  ].join('|')

package/src/sx-keys.ts

@@ -0,0 +1,47 @@
+import type {Sx, SxCore} from './sx.types'
+
+/**
+ * A `Record` rather than a bare array, because `satisfies` on an array only checks membership —
+ * here the compiler holds the list to `SxCore` in both directions, so a key added to the type but
+ * missing from this list (which `split` would then leak into `rest`) refuses to compile.
+ */
+const SX_CORE_KEY_RECORD = {
+  bg: true,
+  blur: true,
+  borderColor: true,
+  borderRadius: true,
+  borderWidth: true,
+  h: true,
+  minH: true,
+  minW: true,
+  offsetX: true,
+  offsetY: true,
+  opacity: true,
+  p: true,
+  pb: true,
+  pl: true,
+  pr: true,
+  pt: true,
+  px: true,
+  py: true,
+  rotate: true,
+  scale: true,
+  shadow: true,
+  tall: true,
+  w: true,
+  wide: true,
+  zIndex: true,
+} as const satisfies Record<keyof SxCore, true>
+
+/** The keys every target shares. The React Native style path takes these and none of the buckets. */
+export const SX_CORE_KEYS = Object.keys(SX_CORE_KEY_RECORD) as readonly (keyof SxCore)[]
+
+const SX_BUCKET_KEY_RECORD = {
+  android: true,
+  ios: true,
+} as const satisfies Record<Exclude<keyof Sx, keyof SxCore>, true>
+
+/** Kept apart from `SX_CORE_KEYS` so the React Native path can take the core without them. */
+export const SX_BUCKET_KEYS = Object.keys(SX_BUCKET_KEY_RECORD) as readonly Exclude<keyof Sx, keyof SxCore>[]
+
+export const SX_KEYS: readonly (keyof Sx)[] = [...SX_CORE_KEYS, ...SX_BUCKET_KEYS]

package/src/sx-padding.ts

@@ -0,0 +1,27 @@
+import {spacing} from '@hzblj/kara-theme'
+
+import type {Sx, SxPadding} from './sx.types'
+
+const size = (token: SpaceKey | undefined) => (token === undefined ? undefined : spacing[token])
+
+type SpaceKey = NonNullable<Sx['p']>
+
+/** Padding is all this reads, so both `Sx` and the widened `StyleSx` satisfy it. */
+type SxPaddingInput = Pick<Sx, 'p' | 'pb' | 'pl' | 'pr' | 'pt' | 'px' | 'py'>
+
+export const sxPadding = (sx: SxPaddingInput): SxPadding | undefined => {
+  const all = size(sx.p)
+  const horizontal = size(sx.px)
+  const vertical = size(sx.py)
+
+  const top = size(sx.pt) ?? vertical ?? all
+  const bottom = size(sx.pb) ?? vertical ?? all
+  const leading = size(sx.pl) ?? horizontal ?? all
+  const trailing = size(sx.pr) ?? horizontal ?? all
+
+  if (top === undefined && bottom === undefined && leading === undefined && trailing === undefined) {
+    return undefined
+  }
+
+  return {bottom, leading, top, trailing}
+}