@webority/mobile-ui 0.0.0-stage → 0.0.34

package/lib/module/utils/color.js

@@ -0,0 +1,52 @@
+"use strict";
+
+/**
+ * The tint a pressed control paints over a fill in one of the theme's accent
+ * colours (primary, success, warning, error). The theme's own
+ * `surface.pressed` is meant for its surfaces: a dark wash in the light
+ * theme and a WHITE wash in the dark theme, which on a coloured fill reads
+ * as the control flashing white. A coloured fill darkens on press in either
+ * theme, so this is fixed rather than themed.
+ */
+export const ACCENT_PRESSED_TINT = 'rgba(0, 0, 0, 0.12)';
+
+/**
+ * `#RRGGBB` → `#RRGGBBAA`: a tone colour at the given opacity, for a tinted
+ * fill behind text drawn in the full tone. Non-hex colours (named, `rgb()`,
+ * short or 8-digit hex) can't be suffixed; those return `fallback`, which a
+ * caller sets to the nearest flat theme surface.
+ */
+export const tintOf = (color, opacity, fallback) => {
+  const hex = /^#([0-9a-f]{6})$/i.exec(color);
+  if (!hex) {
+    return fallback;
+  }
+  const alpha = Math.round(opacity * 255).toString(16).padStart(2, '0');
+  return `#${hex[1]}${alpha}`;
+};
+const channelsOf = color => {
+  const hex = /^#([0-9a-f]{6})$/i.exec(color);
+  if (!hex) {
+    return null;
+  }
+  const n = Number.parseInt(hex[1], 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+};
+
+/**
+ * The OPAQUE colour of `color` at `opacity` laid over `over`: what `tintOf`
+ * would look like on that surface, as a flat `#RRGGBB`. For a tint that sits
+ * on something it must hide (a badge over a photo), where a translucent tint
+ * would let the photo through. Either colour not a 6-digit hex returns
+ * `fallback`.
+ */
+export const blendOf = (color, opacity, over, fallback) => {
+  const top = channelsOf(color);
+  const base = channelsOf(over);
+  if (!top || !base) {
+    return fallback;
+  }
+  const mix = top.map((c, i) => Math.round(c * opacity + base[i] * (1 - opacity)));
+  return `#${mix.map(c => c.toString(16).padStart(2, '0')).join('')}`.toUpperCase();
+};
+//# sourceMappingURL=color.js.map

package/lib/module/utils/corners.js

@@ -0,0 +1,18 @@
+"use strict";
+
+/**
+ * The smooth "squircle" corner, the app-side counterpart of the website's CSS
+ * `corner-shape: squircle`. Spread it next to any `borderRadius`.
+ *
+ * iOS draws Apple's continuous curve through React Native's own
+ * `borderCurve: 'continuous'`; no dependency. Android has no equivalent and
+ * ignores the key, so it keeps the circular corner (a deliberate decision,
+ * 16-Sep-2026: drawing the shape there means an SVG path behind every field,
+ * card and button, with path-stroked borders, and was not worth it at the
+ * library's 10 to 16 px radii). The three curves, CSS squircle, Apple's and
+ * Figma's, look alike but are not identical.
+ */
+export const smoothCorners = {
+  borderCurve: 'continuous'
+};
+//# sourceMappingURL=corners.js.map

package/lib/module/utils/dimensions.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Breakpoints, isScreenSize, isTablet, ScreenDimensions, useScreenDimensions } from "./responsive.js";
+//# sourceMappingURL=dimensions.js.map

package/lib/module/utils/feedback.js

