@oxy.so/bloom 3.6.0 → 4.0.0

package/lib/module/fab/Fab.web.js

@@ -1,306 +1,13 @@
 "use strict";
 
-import React, { memo, useCallback, useId, useMemo } from 'react';
-import { useBottomEdgeInset } from "../layout/bottom-edge.js";
-import { EXPANDED_HEIGHT, MINIMIZED_HEIGHT } from "../tab-bar/shared.js";
-import { useTheme } from "../theme/use-theme.js";
-import { animation, borderRadius } from "../styles/tokens.js";
-import { pressedSurface } from "../theme/press-colors.js";
-import { interactiveWebCss, useInteractiveWebCss } from "../styles/interactive-web-css.js";
-import { flattenWebStyle } from "../styles/flatten-web-style.js";
-import { applyIconColor } from "../frosted-icon-button/shared.js";
-import { useFabMinimized } from "./use-fab-minimized.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Material-style FAB scale. `small` (40px) keeps a full 24px icon box so the
-// glyph reads clearly; `medium` (56px) is the canonical FAB; `large` (64px) is
-// the high-prominence action.
-const SIZE_CONFIG = {
-  small: {
-    diameter: 40,
-    iconBox: 24,
-    fontSize: 14
-  },
-  medium: {
-    diameter: 56,
-    iconBox: 24,
-    fontSize: 15
-  },
-  large: {
-    diameter: 64,
-    iconBox: 28,
-    fontSize: 16
-  }
-};
-const MIN_NUMERIC_ICON_BOX = 22;
-
-/**
- * Resolve a `size` prop (preset name or raw pixel diameter) to concrete pixel
- * geometry. Mirrors the native `resolveSize` exactly so a numeric size renders
- * identically on both platforms. A numeric size sets the diameter directly and
- * derives the icon box as `round(size * 0.5)` (clamped to a sensible minimum).
- */
-function resolveSize(size) {
-  if (typeof size === 'number') {
-    return {
-      diameter: size,
-      iconBox: Math.max(MIN_NUMERIC_ICON_BOX, Math.round(size * 0.5)),
-      fontSize: Math.max(13, Math.round(size * 0.27))
-    };
-  }
-  return SIZE_CONFIG[size];
-}
-const DEFAULT_OFFSET = 16;
-const DEFAULT_Z_INDEX = 50;
-
-// ---------------------------------------------------------------------------
-//  Per-state CSS injection
-//
-//  Shared recipe — see `styles/interactive-web-css.ts`. Per-instance resolved
-//  colours stay inline and reach the static rules as custom properties
-//  (`--bloom-fab-ring`, `--bloom-fab-shadow-hover`, `--bloom-fab-press-scale`).
-// ---------------------------------------------------------------------------
-
-const STYLE_ID = 'bloom-fab-web-css';
-const BLOOM_FAB_CSS = interactiveWebCss({
-  selector: '.bloom-fab',
-  varPrefix: 'bloom-fab',
-  // `background-color` and `box-shadow` arrive as custom properties rather than
-  // in the inline style, and that is NOT a stylistic choice. An inline
-  // declaration outranks EVERY rule in an adopted stylesheet, so a fork that
-  // writes either one inline makes its own `:hover` rule for that property
-  // unreachable. Measured in a real browser: the hover lift below had never once
-  // fired, with the rule present and the variable resolving correctly.
-  // Gate: `interactive-web-css.test.tsx`.
-  base: `
-    flex-direction: row;
-    border: none;
-    background-color: var(--bloom-fab-bg);
-    box-shadow: var(--bloom-fab-shadow);
-    font-family: inherit;
-  `,
-  transition: 'opacity 120ms ease, transform 120ms ease, box-shadow 160ms ease, background-color 120ms ease, bottom 200ms ease, padding 200ms ease, gap 200ms ease',
-  // A FAB lifts on hover rather than dimming: it floats over the content, so a
-  // deeper shadow is the affordance an opacity dip cannot express.
-  hover: {
-    declarations: 'box-shadow: var(--bloom-fab-shadow-hover);'
-  },
-  // The held state is the same state layer the native fork paints, from the same
-  // resolver. It reads THROUGH the hover lift rather than replacing it (a
-  // pressed FAB is always also hovered), so hover and press stay two distinct
-  // states: deeper shadow, then a darker face.
-  pressDeclarations: 'background-color: var(--bloom-fab-press-bg);',
-  // One px more than a button's: the FAB is a circle on a page it floats above,
-  // so a ring at 2 reads as touching the edge.
-  outlineOffset: 3
-});
-
-/**
- * Positioning for a placement on web.
- *
- * Bottom placements use `sticky`, never `fixed`, so the FAB follows the
- * document scroll while remaining inside its content column. They combine
- * `margin-top: auto` (short flex-column content) with `bottom` (long, scrolling
- * content). The consumer column must fill the available height, use flex-column
- * layout, and render the FAB last. Top placements remain absolute: a sticky
- * element rendered last cannot be pulled upward to the top of its container.
- *
- * `bottomEdgeInset` applies to the BOTTOM axis only. It is not a gap preference
- * — `offset` is that — but the height of whatever floating surface has already
- * claimed the bottom edge, so the FAB lands above a floating tab bar instead of
- * behind it. A z-index cannot fix that pairing: the bar's host is the last
- * sibling of the app shell and paints over every descendant, so the FAB has to be
- * somewhere else, not merely on top.
- */
-function placementStyle(placement, offset, bottomEdgeInset) {
-  if (placement === 'static') return {};
-  const isBottom = placement === 'bottom-right' || placement === 'bottom-left';
-  const style = {
-    position: isBottom ? 'sticky' : 'absolute'
-  };
-  if (isBottom) {
-    style.bottom = offset + bottomEdgeInset;
-    style.marginTop = 'auto';
-  } else {
-    style.top = offset;
-  }
-  if (placement === 'bottom-right' || placement === 'top-right') {
-    if (isBottom) {
-      style.alignSelf = 'flex-end';
-      style.marginRight = offset;
-    } else {
-      style.right = offset;
-    }
-  } else {
-    if (isBottom) {
-      style.alignSelf = 'flex-start';
-      style.marginLeft = offset;
-    } else {
-      style.left = offset;
-    }
-  }
-  return style;
-}
-function resolveVariant(variant, c) {
-  switch (variant) {
-    case 'secondary':
-      return {
-        background: c.secondary,
-        foreground: c.secondaryForeground,
-        ring: c.secondary
-      };
-    case 'tertiary':
-      return {
-        background: c.tertiary,
-        foreground: c.tertiaryForeground,
-        ring: c.tertiary
-      };
-    case 'surface':
-      return {
-        background: c.card,
-        foreground: c.text,
-        ring: c.primary
-      };
-    case 'primary':
-    default:
-      return {
-        background: c.primary,
-        foreground: c.primaryForeground,
-        ring: c.primary
-      };
-  }
-}
-const FabWebComponent = ({
-  onPress,
-  onClick,
-  icon,
-  children,
-  label,
-  minimizeBehavior = 'none',
-  variant = 'tertiary',
-  size = 'medium',
-  placement = 'bottom-right',
-  offset = DEFAULT_OFFSET,
-  disabled = false,
-  accessibilityLabel,
-  'aria-label': ariaLabelProp,
-  accessibilityHint,
-  style,
-  labelStyle,
-  className,
-  testID,
-  zIndex = DEFAULT_Z_INDEX,
-  id,
-  title,
-  type = 'button'
-}) => {
-  useInteractiveWebCss(STYLE_ID, BLOOM_FAB_CSS);
-  const minimized = useFabMinimized(true);
-  const bottomEdgeInset = useBottomEdgeInset();
-  const theme = useTheme();
-  const reactId = useId();
-  const resolvedId = id ?? `bloom-fab-${reactId}`;
-  const sizeConfig = useMemo(() => resolveSize(size), [size]);
-  const isExtended = label != null && label.length > 0;
-  const showLabel = isExtended && !(minimized && minimizeBehavior === 'collapse');
-  const variantColors = useMemo(() => resolveVariant(variant, theme.colors), [variant, theme.colors]);
-  const content = applyIconColor(icon ?? children, variantColors.foreground);
-
-  // Resolved-token shadows. The token is already a full color (per the Bloom
-  // web CSS-var contract), so it is used directly — never wrapped in hsl().
-  const restShadow = `0 4px 12px ${theme.colors.shadow}`;
-  const hoverShadow = `0 8px 20px ${theme.colors.shadow}`;
-  const containerStyle = useMemo(() => {
-    const base = {
-      color: variantColors.foreground,
-      borderRadius: borderRadius.full,
-      height: sizeConfig.diameter,
-      zIndex,
-      fontSize: sizeConfig.fontSize,
-      fontWeight: 600,
-      ['--bloom-fab-ring']: variantColors.ring,
-      ['--bloom-fab-bg']: variantColors.background,
-      ['--bloom-fab-shadow']: restShadow,
-      ['--bloom-fab-shadow-hover']: hoverShadow,
-      // Resolved by the same function the native fork calls, off the same rest
-      // fill, so the two forks land on the identical colour.
-      ['--bloom-fab-press-bg']: pressedSurface(theme.colors, variantColors.background, variantColors.foreground),
-      ['--bloom-fab-press-scale']: animation.pressScale,
-      ...placementStyle(placement, offset, Math.max(0, bottomEdgeInset - (minimized ? EXPANDED_HEIGHT - MINIMIZED_HEIGHT : 0)))
-    };
-    if (isExtended) {
-      const pad = sizeConfig.diameter <= 44 ? 14 : 20;
-      base.minWidth = sizeConfig.diameter;
-      base.paddingLeft = showLabel ? pad : 0;
-      base.paddingRight = showLabel ? pad : 0;
-      base.gap = showLabel ? 8 : 0;
-    } else {
-      base.width = sizeConfig.diameter;
-    }
-    return base;
-  }, [variantColors, theme.colors, sizeConfig.diameter, sizeConfig.fontSize, zIndex, restShadow, hoverShadow, placement, offset, bottomEdgeInset, minimized, isExtended, showLabel]);
-  const handleClick = useCallback(event => {
-    if (disabled) {
-      event.preventDefault();
-      return;
-    }
-    onClick?.(event);
-    onPress?.();
-  }, [disabled, onClick, onPress]);
-  const ariaLabel = ariaLabelProp ?? accessibilityLabel ?? label;
-  const composedClassName = ['bloom-fab'].concat(className ? [className] : []).join(' ');
-
-  // Normalize `style`/`labelStyle` (single object, StyleProp array — the native
-  // fork passes `style={[placementStyle(...), {...}, style]}` — or falsy) into
-  // ONE flat plain object each, so neither raw-DOM merge site below spreads a
-  // StyleProp array (which would leak numeric keys onto the element's
-  // CSSStyleDeclaration). See `flattenWebStyle` for the full rationale.
-  const resolvedStyle = flattenWebStyle(style);
-  const resolvedLabelStyle = flattenWebStyle(labelStyle);
-  if (minimized && minimizeBehavior === 'hide') return null;
-  return /*#__PURE__*/_jsxs("button", {
-    id: resolvedId,
-    type: type,
-    className: composedClassName,
-    style: {
-      ...containerStyle,
-      ...resolvedStyle
-    },
-    onClick: handleClick,
-    disabled: disabled,
-    "aria-disabled": disabled || undefined,
-    "aria-label": ariaLabel,
-    title: title ?? accessibilityHint,
-    "data-testid": testID,
-    children: [content != null && /*#__PURE__*/_jsx("span", {
-      "aria-hidden": showLabel ? 'true' : undefined,
-      style: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: sizeConfig.iconBox,
-        height: sizeConfig.iconBox
-      },
-      children: content
-    }), isExtended && /*#__PURE__*/_jsx("span", {
-      "aria-hidden": !showLabel || undefined,
-      style: {
-        display: 'grid',
-        gridTemplateColumns: showLabel ? 'minmax(0, 1fr)' : 'minmax(0, 0fr)',
-        opacity: showLabel ? 1 : 0,
-        transition: 'grid-template-columns 200ms ease, opacity 140ms ease'
-      },
-      children: /*#__PURE__*/_jsx("span", {
-        style: {
-          ...resolvedLabelStyle,
-          minWidth: 0,
-          overflow: 'hidden',
-          whiteSpace: 'nowrap'
-        },
-        children: label
-      })
-    })]
+import { memo } from 'react';
+import { Button } from "../button/index.web.js";
+import { useFabProps } from "./use-fab-props.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Fab = /*#__PURE__*/memo(function Fab(props) {
+  return /*#__PURE__*/_jsx(Button, {
+    ...useFabProps(props)
   });
-};
-export const Fab = /*#__PURE__*/memo(FabWebComponent);
+});
 Fab.displayName = 'Fab';
 //# sourceMappingURL=Fab.web.js.map

