@hzblj/kara-sx 0.0.0-stage → 0.2.0

package/lib/module/sx-to-modifiers.ios.js

@@ -0,0 +1,266 @@
+"use strict";
+
+import { aspectRatio, background, blur, brightness, clipped, clipShape, colorInvert, containerRelativeFrame, contentTransition, contrast, controlSize, fixedSize, frame, glassEffect, grayscale, hidden, hueRotation, ignoreSafeArea, layoutPriority, luminanceToAlpha, offset, opacity as opacityModifier, padding, privacySensitive, redacted, rotationEffect, saturation, scaleEffect, shadow, strokeBorder, tint, unredacted, zIndex as zIndexModifier } from '@expo/ui/swift-ui/modifiers';
+import { opacity, radii, resolvePaletteColor, resolveShadow, zIndex } from '@hzblj/kara-theme';
+import { sxPadding } from "./sx-padding.js";
+
+/**
+ * The one shape every decoration traces — clip, strokes, drop shadow and glass all take it, so the
+ * box reads as a single surface. The `full` radius token maps to a real capsule: SwiftUI's
+ * `RoundedRectangle` degenerates when the radius outgrows the box, where `Capsule` stays clean.
+ */
+
+const boxShape = sx => {
+  if (sx.borderRadius === 'full') {
+    return {
+      shape: 'capsule'
+    };
+  }
+  return sx.borderRadius ? {
+    cornerRadius: radii[sx.borderRadius],
+    shape: 'roundedRectangle'
+  } : {
+    shape: 'rectangle'
+  };
+};
+
+/**
+ * A stroke that traces the box's own shape. `.border` always draws a square, so on a rounded box the
+ * following `.clipShape` cuts its corners off — `strokeBorder` follows the shape and stays inside.
+ */
+const outline = (color, width, box) => strokeBorder({
+  color,
+  cornerRadius: box.cornerRadius,
+  shape: box.shape,
+  style: {
+    lineWidth: width
+  }
+});
+
+/**
+ * `inset` is Android-only: SwiftUI has no inner-shadow modifier, and standing in with `.glassEffect`
+ * paints a whole Liquid Glass material over the box — a washed-out plate, not a shadow.
+ */
+const shadowModifiers = (sx, theme, box) => {
+  if (!sx.shadow) {
+    return [];
+  }
+  const {
+    colors,
+    geometry
+  } = resolveShadow(theme, sx.shadow);
+  const modifiers = [];
+  if (geometry.ring && colors.ring) {
+    modifiers.push(outline(resolvePaletteColor(theme, colors.ring), geometry.ring.width, box));
+  }
+  if (geometry.drop && colors.drop) {
+    modifiers.push(shadow({
+      color: resolvePaletteColor(theme, colors.drop),
+      radius: geometry.drop.radius,
+      y: geometry.drop.y
+    }));
+  }
+  return modifiers;
+};
+
+/**
+ * The native `FrameModifier` applies either the exact `width`/`height` pair or the min/max set —
+ * never both, so one call mixing them would silently drop its min/max half. Each set therefore gets
+ * its own `frame`: the exact one first, then the flexible one for the axes left free.
+ */
+const frameModifiers = (sx, alignment) => {
+  const modifiers = [];
+  if (sx.w !== undefined || sx.h !== undefined) {
+    modifiers.push(frame({
+      alignment,
+      height: sx.h,
+      width: sx.w
+    }));
+  }
+  if (sx.wide || sx.tall || sx.minW !== undefined || sx.minH !== undefined) {
+    modifiers.push(frame({
+      alignment,
+      maxHeight: sx.tall ? Infinity : undefined,
+      maxWidth: sx.wide ? Infinity : undefined,
+      minHeight: sx.minH,
+      minWidth: sx.minW
+    }));
+  }
+  return modifiers;
+};
+
+/** Transforms and filters, which SwiftUI applies to the box after it has been laid out and painted. */
+const effectModifiers = sx => {
+  const modifiers = [];
+  if (sx.offsetX !== undefined || sx.offsetY !== undefined) {
+    modifiers.push(offset({
+      x: sx.offsetX,
+      y: sx.offsetY
+    }));
+  }
+  if (sx.rotate !== undefined) {
+    modifiers.push(rotationEffect(sx.rotate));
+  }
+  if (sx.scale !== undefined) {
+    modifiers.push(scaleEffect(typeof sx.scale === 'number' ? sx.scale : {
+      x: sx.scale.x ?? 1,
+      y: sx.scale.y ?? 1
+    }));
+  }
+  if (sx.blur !== undefined) {
+    modifiers.push(blur(sx.blur));
+  }
+  if (sx.opacity) {
+    modifiers.push(opacityModifier(opacity[sx.opacity]));
+  }
+  if (sx.zIndex) {
+    modifiers.push(zIndexModifier(zIndex[sx.zIndex]));
+  }
+  return modifiers;
+};
+const FIXED_SIZE_AXES = {
+  both: {
+    horizontal: true,
+    vertical: true
+  },
+  horizontal: {
+    horizontal: true
+  },
+  vertical: {
+    vertical: true
+  }
+};
+
+/**
+ * Liquid Glass from either form of the `glass` key. With no shape of its own, the glass follows the
+ * box's `borderRadius` — a plate that ignored the box's corners would read as a different surface.
+ */
+const glassModifier = (glass, theme, box) => {
+  const config = typeof glass === 'string' ? {
+    variant: glass
+  } : glass;
+  const followsBox = config.shape === undefined && box.shape !== 'rectangle';
+  return glassEffect({
+    cornerRadius: config.cornerRadius ?? (followsBox ? box.cornerRadius : undefined),
+    glass: {
+      interactive: config.interactive,
+      tint: config.tint === undefined ? undefined : theme.color(config.tint),
+      variant: config.variant
+    },
+    shape: followsBox ? box.shape : config.shape
+  });
+};
+
+/** The `ios` bucket: SwiftUI-only modifiers, which the Compose resolver has no counterpart for. */
+const iosModifiers = (ios, theme, box) => {
+  if (!ios) {
+    return [];
+  }
+  const modifiers = [];
+  if (ios.aspectRatio !== undefined) {
+    modifiers.push(aspectRatio({
+      contentMode: 'fit',
+      ratio: ios.aspectRatio
+    }));
+  }
+
+  // The ideal sizes live in the native frame modifier's min/max branch, so they need their own
+  // `frame` call — one with an exact width or height would never reach them.
+  if (ios.idealW !== undefined || ios.idealH !== undefined) {
+    modifiers.push(frame({
+      idealHeight: ios.idealH,
+      idealWidth: ios.idealW
+    }));
+  }
+  if (ios.containerRelativeFrame) {
+    modifiers.push(containerRelativeFrame(ios.containerRelativeFrame));
+  }
+  if (ios.ignoreSafeArea) {
+    modifiers.push(ignoreSafeArea(ios.ignoreSafeArea === true ? undefined : ios.ignoreSafeArea));
+  }
+  if (ios.glass) {
+    modifiers.push(glassModifier(ios.glass, theme, box));
+  }
+  if (ios.tint) {
+    modifiers.push(tint(theme.color(ios.tint)));
+  }
+  if (ios.controlSize) {
+    modifiers.push(controlSize(ios.controlSize));
+  }
+  if (ios.layoutPriority !== undefined) {
+    modifiers.push(layoutPriority(ios.layoutPriority));
+  }
+  if (ios.fixedSize) {
+    modifiers.push(fixedSize(FIXED_SIZE_AXES[ios.fixedSize]));
+  }
+  if (ios.clipped) {
+    modifiers.push(clipped(true));
+  }
+  if (ios.hidden) {
+    modifiers.push(hidden(true));
+  }
+  if (ios.redacted) {
+    modifiers.push(redacted(ios.redacted));
+  }
+  if (ios.unredacted) {
+    modifiers.push(unredacted());
+  }
+  if (ios.privacySensitive) {
+    modifiers.push(privacySensitive(true));
+  }
+  if (ios.saturation !== undefined) {
+    modifiers.push(saturation(ios.saturation));
+  }
+  if (ios.brightness !== undefined) {
+    modifiers.push(brightness(ios.brightness));
+  }
+  if (ios.contrast !== undefined) {
+    modifiers.push(contrast(ios.contrast));
+  }
+  if (ios.grayscale !== undefined) {
+    modifiers.push(grayscale(ios.grayscale));
+  }
+  if (ios.hueRotation !== undefined) {
+    modifiers.push(hueRotation(ios.hueRotation));
+  }
+  if (ios.colorInvert) {
+    modifiers.push(colorInvert(true));
+  }
+  if (ios.luminanceToAlpha) {
+    modifiers.push(luminanceToAlpha());
+  }
+  if (ios.contentTransition) {
+    modifiers.push(contentTransition(ios.contentTransition.type, {
+      countsDown: ios.contentTransition.countsDown
+    }));
+  }
+  if (ios.modifiers) {
+    modifiers.push(...ios.modifiers);
+  }
+  return modifiers;
+};
+export const sxToModifiers = (sx, theme, alignment = 'topLeading') => {
+  const modifiers = [];
+  const boxPadding = sxPadding(sx);
+  const box = boxShape(sx);
+  if (boxPadding) {
+    modifiers.push(padding(boxPadding));
+  }
+  modifiers.push(...frameModifiers(sx, alignment));
+  if (sx.bg) {
+    modifiers.push(background(theme.color(sx.bg)));
+  }
+
+  // Clip before the strokes and the drop shadow, so all three trace the rounded box, not its bounds.
+  if (box.shape !== 'rectangle') {
+    modifiers.push(clipShape(box.shape, box.cornerRadius));
+  }
+  if (sx.borderWidth !== undefined && sx.borderColor) {
+    modifiers.push(outline(theme.color(sx.borderColor), sx.borderWidth, box));
+  }
+  modifiers.push(...shadowModifiers(sx, theme, box));
+  modifiers.push(...effectModifiers(sx));
+  modifiers.push(...iosModifiers(sx.ios, theme, box));
+  return modifiers;
+};
+//# sourceMappingURL=sx-to-modifiers.ios.js.map