@@ -0,0 +1,70 @@
+"use strict";
+
+import { triggerHaptic } from "./hapticUtils.js";
+
+/**
+ * What the interaction MEANT, not which vibration to play.
+ *
+ * Call sites that pick a `HapticType` directly end up disagreeing with each
+ * other — one screen fires `impactMedium` on delete, the next fires
+ * `notificationWarning`, and the app stops speaking one language. Naming the
+ * intent moves that decision here, once.
+ */
+
+const INTENT_HAPTIC = {
+  tap: 'impactLight',
+  select: 'selection',
+  longPress: 'impactMedium',
+  created: 'impactMedium',
+  deleted: 'notificationWarning',
+  restored: 'notificationSuccess',
+  toggledOn: 'impactMedium',
+  toggledOff: 'impactLight',
+  succeeded: 'notificationSuccess',
+  warned: 'notificationWarning',
+  failed: 'notificationError'
+};
+let hapticsEnabled = true;
+
+/**
+ * Gate every intent from one place, so an app's "haptics" setting needs no
+ * per-component plumbing.
+ */
+export const configureFeedback = prefs => {
+  hapticsEnabled = prefs.haptics;
+};
+export const isFeedbackEnabled = () => hapticsEnabled;
+const fire = intent => {
+  if (!hapticsEnabled) {
+    return;
+  }
+  triggerHaptic(INTENT_HAPTIC[intent]);
+};
+
+/** Resolve an intent to its haptic type without firing it. */
+export const hapticForIntent = intent => INTENT_HAPTIC[intent];
+export const feedback = {
+  /** A plain press: button, row, chip. */
+  tap: () => fire('tap'),
+  /** Moving between options — segmented control, picker wheel, tab. */
+  select: () => fire('select'),
+  /** A long-press threshold being crossed. */
+  longPress: () => fire('longPress'),
+  /** Something now exists that did not before. */
+  created: () => fire('created'),
+  /** Something was destroyed or removed. */
+  deleted: () => fire('deleted'),
+  /** An undo landed. */
+  restored: () => fire('restored'),
+  /** A binary control turned on / off — switch, checkbox, favourite. */
+  toggled: on => fire(on ? 'toggledOn' : 'toggledOff'),
+  /** A flow finished successfully. */
+  succeeded: () => fire('succeeded'),
+  /** A recoverable problem the user should notice. */
+  warned: () => fire('warned'),
+  /** A failure. */
+  failed: () => fire('failed'),
+  /** Escape hatch for an intent held in a variable. */
+  fire
+};
+//# sourceMappingURL=feedback.js.map

package/lib/module/utils/hapticUtils.js

@@ -0,0 +1,86 @@
+"use strict";
+
+import * as Haptics from 'expo-haptics';
+import { Platform, Vibration } from 'react-native';
+let hapticImpl = null;
+
+/**
+ * Only what a test or the showcase injected. The default is expo-haptics, which
+ * this module imports directly: `expo` is a required peer, so the 48 components
+ * that fire haptics get them without any app wiring anything.
+ *
+ * The Vibration fallback below is now only the FAILURE path — a device whose
+ * haptic engine is disabled rejects, and Android still gets something.
+ */
+
+const fallback = type => {
+  if (Platform.OS === 'android') {
+    const map = {
+      selection: 5,
+      impactLight: 10,
+      impactMedium: 20,
+      impactHeavy: 30,
+      notificationSuccess: 15,
+      notificationWarning: 25,
+      notificationError: 40
+    };
+    try {
+      // Vibration.vibrate throws a SecurityException when the app has not
+      // declared android.permission.VIBRATE. Haptics are a non-essential
+      // enhancement, so a missing permission degrades to a no-op.
+      Vibration.vibrate(map[type] ?? 10);
+    } catch {
+      /* ignore: no VIBRATE permission or vibrator unavailable */
+    }
+  }
+};
+
+/**
+ * expo-haptics, which splits what this module treats as one vocabulary across
+ * three functions. The promises are deliberately swallowed: the seam is
+ * synchronous, a device with the engine disabled rejects, and an unhandled
+ * rejection from a button press must never become a crash.
+ */
+const EXPO_HANDLERS = {
+  selection: () => Haptics.selectionAsync(),
+  impactLight: () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light),
+  impactMedium: () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium),
+  impactHeavy: () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy),
+  notificationSuccess: () => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success),
+  notificationWarning: () => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning),
+  notificationError: () => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
+};
+export const triggerHaptic = (type = 'selection') => {
+  if (hapticImpl) {
+    try {
+      hapticImpl(type);
+      return;
+    } catch {
+      /* ignore */
+    }
+  }
+  const handler = EXPO_HANDLERS[type];
+  if (handler) {
+    handler().catch(() => fallback(type));
+    return;
+  }
+  fallback(type);
+};
+
+/**
+ * Replace the haptic backend. Intended for TESTS and for the showcase; an app
+ * gets expo-haptics without wiring anything. Pass `null` to restore it.
+ */
+export const setHapticImplementation = impl => {
+  hapticImpl = impl;
+};
+
+/**
+ * Resolves a component's `haptic` prop to the type that should fire, or null
+ * when haptics are off. `false` disables; a `HapticType` overrides; `undefined`
+ * falls back to the component's sensible default. Pair with `triggerHaptic`:
+ *   const h = resolveHaptic(haptic, 'selection');
+ *   if (h) triggerHaptic(h);
+ */
+export const resolveHaptic = (haptic, fallbackType) => haptic === false ? null : haptic ?? fallbackType;
+//# sourceMappingURL=hapticUtils.js.map