package/lib/module/fab/Fab.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","useCallback","useId","useMemo","useBottomEdgeInset","EXPANDED_HEIGHT","MINIMIZED_HEIGHT","useTheme","animation","borderRadius","pressedSurface","interactiveWebCss","useInteractiveWebCss","flattenWebStyle","applyIconColor","useFabMinimized","jsx","_jsx","jsxs","_jsxs","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","MIN_NUMERIC_ICON_BOX","resolveSize","size","Math","max","round","DEFAULT_OFFSET","DEFAULT_Z_INDEX","STYLE_ID","BLOOM_FAB_CSS","selector","varPrefix","base","transition","hover","declarations","pressDeclarations","outlineOffset","placementStyle","placement","offset","bottomEdgeInset","isBottom","style","position","bottom","marginTop","top","alignSelf","marginRight","right","marginLeft","left","resolveVariant","variant","c","background","secondary","foreground","secondaryForeground","ring","tertiary","tertiaryForeground","card","text","primary","primaryForeground","FabWebComponent","onPress","onClick","icon","children","label","minimizeBehavior","disabled","accessibilityLabel","ariaLabelProp","accessibilityHint","labelStyle","className","testID","zIndex","id","title","type","minimized","theme","reactId","resolvedId","sizeConfig","isExtended","length","showLabel","variantColors","colors","content","restShadow","shadow","hoverShadow","containerStyle","color","full","height","fontWeight","pressScale","pad","minWidth","paddingLeft","paddingRight","gap","width","handleClick","event","preventDefault","ariaLabel","composedClassName","concat","join","resolvedStyle","resolvedLabelStyle","undefined","display","alignItems","justifyContent","gridTemplateColumns","opacity","overflow","whiteSpace","Fab","displayName"],"sourceRoot":"../../../src","sources":["fab/Fab.web.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["memo","Button","useFabProps","jsx","_jsx","Fab","props","displayName"],"sourceRoot":"../../../src","sources":["fab/Fab.web.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,OAAO;AAC5B,SAASC,MAAM,QAAQ,wBAAqB;AAC5C,SAASC,WAAW,QAAQ,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG9C,OAAO,MAAMC,GAAG,gBAAGL,IAAI,CAAC,SAASK,GAAGA,CAACC,KAAe,EAAE;EACpD,oBAAOF,IAAA,CAACH,MAAM;IAAA,GAAKC,WAAW,CAACI,KAAK;EAAC,CAAG,CAAC;AAC3C,CAAC,CAAC;AACFD,GAAG,CAACE,WAAW,GAAG,KAAK","ignoreList":[]}