package/lib/module/sx-to-modifiers.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["aspectRatio","background","blur","brightness","clipped","clipShape","colorInvert","containerRelativeFrame","contentTransition","contrast","controlSize","fixedSize","frame","glassEffect","grayscale","hidden","hueRotation","ignoreSafeArea","layoutPriority","luminanceToAlpha","offset","opacity","opacityModifier","padding","privacySensitive","redacted","rotationEffect","saturation","scaleEffect","shadow","strokeBorder","tint","unredacted","zIndex","zIndexModifier","radii","resolvePaletteColor","resolveShadow","sxPadding","boxShape","sx","borderRadius","shape","cornerRadius","outline","color","width","box","style","lineWidth","shadowModifiers","theme","colors","geometry","modifiers","ring","push","drop","radius","y","frameModifiers","alignment","w","undefined","h","height","wide","tall","minW","minH","maxHeight","Infinity","maxWidth","minHeight","minWidth","effectModifiers","offsetX","offsetY","x","rotate","scale","FIXED_SIZE_AXES","both","horizontal","vertical","glassModifier","glass","config","variant","followsBox","interactive","iosModifiers","ios","contentMode","ratio","idealW","idealH","idealHeight","idealWidth","type","countsDown","sxToModifiers","boxPadding","bg","borderWidth","borderColor"],"sourceRoot":"../../src","sources":["sx-to-modifiers.ios.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/sx-to-style.js

@@ -0,0 +1,137 @@
+"use strict";
+
+import { opacity, radii, resolvePaletteColor, resolveShadow, zIndex } from '@hzblj/kara-theme';
+import { StyleSheet } from 'react-native';
+import { sxPadding } from "./sx-padding.js";
+
+/**
+ * React Native takes transforms as one ordered array, so — unlike the modifier paths, where each is
+ * its own entry — they have to be collected before any of them can be written to the style.
+ */
+/** React Native also accepts `transform` as a CSS string; `Extract` keeps the array form's element. */
+
+const transform = sx => {
+  const transforms = [];
+  if (sx.offsetX !== undefined) {
+    transforms.push({
+      translateX: sx.offsetX
+    });
+  }
+  if (sx.offsetY !== undefined) {
+    transforms.push({
+      translateY: sx.offsetY
+    });
+  }
+  if (sx.rotate !== undefined) {
+    transforms.push({
+      rotate: `${sx.rotate}deg`
+    });
+  }
+  if (typeof sx.scale === 'number') {
+    transforms.push({
+      scale: sx.scale
+    });
+  } else if (sx.scale !== undefined) {
+    if (sx.scale.x !== undefined) {
+      transforms.push({
+        scaleX: sx.scale.x
+      });
+    }
+    if (sx.scale.y !== undefined) {
+      transforms.push({
+        scaleY: sx.scale.y
+      });
+    }
+  }
+  return transforms.length > 0 ? transforms : undefined;
+};
+
+/**
+ * A React Native view has a single border slot, so a ring shadow rides it — an explicit
+ * `borderColor`/`borderWidth` on the same box is written later and wins, where the modifier paths
+ * draw the ring and the border as two separate strokes.
+ */
+const shadowStyle = (sx, theme) => {
+  if (!sx.shadow) {
+    return {};
+  }
+  const {
+    colors,
+    geometry
+  } = resolveShadow(theme, sx.shadow);
+  const style = {};
+  if (geometry.ring && colors.ring) {
+    style.borderColor = resolvePaletteColor(theme, colors.ring);
+    style.borderWidth = Math.max(geometry.ring.width, StyleSheet.hairlineWidth);
+  }
+  if (geometry.drop && colors.drop) {
+    style.elevation = geometry.drop.y * 2;
+    style.shadowColor = resolvePaletteColor(theme, colors.drop);
+    style.shadowOffset = {
+      height: geometry.drop.y,
+      width: 0
+    };
+    style.shadowOpacity = 1;
+    style.shadowRadius = geometry.drop.radius;
+  }
+  return style;
+};
+export const sxToStyle = (sx, theme) => {
+  const style = {
+    ...shadowStyle(sx, theme)
+  };
+  const padding = sxPadding(sx);
+  if (padding) {
+    style.paddingTop = padding.top;
+    style.paddingBottom = padding.bottom;
+    style.paddingLeft = padding.leading;
+    style.paddingRight = padding.trailing;
+  }
+  if (sx.wide) {
+    style.width = '100%';
+  }
+  if (sx.tall) {
+    style.height = '100%';
+  }
+  if (sx.w !== undefined) {
+    style.width = sx.w;
+  }
+  if (sx.h !== undefined) {
+    style.height = sx.h;
+  }
+  if (sx.minW !== undefined) {
+    style.minWidth = sx.minW;
+  }
+  if (sx.minH !== undefined) {
+    style.minHeight = sx.minH;
+  }
+  if (sx.bg) {
+    style.backgroundColor = theme.color(sx.bg);
+  }
+  if (sx.borderColor) {
+    style.borderColor = theme.color(sx.borderColor);
+  }
+  if (sx.borderWidth !== undefined) {
+    style.borderWidth = sx.borderWidth;
+  }
+  if (sx.borderRadius) {
+    style.borderRadius = radii[sx.borderRadius];
+  }
+  if (sx.opacity) {
+    style.opacity = opacity[sx.opacity];
+  }
+  if (sx.zIndex) {
+    style.zIndex = zIndex[sx.zIndex];
+  }
+  if (sx.blur !== undefined) {
+    style.filter = [{
+      blur: sx.blur
+    }];
+  }
+  const transforms = transform(sx);
+  if (transforms) {
+    style.transform = transforms;
+  }
+  return style;
+};
+//# sourceMappingURL=sx-to-style.js.map

package/lib/module/sx-to-style.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["opacity","radii","resolvePaletteColor","resolveShadow","zIndex","StyleSheet","sxPadding","transform","sx","transforms","offsetX","undefined","push","translateX","offsetY","translateY","rotate","scale","x","scaleX","y","scaleY","length","shadowStyle","theme","shadow","colors","geometry","style","ring","borderColor","borderWidth","Math","max","width","hairlineWidth","drop","elevation","shadowColor","shadowOffset","height","shadowOpacity","shadowRadius","radius","sxToStyle","padding","paddingTop","top","paddingBottom","bottom","paddingLeft","leading","paddingRight","trailing","wide","tall","w","h","minW","minWidth","minH","minHeight","bg","backgroundColor","color","borderRadius","blur","filter"],"sourceRoot":"../../src","sources":["sx-to-style.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/sx.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=sx.types.js.map

package/lib/module/sx.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["sx.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/use-sx-modifiers.android.js

@@ -0,0 +1,30 @@
+"use strict";
+
+import { useAppTheme, useBreakpoint } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
+import { flattenSx } from "./flatten-sx.js";
+import { SX_RESPONSIVE_KEYS } from "./responsive-sx.js";
+import { sxKey } from "./sx-key.js";
+import { sxToModifiers } from './sx-to-modifiers';
+
+/**
+ * `sxToModifiers` behind a `useMemo`, so a re-render hands the native view the modifier array it is
+ * already holding instead of an equal-but-new one to diff.
+ *
+ * The responsive flattening happens before `sxKey`, so the key describes the values actually applied
+ * at this breakpoint — a rotation to a wider window changes it, and nothing else does.
+ *
+ * `android.modifiers` is depended on by identity, because `sxKey` cannot flatten opaque modifier
+ * configs into a string. A call site that builds that array inline therefore re-resolves every render.
+ */
+export const useSxModifiers = (sx, alignment) => {
+  const theme = useAppTheme();
+  const breakpoint = useBreakpoint();
+  const flat = flattenSx(sx, SX_RESPONSIVE_KEYS, breakpoint);
+  const key = sxKey(flat);
+  const escapeHatch = sx.android?.modifiers;
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `key` stands in for `flat` — see `sxKey`
+  return useMemo(() => sxToModifiers(flat, theme, alignment), [alignment, escapeHatch, key, theme]);
+};
+//# sourceMappingURL=use-sx-modifiers.android.js.map

package/lib/module/use-sx-modifiers.android.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useAppTheme","useBreakpoint","useMemo","flattenSx","SX_RESPONSIVE_KEYS","sxKey","sxToModifiers","useSxModifiers","sx","alignment","theme","breakpoint","flat","key","escapeHatch","android","modifiers"],"sourceRoot":"../../src","sources":["use-sx-modifiers.android.ts"],"mappings":";;AACA,SAAQA,WAAW,EAAEC,aAAa,QAAO,mBAAmB;AAC5D,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,SAAS,QAAO,iBAAc;AACtC,SAAiDC,kBAAkB,QAAO,oBAAiB;AAE3F,SAAQC,KAAK,QAAO,aAAU;AAC9B,SAAQC,aAAa,QAAO,mBAAmB;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAGA,CAACC,EAAgB,EAAEC,SAA0B,KAAuB;EAChG,MAAMC,KAAK,GAAGV,WAAW,CAAC,CAAC;EAC3B,MAAMW,UAAU,GAAGV,aAAa,CAAC,CAAC;EAClC,MAAMW,IAAI,GAAGT,SAAS,CAAsBK,EAAE,EAAEJ,kBAAkB,EAAEO,UAAU,CAAC;EAC/E,MAAME,GAAG,GAAGR,KAAK,CAACO,IAAI,CAAC;EACvB,MAAME,WAAW,GAAGN,EAAE,CAACO,OAAO,EAAEC,SAAS;;EAEzC;EACA,OAAOd,OAAO,CAAC,MAAMI,aAAa,CAACM,IAAI,EAAEF,KAAK,EAAED,SAAS,CAAC,EAAE,CAACA,SAAS,EAAEK,WAAW,EAAED,GAAG,EAAEH,KAAK,CAAC,CAAC;AACnG,CAAC","ignoreList":[]}

package/lib/module/use-sx-modifiers.ios.js

@@ -0,0 +1,30 @@
+"use strict";
+
+import { useAppTheme, useBreakpoint } from '@hzblj/kara-theme';
+import { useMemo } from 'react';
+import { flattenSx } from "./flatten-sx.js";
+import { SX_RESPONSIVE_KEYS } from "./responsive-sx.js";
+import { sxKey } from "./sx-key.js";
+import { sxToModifiers } from './sx-to-modifiers';
+
+/**
+ * `sxToModifiers` behind a `useMemo`, so a re-render hands the native view the modifier array it is
+ * already holding instead of an equal-but-new one to diff.
+ *
+ * The responsive flattening happens before `sxKey`, so the key describes the values actually applied
+ * at this breakpoint — a rotation to a wider window changes it, and nothing else does.
+ *
+ * `ios.modifiers` is depended on by identity, because `sxKey` cannot flatten opaque modifier configs
+ * into a string. A call site that builds that array inline therefore re-resolves every render.
+ */
+export const useSxModifiers = (sx, alignment) => {
+  const theme = useAppTheme();
+  const breakpoint = useBreakpoint();
+  const flat = flattenSx(sx, SX_RESPONSIVE_KEYS, breakpoint);
+  const key = sxKey(flat);
+  const escapeHatch = sx.ios?.modifiers;
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `key` stands in for `flat` — see `sxKey`
+  return useMemo(() => sxToModifiers(flat, theme, alignment), [alignment, escapeHatch, key, theme]);
+};
+//# sourceMappingURL=use-sx-modifiers.ios.js.map

package/lib/module/use-sx-modifiers.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useAppTheme","useBreakpoint","useMemo","flattenSx","SX_RESPONSIVE_KEYS","sxKey","sxToModifiers","useSxModifiers","sx","alignment","theme","breakpoint","flat","key","escapeHatch","ios","modifiers"],"sourceRoot":"../../src","sources":["use-sx-modifiers.ios.ts"],"mappings":";;AACA,SAAQA,WAAW,EAAEC,aAAa,QAAO,mBAAmB;AAC5D,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,SAAS,QAAO,iBAAc;AACtC,SAAiDC,kBAAkB,QAAO,oBAAiB;AAE3F,SAAQC,KAAK,QAAO,aAAU;AAC9B,SAAQC,aAAa,QAAO,mBAAmB;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAGA,CAACC,EAAgB,EAAEC,SAA0B,KAAuB;EAChG,MAAMC,KAAK,GAAGV,WAAW,CAAC,CAAC;EAC3B,MAAMW,UAAU,GAAGV,aAAa,CAAC,CAAC;EAClC,MAAMW,IAAI,GAAGT,SAAS,CAAsBK,EAAE,EAAEJ,kBAAkB,EAAEO,UAAU,CAAC;EAC/E,MAAME,GAAG,GAAGR,KAAK,CAACO,IAAI,CAAC;EACvB,MAAME,WAAW,GAAGN,EAAE,CAACO,GAAG,EAAEC,SAAS;;EAErC;EACA,OAAOd,OAAO,CAAC,MAAMI,aAAa,CAACM,IAAI,EAAEF,KAAK,EAAED,SAAS,CAAC,EAAE,CAACA,SAAS,EAAEK,WAAW,EAAED,GAAG,EAAEH,KAAK,CAAC,CAAC;AACnG,CAAC","ignoreList":[]}

package/lib/module/use-sx.js

@@ -0,0 +1,30 @@
+"use strict";
+
+import { useAppTheme, useBreakpoint } from '@hzblj/kara-theme';
+import { flattenSx } from "./flatten-sx.js";
+import { VIEW_RESPONSIVE_KEYS } from "./responsive-sx.js";
+import { viewSxCache } from "./view-sx-to-style.js";
+
+/**
+ * Resolves an `sx` object into a React Native style. Needs no `useMemo`: the cache keys on the
+ * flattened sx values, so the same sx at the same breakpoint hands back the very same object every
+ * render — and across components.
+ */
+export const useSx = sx => {
+  const theme = useAppTheme();
+  const breakpoint = useBreakpoint();
+  return viewSxCache.resolve(flattenSx(sx, VIEW_RESPONSIVE_KEYS, breakpoint), theme);
+};
+
+/**
+ * `useSx` for a component whose own props arrive mixed in with the `sx` ones: the `sx` keys are split
+ * off and resolved, and the rest is handed back untouched. What `sx()` does internally, exposed for the
+ * components that cannot be built on it because they own their `style` prop — an animated one, or a
+ * `ScrollView` styling two boxes at once.
+ */
+export const useSplitSx = props => {
+  const [own, rest] = viewSxCache.split(props);
+  const style = useSx(own);
+  return [style, rest];
+};
+//# sourceMappingURL=use-sx.js.map

package/lib/module/use-sx.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useAppTheme","useBreakpoint","flattenSx","VIEW_RESPONSIVE_KEYS","viewSxCache","useSx","sx","theme","breakpoint","resolve","useSplitSx","props","own","rest","split","style"],"sourceRoot":"../../src","sources":["use-sx.ts"],"mappings":";;AAAA,SAAQA,WAAW,EAAEC,aAAa,QAAO,mBAAmB;AAG5D,SAAQC,SAAS,QAAO,iBAAc;AACtC,SAAyDC,oBAAoB,QAAO,oBAAiB;AAErG,SAAQC,WAAW,QAAO,uBAAoB;;AAE9C;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,KAAK,GAAIC,EAAoB,IAAgB;EACxD,MAAMC,KAAK,GAAGP,WAAW,CAAC,CAAC;EAC3B,MAAMQ,UAAU,GAAGP,aAAa,CAAC,CAAC;EAElC,OAAOG,WAAW,CAACK,OAAO,CAACP,SAAS,CAA8BI,EAAE,EAAEH,oBAAoB,EAAEK,UAAU,CAAC,EAAED,KAAK,CAAC;AACjH,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,UAAU,GACrBC,KAAa,IAC4B;EACzC,MAAM,CAACC,GAAG,EAAEC,IAAI,CAAC,GAAGT,WAAW,CAACU,KAAK,CAACH,KAAK,CAAC;EAC5C,MAAMI,KAAK,GAAGV,KAAK,CAACO,GAAG,CAAC;EAExB,OAAO,CAACG,KAAK,EAAEF,IAAI,CAAC;AACtB,CAAC","ignoreList":[]}

package/lib/module/value-key.js

@@ -0,0 +1,16 @@
+"use strict";
+
+/**
+ * Flattens a value into a cache-key fragment. Objects are walked one level — with keys sorted, so
+ * two configs holding the same values key alike — rather than left to `String`, which turns every
+ * object into the same `[object Object]` and would have two different ones share a cache entry.
+ * One level is all the `Bucket` constraint admits, so deeper nesting cannot reach this.
+ */
+export const valueKey = value => {
+  if (typeof value !== 'object' || value === null) {
+    return String(value);
+  }
+  const entries = value;
+  return `{${Object.keys(entries).sort().map(name => `${name}:${String(entries[name])}`).join(',')}}`;
+};
+//# sourceMappingURL=value-key.js.map

package/lib/module/value-key.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["valueKey","value","String","entries","Object","keys","sort","map","name","join"],"sourceRoot":"../../src","sources":["value-key.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,QAAQ,GAAIC,KAAc,IAAa;EAClD,IAAI,OAAOA,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,IAAI,EAAE;IAC/C,OAAOC,MAAM,CAACD,KAAK,CAAC;EACtB;EAEA,MAAME,OAAO,GAAGF,KAAgC;EAEhD,OAAO,IAAIG,MAAM,CAACC,IAAI,CAACF,OAAO,CAAC,CAC5BG,IAAI,CAAC,CAAC,CACNC,GAAG,CAACC,IAAI,IAAI,GAAGA,IAAI,IAAIN,MAAM,CAACC,OAAO,CAACK,IAAI,CAAC,CAAC,EAAE,CAAC,CAC/CC,IAAI,CAAC,GAAG,CAAC,GAAG;AACjB,CAAC","ignoreList":[]}