package/lib/module/utils/hashString.js

@@ -0,0 +1,17 @@
+"use strict";
+
+/**
+ * Two 32-bit FNV-style passes plus the length, as hex. Not cryptographic: it
+ * turns a URL into a short key that is safe as a storage key or a file name.
+ */
+export const hashString = input => {
+  let h1 = 0x811c9dc5;
+  let h2 = 0x1000193;
+  for (let i = 0; i < input.length; i += 1) {
+    const code = input.charCodeAt(i);
+    h1 = Math.imul(h1 ^ code, 16777619) >>> 0;
+    h2 = (Math.imul(h2 + code, 2654435761) ^ h2 >>> 7) >>> 0;
+  }
+  return `${h1.toString(16)}${h2.toString(16)}${input.length.toString(16)}`;
+};
+//# sourceMappingURL=hashString.js.map

package/lib/module/utils/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+export { blendOf, tintOf } from "./color.js";
+export { smoothCorners } from "./corners.js";
+export { configureFeedback, feedback, hapticForIntent, isFeedbackEnabled } from "./feedback.js";
+export { resolveHaptic, setHapticImplementation, triggerHaptic } from "./hapticUtils.js";
+export { mergeRefs } from "./mergeRefs.js";
+export { Breakpoints, isScreenSize, isTablet, Responsive, ScreenDimensions, useScreenDimensions } from "./responsive.js";
+export { shadowStyle } from "./shadows.js";
+export { Margin, Padding, Spacing } from "./spacing.js";
+export { SQUIRCLE_MIN_RADIUS, SQUIRCLE_SMOOTHING, squircleApplies, squircleHostRadius, squirclePath } from "./squircle.js";
+export { warnUnknownProps } from "./warnUnknownProps.js";
+//# sourceMappingURL=index.js.map

package/lib/module/utils/mergeRefs.js

@@ -0,0 +1,19 @@
+"use strict";
+
+/**
+ * Fold several refs into one callback ref, so a component can hold its own
+ * ref to a host (to call `focus()` on it) while still forwarding the ref its
+ * consumer passed. Callback refs are called, object refs are assigned; a
+ * `null` or `undefined` entry is skipped. Memoise the result: React treats
+ * a new callback ref as a change and re-attaches on every render.
+ */
+export const mergeRefs = (...refs) => node => {
+  for (const ref of refs) {
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref != null) {
+      ref.current = node;
+    }
+  }
+};
+//# sourceMappingURL=mergeRefs.js.map

package/lib/module/utils/responsive.js