package/lib/module/fab/index.web.js

@@ -1,14 +1,9 @@
 "use strict";
 
-// Web variant of the `./fab` barrel.
-//
-// The default barrel (`./index.ts`) re-exports the React Native (`Pressable`)
-// implementation, whose `placement` anchoring uses `position: absolute` within
-// the nearest positioned ancestor. The web fork (`./Fab.web`) renders a real
-// HTML `<button>` and uses `position: sticky` for its bottom placements so the
-// FAB tracks the bottom-right of its CONTAINING content column while
-// scrolling — never the viewport edge (the bug that motivated moving the FAB
-// into Bloom). Web bundlers select this file via the `"browser"` export
-// condition in `package.json`'s `exports['./fab']`.
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/fab/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 export { Fab } from "./Fab.web.js";
 //# sourceMappingURL=index.web.js.map

package/lib/module/fab/index.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["Fab"],"sourceRoot":"../../../src","sources":["fab/index.web.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,cAAW","ignoreList":[]}
+{"version":3,"names":["Fab"],"sourceRoot":"../../../src","sources":["fab/index.web.ts"],"mappings":";;AAAA;AACA;AACA;AACA;;AAEA,SAASA,GAAG,QAAQ,cAAW","ignoreList":[]}

package/lib/module/fab/use-fab-props.js