@@ -0,0 +1,97 @@
+"use strict";
+
+import { Dimensions, PixelRatio, Platform, useWindowDimensions } from 'react-native';
+const BASE_WIDTH = 390;
+const BASE_HEIGHT = 844;
+export const Breakpoints = {
+  xs: 0,
+  sm: 360,
+  md: 414,
+  lg: 768,
+  xl: 1024
+};
+/**
+ * The window size is read on every call, never captured at module load. A
+ * module-level snapshot pins the whole responsive layer to the orientation the
+ * app launched in: a tablet opened in portrait keeps answering portrait after
+ * a rotation, and a foldable keeps the folded width after it opens.
+ * `Dimensions.get` is a synchronous read of a value the platform already
+ * holds, so there is no cost worth caching and no listener to leak.
+ *
+ * These are for code that runs outside a component. Inside one, use
+ * `useScreenDimensions`, which also RE-RENDERS on the change.
+ */
+const window = () => Dimensions.get('window');
+export const ScreenDimensions = {
+  get width() {
+    return window().width;
+  },
+  get height() {
+    return window().height;
+  },
+  get pixelRatio() {
+    return PixelRatio.get();
+  },
+  get fontScale() {
+    return PixelRatio.getFontScale();
+  }
+};
+const scalesFor = (width, height) => {
+  const widthScale = width / BASE_WIDTH;
+  const heightScale = height / BASE_HEIGHT;
+  return {
+    widthScale,
+    heightScale,
+    minScale: Math.min(widthScale, heightScale)
+  };
+};
+const scaleFont = (size, minScale) => {
+  const scaled = size * minScale;
+  if (Platform.OS === 'ios') {
+    return Math.round(PixelRatio.roundToNearestPixel(scaled));
+  }
+  return Math.round(PixelRatio.roundToNearestPixel(scaled)) - 1;
+};
+const responsiveFor = (width, height) => {
+  const {
+    widthScale,
+    heightScale,
+    minScale
+  } = scalesFor(width, height);
+  return {
+    width: size => Math.round(size * widthScale),
+    height: size => Math.round(size * heightScale),
+    size: size => Math.round(size * minScale),
+    font: size => scaleFont(size, minScale)
+  };
+};
+export const isScreenSize = size => window().width >= Breakpoints[size];
+export const isTablet = () => window().width >= Breakpoints.lg;
+export const Responsive = {
+  width: size => responsiveFor(window().width, window().height).width(size),
+  height: size => responsiveFor(window().width, window().height).height(size),
+  size: size => responsiveFor(window().width, window().height).size(size),
+  font: size => responsiveFor(window().width, window().height).font(size)
+};
+/**
+ * The reactive form. `useWindowDimensions` re-renders the component whenever
+ * the window changes, so a layout branching on `isTablet` follows a rotation,
+ * an unfold or a split-screen resize instead of staying where it started.
+ */
+export const useScreenDimensions = () => {
+  const {
+    width,
+    height,
+    fontScale
+  } = useWindowDimensions();
+  return {
+    width,
+    height,
+    pixelRatio: PixelRatio.get(),
+    fontScale,
+    isTablet: width >= Breakpoints.lg,
+    isScreenSize: size => width >= Breakpoints[size],
+    responsive: responsiveFor(width, height)
+  };
+};
+//# sourceMappingURL=responsive.js.map

package/lib/module/utils/shadows.js