@@ -0,0 +1,109 @@
+"use strict";
+
+import { Platform } from 'react-native';
+import { useBloomAppearance } from "../appearance/context.js";
+import { useBottomEdgeInset } from "../layout/bottom-edge.js";
+import { useFabMinimized } from "./use-fab-minimized.js";
+const DIAMETERS = {
+  xs: 40,
+  sm: 48,
+  md: 56,
+  lg: 64
+};
+const LEGACY_SIZE = {
+  small: 'xs',
+  medium: 'md',
+  large: 'lg'
+};
+const LEGACY_TONE = {
+  primary: 'accent',
+  secondary: 'support',
+  tertiary: 'action',
+  surface: 'neutral'
+};
+export function useFabProps({
+  label,
+  children,
+  icon,
+  size,
+  variant,
+  tone,
+  appearance = 'solid',
+  placement = 'static',
+  offset = 16,
+  minimizeBehavior = 'none',
+  labelStyle,
+  textStyle,
+  zIndex,
+  accessibilityHint: _hint,
+  style,
+  ...props
+}) {
+  const normalizedSize = typeof size === 'number' ? 'md' : size && size in LEGACY_SIZE ? LEGACY_SIZE[size] : size;
+  const resolved = useBloomAppearance({
+    size: normalizedSize,
+    tone: tone ?? (variant ? LEGACY_TONE[variant] : undefined)
+  }, {
+    size: 'md',
+    tone: 'action'
+  });
+  const minimized = useFabMinimized(minimizeBehavior !== 'none');
+  const bottomInset = useBottomEdgeInset();
+  const hidden = minimized && minimizeBehavior === 'hide';
+  const shownLabel = minimized && minimizeBehavior === 'collapse' ? undefined : label;
+  const diameter = typeof size === 'number' && Number.isFinite(size) ? Math.max(1, size) : DIAMETERS[resolved.size];
+  const position = {};
+  if (placement !== 'static') {
+    const bottom = placement.startsWith('bottom');
+    const right = placement.endsWith('right');
+    if (Platform.OS === 'web') {
+      Object.assign(position, {
+        position: 'sticky',
+        alignSelf: right ? 'flex-end' : 'flex-start',
+        ...(bottom ? {
+          bottom: offset + bottomInset,
+          marginTop: 'auto',
+          marginBottom: offset + bottomInset
+        } : {
+          top: offset,
+          marginTop: offset
+        }),
+        marginLeft: right ? undefined : offset,
+        marginRight: right ? offset : undefined
+      });
+    } else {
+      Object.assign(position, {
+        position: 'absolute',
+        [bottom ? 'bottom' : 'top']: offset + (bottom ? bottomInset : 0),
+        [right ? 'right' : 'left']: offset
+      });
+    }
+  }
+  return {
+    ...props,
+    ...resolved,
+    appearance,
+    icon: icon ?? children,
+    children: shownLabel,
+    accessibilityLabel: props.accessibilityLabel ?? label,
+    textStyle: [labelStyle, textStyle],
+    style: [{
+      height: diameter,
+      minHeight: diameter,
+      ...(shownLabel ? {
+        paddingLeft: 20,
+        paddingRight: 20
+      } : {
+        width: diameter
+      }),
+      ...position,
+      ...(zIndex == null ? {} : {
+        zIndex
+      }),
+      ...(hidden ? {
+        display: 'none'
+      } : {})
+    }, style]
+  };
+}
+//# sourceMappingURL=use-fab-props.js.map