@@ -0,0 +1,54 @@
+"use strict";
+
+import { Platform } from 'react-native';
+export const shadowStyle = (shadows, level) => {
+  const def = shadows[level];
+  return def;
+};
+
+/**
+ * Whether this platform draws a `boxShadow`. Android paints an outset box
+ * shadow only from API 28; below that the style is ignored, so a caller
+ * keeps the token's `elevation` there instead.
+ */
+export const supportsBoxShadow = () => Platform.OS !== 'android' || typeof Platform.Version === 'number' && Platform.Version >= 28;
+const hexToRgb = hex => {
+  const body = hex.replace('#', '');
+  const full = body.length === 3 ? body.split('').map(c => c + c).join('') : body;
+  if (!/^[0-9a-fA-F]{6}$/.test(full)) {
+    return null;
+  }
+  return [Number.parseInt(full.slice(0, 2), 16), Number.parseInt(full.slice(2, 4), 16), Number.parseInt(full.slice(4, 6), 16)];
+};
+
+/**
+ * A shadow token as a CSS `boxShadow` string, or `undefined` when the token
+ * draws nothing or its colour is not a hex value this can fold the opacity
+ * into.
+ *
+ * The legacy `shadow*` props are cast from the view's own layer, so on iOS
+ * `overflow: 'hidden'` clips them away entirely, and Android ignores all of
+ * them except `elevation`. A `boxShadow` survives the clip on iOS and draws
+ * the same blurred shadow on Android, so one token looks alike on both.
+ * `shadowRadius` is Core Animation's blur, about half of a CSS blur radius.
+ */
+export const toBoxShadow = def => {
+  const {
+    shadowColor,
+    shadowOffset,
+    shadowOpacity,
+    shadowRadius
+  } = def;
+  if (typeof shadowColor !== 'string' || !shadowOpacity) {
+    return undefined;
+  }
+  const rgb = hexToRgb(shadowColor);
+  if (!rgb) {
+    return undefined;
+  }
+  const x = shadowOffset?.width ?? 0;
+  const y = shadowOffset?.height ?? 0;
+  const blur = (shadowRadius ?? 0) * 2;
+  return `${x}px ${y}px ${blur}px 0px rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${shadowOpacity})`;
+};
+//# sourceMappingURL=shadows.js.map

package/lib/module/utils/spacing.js

@@ -0,0 +1,82 @@
+"use strict";
+
+import { getTheme } from "../theme/index.js";
+export const Spacing = {
+  get none() {
+    return getTheme().spacing.none;
+  },
+  get xxs() {
+    return getTheme().spacing.xxs;
+  },
+  get xs() {
+    return getTheme().spacing.xs;
+  },
+  get sm() {
+    return getTheme().spacing.sm;
+  },
+  get md() {
+    return getTheme().spacing.md;
+  },
+  get lg() {
+    return getTheme().spacing.lg;
+  },
+  get xl() {
+    return getTheme().spacing.xl;
+  },
+  get '2xl'() {
+    return getTheme().spacing['2xl'];
+  },
+  get '3xl'() {
+    return getTheme().spacing['3xl'];
+  },
+  get '4xl'() {
+    return getTheme().spacing['4xl'];
+  }
+};
+export const Padding = {
+  all: token => ({
+    padding: getTheme().spacing[token]
+  }),
+  horizontal: token => ({
+    paddingHorizontal: getTheme().spacing[token]
+  }),
+  vertical: token => ({
+    paddingVertical: getTheme().spacing[token]
+  }),
+  top: token => ({
+    paddingTop: getTheme().spacing[token]
+  }),
+  bottom: token => ({
+    paddingBottom: getTheme().spacing[token]
+  }),
+  left: token => ({
+    paddingLeft: getTheme().spacing[token]
+  }),
+  right: token => ({
+    paddingRight: getTheme().spacing[token]
+  })
+};
+export const Margin = {
+  all: token => ({
+    margin: getTheme().spacing[token]
+  }),
+  horizontal: token => ({
+    marginHorizontal: getTheme().spacing[token]
+  }),
+  vertical: token => ({
+    marginVertical: getTheme().spacing[token]
+  }),
+  top: token => ({
+    marginTop: getTheme().spacing[token]
+  }),
+  bottom: token => ({
+    marginBottom: getTheme().spacing[token]
+  }),
+  left: token => ({
+    marginLeft: getTheme().spacing[token]
+  }),
+  right: token => ({
+    marginRight: getTheme().spacing[token]
+  })
+};
+//# sourceMappingURL=spacing.js.map

package/lib/module/utils/squircle.js