package/lib/module/fab/use-fab-props.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Platform","useBloomAppearance","useBottomEdgeInset","useFabMinimized","DIAMETERS","xs","sm","md","lg","LEGACY_SIZE","small","medium","large","LEGACY_TONE","primary","secondary","tertiary","surface","useFabProps","label","children","icon","size","variant","tone","appearance","placement","offset","minimizeBehavior","labelStyle","textStyle","zIndex","accessibilityHint","_hint","style","props","normalizedSize","resolved","undefined","minimized","bottomInset","hidden","shownLabel","diameter","Number","isFinite","Math","max","position","bottom","startsWith","right","endsWith","OS","Object","assign","alignSelf","marginTop","marginBottom","top","marginLeft","marginRight","accessibilityLabel","height","minHeight","paddingLeft","paddingRight","width","display"],"sourceRoot":"../../../src","sources":["fab/use-fab-props.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAwB,cAAc;AACvD,SAASC,kBAAkB,QAAQ,0BAAuB;AAG1D,SAASC,kBAAkB,QAAQ,0BAAuB;AAE1D,SAASC,eAAe,QAAQ,wBAAqB;AAGrD,MAAMC,SAAS,GAAG;EAAEC,EAAE,EAAE,EAAE;EAAEC,EAAE,EAAE,EAAE;EAAEC,EAAE,EAAE,EAAE;EAAEC,EAAE,EAAE;AAAG,CAAU;AAC7D,MAAMC,WAAW,GAAG;EAAEC,KAAK,EAAE,IAAI;EAAEC,MAAM,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAK,CAAU;AACvE,MAAMC,WAAW,GAAG;EAAEC,OAAO,EAAE,QAAQ;EAAEC,SAAS,EAAE,SAAS;EAAEC,QAAQ,EAAE,QAAQ;EAAEC,OAAO,EAAE;AAAU,CAAU;AAEhH,OAAO,SAASC,WAAWA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,IAAI;EAAEC,OAAO;EAAEC,IAAI;EAAEC,UAAU,GAAG,OAAO;EAAEC,SAAS,GAAG,QAAQ;EAAEC,MAAM,GAAG,EAAE;EAAEC,gBAAgB,GAAG,MAAM;EAAEC,UAAU;EAAEC,SAAS;EAAEC,MAAM;EAAEC,iBAAiB,EAAEC,KAAK;EAAEC,KAAK;EAAE,GAAGC;AAAgB,CAAC,EAAe;EAC/P,MAAMC,cAAqC,GAAG,OAAOd,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAGA,IAAI,IAAIA,IAAI,IAAIb,WAAW,GAAGA,WAAW,CAACa,IAAI,CAA6B,GAAGA,IAA6B;EAC3L,MAAMe,QAAQ,GAAGpC,kBAAkB,CAAC;IAAEqB,IAAI,EAAEc,cAAc;IAAEZ,IAAI,EAAEA,IAAI,KAAKD,OAAO,GAAGV,WAAW,CAACU,OAAO,CAAC,GAAgBe,SAAS;EAAE,CAAC,EAAE;IAAEhB,IAAI,EAAE,IAAI;IAAEE,IAAI,EAAE;EAAS,CAAC,CAAC;EACtK,MAAMe,SAAS,GAAGpC,eAAe,CAACyB,gBAAgB,KAAK,MAAM,CAAC;EAC9D,MAAMY,WAAW,GAAGtC,kBAAkB,CAAC,CAAC;EACxC,MAAMuC,MAAM,GAAGF,SAAS,IAAIX,gBAAgB,KAAK,MAAM;EACvD,MAAMc,UAAU,GAAGH,SAAS,IAAIX,gBAAgB,KAAK,UAAU,GAAGU,SAAS,GAAGnB,KAAK;EACnF,MAAMwB,QAAQ,GAAG,OAAOrB,IAAI,KAAK,QAAQ,IAAIsB,MAAM,CAACC,QAAQ,CAACvB,IAAI,CAAC,GAAGwB,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEzB,IAAI,CAAC,GAAGlB,SAAS,CAACiC,QAAQ,CAACf,IAAI,CAAC;EACjH,MAAM0B,QAAiC,GAAG,CAAC,CAAC;EAC5C,IAAItB,SAAS,KAAK,QAAQ,EAAE;IAC1B,MAAMuB,MAAM,GAAGvB,SAAS,CAACwB,UAAU,CAAC,QAAQ,CAAC;IAC7C,MAAMC,KAAK,GAAGzB,SAAS,CAAC0B,QAAQ,CAAC,OAAO,CAAC;IACzC,IAAIpD,QAAQ,CAACqD,EAAE,KAAK,KAAK,EAAE;MACzBC,MAAM,CAACC,MAAM,CAACP,QAAQ,EAAE;QAAEA,QAAQ,EAAE,QAAQ;QAAEQ,SAAS,EAAEL,KAAK,GAAG,UAAU,GAAG,YAAY;QAAE,IAAIF,MAAM,GAAG;UAAEA,MAAM,EAAEtB,MAAM,GAAGa,WAAW;UAAEiB,SAAS,EAAE,MAAM;UAAEC,YAAY,EAAE/B,MAAM,GAAGa;QAAY,CAAC,GAAG;UAAEmB,GAAG,EAAEhC,MAAM;UAAE8B,SAAS,EAAE9B;QAAO,CAAC,CAAC;QAAEiC,UAAU,EAAET,KAAK,GAAGb,SAAS,GAAGX,MAAM;QAAEkC,WAAW,EAAEV,KAAK,GAAGxB,MAAM,GAAGW;MAAU,CAAC,CAAC;IAC5T,CAAC,MAAM;MACLgB,MAAM,CAACC,MAAM,CAACP,QAAQ,EAAE;QAAEA,QAAQ,EAAE,UAAU;QAAE,CAACC,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAGtB,MAAM,IAAIsB,MAAM,GAAGT,WAAW,GAAG,CAAC,CAAC;QAAE,CAACW,KAAK,GAAG,OAAO,GAAG,MAAM,GAAGxB;MAAO,CAAC,CAAC;IACzJ;EACF;EACA,OAAO;IAAE,GAAGQ,KAAK;IAAE,GAAGE,QAAQ;IAAEZ,UAAU;IAAEJ,IAAI,EAAEA,IAAI,IAAID,QAAQ;IAAEA,QAAQ,EAAEsB,UAAU;IAAEoB,kBAAkB,EAAE3B,KAAK,CAAC2B,kBAAkB,IAAI3C,KAAK;IAAEW,SAAS,EAAE,CAACD,UAAU,EAAEC,SAAS,CAAC;IAAEI,KAAK,EAAE,CAAC;MAAE6B,MAAM,EAAEpB,QAAQ;MAAEqB,SAAS,EAAErB,QAAQ;MAAE,IAAID,UAAU,GAAG;QAAEuB,WAAW,EAAE,EAAE;QAAEC,YAAY,EAAE;MAAG,CAAC,GAAG;QAAEC,KAAK,EAAExB;MAAS,CAAC,CAAC;MAAE,GAAGK,QAAQ;MAAE,IAAIjB,MAAM,IAAI,IAAI,GAAG,CAAC,CAAC,GAAG;QAAEA;MAAO,CAAC,CAAC;MAAE,IAAIU,MAAM,GAAG;QAAE2B,OAAO,EAAE;MAAO,CAAC,GAAG,CAAC,CAAC;IAAE,CAAC,EAAElC,KAAK;EAAE,CAAC;AAC7Z","ignoreList":[]}

package/lib/module/file-upload/FileUpload.js

@@ -4,7 +4,6 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from '
 import { Animated, Easing, Platform, Pressable, View } from 'react-native';
 import Svg, { Path, Rect } from 'react-native-svg';
 import { useReducedMotion } from 'react-native-reanimated';
-import { DANGER_TABLE, colorRamp, resolveButtonRamps } from "../button/shared.js";
 import { RiFileExcel2Line } from "../icons/remix/RiFileExcel2Line.js";
 import { RiFileImageLine } from "../icons/remix/RiFileImageLine.js";
 import { RiFileTextLine } from "../icons/remix/RiFileTextLine.js";
@@ -94,34 +93,29 @@ function extensionFor(fileName) {
  *   text/error/primary         red-500        red-400
  */
 export function resolveFileUploadPaint(theme) {
-  const {
-    accent,
-    neutral: n
-  } = resolveButtonRamps(theme);
-  const red = colorRamp(theme.colors.negative, DANGER_TABLE);
-  const dark = theme.isDark;
+  const c = theme.colors;
   return {
-    idleBackground: dark ? n[900] : n[100],
-    busyBackground: dark ? n[800] : theme.colors.card,
-    dash: dark ? n[700] : n[300],
-    dashActive: dark ? n[600] : n[400],
-    ringTrack: dark ? n[700] : n[200],
-    ringFill: accent[400],
-    pillBackground: accent[400],
-    pillText: '#FFFFFF',
-    discBackground: dark ? n[600] : n[300],
-    discIcon: n[400],
-    discIconHover: dark ? n[300] : n[500],
-    prompt: n[500],
-    select: accent[500],
-    hint: dark ? n[600] : n[400],
-    error: dark ? red[400] : red[500],
-    fileDiscBorder: dark ? n[700] : n[200],
-    fileDiscBackground: dark ? n[800] : theme.colors.card,
-    fileIcon: n[500],
-    fileName: theme.colors.text,
-    status: n[500],
-    ring: accent[500]
+    idleBackground: c.backgroundSecondary,
+    busyBackground: c.card,
+    dash: c.border,
+    dashActive: c.primary,
+    ringTrack: c.borderLight,
+    ringFill: c.primary,
+    pillBackground: c.primary,
+    pillText: c.primaryForeground,
+    discBackground: c.backgroundTertiary,
+    discIcon: c.textSecondary,
+    discIconHover: c.text,
+    prompt: c.textSecondary,
+    select: c.primarySubtleForeground,
+    hint: c.textSecondary,
+    error: c.errorSubtleForeground,
+    fileDiscBorder: c.borderLight,
+    fileDiscBackground: c.card,
+    fileIcon: c.textSecondary,
+    fileName: c.text,
+    status: c.textSecondary,
+    ring: c.primary
   };
 }
 
@@ -676,9 +670,11 @@ const FileUploadComponent = function FileUpload({
         opacity: IS_WEB ? busy ? 1 : 0 : busyFade
       }],
       children: /*#__PURE__*/_jsxs(Svg, {
-        width: box.width,
-        height: box.height,
+        width: "100%",
+        height: "100%",
+        preserveAspectRatio: "none",
         viewBox: `0 0 ${box.width} ${box.height}`,
+        testID: testID ? `${testID}-progress-ring` : undefined,
         children: [/*#__PURE__*/_jsx(Rect, {
           x: RING_INSET,
           y: RING_INSET,