@@ -0,0 +1,151 @@
+"use strict";
+
+/**
+ * Smooth ("squircle") corners as an SVG path.
+ *
+ * iOS draws Apple's continuous curve natively (`borderCurve: 'continuous'`,
+ * see `./corners`). Android has no such style, so the components draw the
+ * shape themselves with react-native-svg and this path.
+ *
+ * Ported from figma-squircle 1.1.0 by Tien Pham (MIT licence, copyright
+ * 2021, https://github.com/phamfoo/figma-squircle), which follows Figma's
+ * "Desperately seeking squircles" article and MartinRGB's approximation.
+ * Only the uniform-radius branch is kept: the components draw the shape
+ * only when all four corners agree and leave the platform's own corner in
+ * place otherwise. The curve is Figma's, not Apple's; the two are close
+ * but not identical.
+ */
+
+/** Figma's "iOS" corner-smoothing preset. */
+export const SQUIRCLE_SMOOTHING = 0.6;
+/**
+ * Below this radius the curve is not worth an overlay: the squircle bulges
+ * past the circle by about a sixth of the radius at the diagonal (1 dp at
+ * 6 dp, computed from the path), which is under a device pixel on most
+ * screens. Checkbox corners and small chips stay native.
+ */
+export const SQUIRCLE_MIN_RADIUS = 6;
+
+/**
+ * Whether a squircle is worth drawing for this box: a radius under
+ * `SQUIRCLE_MIN_RADIUS` changes nothing a user can see, and once the radius
+ * reaches half the shorter side (a pill) there is no straight run left for
+ * the curve to blend into.
+ */
+export const squircleApplies = (width, height, radius) => radius >= SQUIRCLE_MIN_RADIUS && width > 0 && height > 0 && 2 * radius < Math.min(width, height);
+
+/**
+ * The native corner radius an OPAQUE host keeps under the overlay.
+ *
+ * Figma's squircle sits inside the circle of the same radius: it keeps the
+ * circle's arc at the diagonal and cuts deeper along the tangents. A host
+ * that must keep an opaque native background (an elevated surface, whose
+ * Android shadow is cast from its own outline) would therefore show its
+ * circular corner peeking out around the shape. Doubling the native radius
+ * pushes that circle inside the squircle everywhere (checked numerically at
+ * 1.8x and above); the shadow follows the deeper corner with no visible
+ * change. Capped at half the shorter side, as a pill would be.
+ */
+export const squircleHostRadius = (width, height, radius) => Math.min(2 * radius, Math.min(width, height) / 2);
+const toRadians = degrees => degrees * Math.PI / 180;
+const num = value => {
+  const fixed = value.toFixed(4);
+  // Keep "-0.0000" from leaking into the path.
+  return fixed === '-0.0000' ? '0.0000' : fixed;
+};
+
+/** Figure 11.1 / 12.2 of Figma's article: the eight control points of one corner. */
+const cornerParams = (cornerRadius, smoothing, budget) => {
+  // p = (1 + smoothing) * q, and q = R because the corner angle is 90 degrees.
+  let p = (1 + smoothing) * cornerRadius;
+  // Figma's behaviour: when the smoothing does not fit, cap it so p stays
+  // inside the budget (half the shorter side).
+  const maxSmoothing = budget / cornerRadius - 1;
+  const cornerSmoothing = Math.min(smoothing, maxSmoothing);
+  p = Math.min(p, budget);
+
+  // A plain rounded rectangle has a 90 degree arc; smoothing shortens it.
+  const arcMeasure = 90 * (1 - cornerSmoothing);
+  const arcSectionLength = Math.sin(toRadians(arcMeasure / 2)) * cornerRadius * Math.SQRT2;
+
+  // The distance between control points P3 and P4 in the article.
+  const angleAlpha = (90 - arcMeasure) / 2;
+  const p3ToP4Distance = cornerRadius * Math.tan(toRadians(angleAlpha / 2));
+  const angleBeta = 45 * cornerSmoothing;
+  const c = p3ToP4Distance * Math.cos(toRadians(angleBeta));
+  const d = c * Math.tan(toRadians(angleBeta));
+  const b = (p - arcSectionLength - c - d) / 3;
+  const a = 2 * b;
+  return {
+    a,
+    b,
+    c,
+    d,
+    p,
+    arcSectionLength,
+    cornerRadius
+  };
+};
+const topRight = ({
+  cornerRadius: r,
+  a,
+  b,
+  c,
+  d,
+  arcSectionLength: s
+}) => `c ${num(a)} 0 ${num(a + b)} 0 ${num(a + b + c)} ${num(d)} ` + `a ${num(r)} ${num(r)} 0 0 1 ${num(s)} ${num(s)} ` + `c ${num(d)} ${num(c)} ${num(d)} ${num(b + c)} ${num(d)} ${num(a + b + c)}`;
+const bottomRight = ({
+  cornerRadius: r,
+  a,
+  b,
+  c,
+  d,
+  arcSectionLength: s
+}) => `c 0 ${num(a)} 0 ${num(a + b)} ${num(-d)} ${num(a + b + c)} ` + `a ${num(r)} ${num(r)} 0 0 1 ${num(-s)} ${num(s)} ` + `c ${num(-c)} ${num(d)} ${num(-(b + c))} ${num(d)} ${num(-(a + b + c))} ${num(d)}`;
+const bottomLeft = ({
+  cornerRadius: r,
+  a,
+  b,
+  c,
+  d,
+  arcSectionLength: s
+}) => `c ${num(-a)} 0 ${num(-(a + b))} 0 ${num(-(a + b + c))} ${num(-d)} ` + `a ${num(r)} ${num(r)} 0 0 1 ${num(-s)} ${num(-s)} ` + `c ${num(-d)} ${num(-c)} ${num(-d)} ${num(-(b + c))} ${num(-d)} ${num(-(a + b + c))}`;
+const topLeft = ({
+  cornerRadius: r,
+  a,
+  b,
+  c,
+  d,
+  arcSectionLength: s
+}) => `c 0 ${num(-a)} 0 ${num(-(a + b))} ${num(d)} ${num(-(a + b + c))} ` + `a ${num(r)} ${num(r)} 0 0 1 ${num(s)} ${num(-s)} ` + `c ${num(c)} ${num(-d)} ${num(b + c)} ${num(-d)} ${num(a + b + c)} ${num(-d)}`;
+
+/**
+ * The closed path of a smooth-cornered rectangle whose bounds are
+ * `(inset, inset)` to `(width - inset, height - inset)`, drawn clockwise
+ * from the top edge. Every corner shares one radius; the radius and the
+ * smoothing are capped so the curve fits the box (Figma's own behaviour).
+ */
+export function squirclePath({
+  width,
+  height,
+  radius,
+  smoothing = SQUIRCLE_SMOOTHING,
+  inset = 0
+}) {
+  const w = Math.max(0, width - 2 * inset);
+  const h = Math.max(0, height - 2 * inset);
+  const x0 = inset;
+  const y0 = inset;
+  const r = Math.max(0, radius - inset);
+  const budget = Math.min(w, h) / 2;
+  const cornerRadius = Math.min(r, budget);
+  if (cornerRadius <= 0) {
+    return `M ${num(x0)} ${num(y0)} L ${num(x0 + w)} ${num(y0)} L ${num(x0 + w)} ${num(y0 + h)} L ${num(x0)} ${num(y0 + h)} Z`;
+  }
+  const corner = cornerParams(cornerRadius, Math.min(1, Math.max(0, smoothing)), budget);
+  const {
+    p
+  } = corner;
+  return `M ${num(x0 + w - p)} ${num(y0)} ` + `${topRight(corner)} ` + `L ${num(x0 + w)} ${num(y0 + h - p)} ` + `${bottomRight(corner)} ` + `L ${num(x0 + p)} ${num(y0 + h)} ` + `${bottomLeft(corner)} ` + `L ${num(x0)} ${num(y0 + p)} ` + `${topLeft(corner)} Z`;
+}
+//# sourceMappingURL=squircle.js.map