@oxyhq/bloom 0.27.0 → 0.28.0

package/src/animated-check/AnimatedCheck.tsx

@@ -0,0 +1,173 @@
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
+import { StyleSheet, Text } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedProps,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { getSvgModule } from '../avatar/svg-module';
+import { useTheme } from '../theme';
+
+/** The resolved `react-native-svg` module (non-null branch). */
+type SvgModule = NonNullable<ReturnType<typeof getSvgModule>>;
+
+/** Square viewBox the ring + check are drawn on. */
+const VIEW_BOX = 52;
+/** Ring radius within the viewBox. */
+const CIRCLE_RADIUS = 24;
+/** Ring circumference (2·π·r ≈ 150.8) rounded up so the dash fully hides it. */
+const CIRCLE_LENGTH = 166;
+/** Approximate path length of the check stroke. */
+const CHECK_LENGTH = 48;
+/** The check glyph, drawn on the 52×52 canvas. */
+const CHECK_PATH = 'M14.1 27.2l7.1 7.2 16.7-16.8';
+const STROKE_WIDTH = 4;
+/** Ring draw-on duration (ms). */
+const CIRCLE_DURATION = 500;
+/** Check draw-on duration (ms), started once the ring completes. */
+const CHECK_DURATION = 300;
+
+export interface AnimatedCheckRef {
+  /** Replays the draw-on animation from the start. */
+  play: () => void;
+}
+
+export interface AnimatedCheckProps {
+  /** Width and height in px. Defaults to `24`. */
+  size?: number;
+  /** Stroke color of the ring and check. Defaults to the theme success color. */
+  color?: string;
+}
+
+// `Animated.createAnimatedComponent` must be called once per underlying
+// component (calling it per-render would remount and break the animation).
+// react-native-svg is a lazy/optional peer, so we build the animated wrappers
+// the first time it resolves and cache them at module scope.
+function buildAnimatedSvg(svg: SvgModule) {
+  return {
+    Circle: Animated.createAnimatedComponent(svg.Circle),
+    Path: Animated.createAnimatedComponent(svg.Path),
+  };
+}
+
+let animatedSvgCache: ReturnType<typeof buildAnimatedSvg> | null = null;
+
+function getAnimatedSvg(svg: SvgModule): ReturnType<typeof buildAnimatedSvg> {
+  if (!animatedSvgCache) animatedSvgCache = buildAnimatedSvg(svg);
+  return animatedSvgCache;
+}
+
+interface AnimatedCheckSvgProps {
+  size: number;
+  color: string;
+  svg: SvgModule;
+}
+
+/** The animated SVG implementation, rendered only when react-native-svg exists. */
+const AnimatedCheckSvg = forwardRef<AnimatedCheckRef, AnimatedCheckSvgProps>(
+  function AnimatedCheckSvg({ size, color, svg }, ref) {
+    const { default: Svg } = svg;
+    const { Circle, Path } = getAnimatedSvg(svg);
+
+    const circleProgress = useSharedValue(0);
+    const checkProgress = useSharedValue(0);
+
+    const circleAnimatedProps = useAnimatedProps(() => ({
+      strokeDashoffset: CIRCLE_LENGTH - circleProgress.value * CIRCLE_LENGTH,
+    }));
+    const checkAnimatedProps = useAnimatedProps(() => ({
+      strokeDashoffset: CHECK_LENGTH - CHECK_LENGTH * checkProgress.value,
+    }));
+
+    const play = useCallback(() => {
+      circleProgress.value = 0;
+      checkProgress.value = 0;
+      circleProgress.value = withTiming(1, {
+        duration: CIRCLE_DURATION,
+        easing: Easing.linear,
+      });
+      checkProgress.value = withDelay(
+        CIRCLE_DURATION,
+        withTiming(1, { duration: CHECK_DURATION, easing: Easing.linear }),
+      );
+    }, [circleProgress, checkProgress]);
+
+    useImperativeHandle(ref, () => ({ play }), [play]);
+
+    return (
+      <Svg fill="none" viewBox={`0 0 ${VIEW_BOX} ${VIEW_BOX}`} width={size} height={size}>
+        <Circle
+          animatedProps={circleAnimatedProps}
+          cx={VIEW_BOX / 2}
+          cy={VIEW_BOX / 2}
+          r={CIRCLE_RADIUS}
+          fill="none"
+          stroke={color}
+          strokeWidth={STROKE_WIDTH}
+          strokeDasharray={CIRCLE_LENGTH}
+        />
+        <Path
+          animatedProps={checkAnimatedProps}
+          d={CHECK_PATH}
+          stroke={color}
+          strokeWidth={STROKE_WIDTH}
+          strokeDasharray={CHECK_LENGTH}
+        />
+      </Svg>
+    );
+  },
+);
+
+interface StaticCheckProps {
+  size: number;
+  color: string;
+}
+
+/**
+ * Static fallback rendered when react-native-svg is unavailable (e.g. a web
+ * bundle that omits the optional peer). Draws a plain Unicode check so the
+ * component still communicates "done"; `play()` is a no-op.
+ */
+const StaticCheck = forwardRef<AnimatedCheckRef, StaticCheckProps>(
+  function StaticCheck({ size, color }, ref) {
+    useImperativeHandle(ref, () => ({ play: () => undefined }), []);
+    return (
+      <Text
+        accessibilityElementsHidden
+        style={[styles.staticCheck, { width: size, fontSize: size * 0.8, lineHeight: size, color }]}
+      >
+        {'✓'}
+      </Text>
+    );
+  },
+);
+
+/**
+ * A draw-on checkmark: a ring strokes on, then the check strokes in. Expose a
+ * ref and call `ref.current?.play()` to (re)play — e.g. on a successful submit.
+ * Ported from Bluesky's `AnimatedCheck`.
+ */
+export const AnimatedCheck = forwardRef<AnimatedCheckRef, AnimatedCheckProps>(
+  function AnimatedCheck({ size = 24, color }, ref) {
+    const theme = useTheme();
+    const resolvedColor = color ?? theme.colors.success;
+    const svg = useMemo(() => getSvgModule(), []);
+
+    if (!svg) {
+      return <StaticCheck ref={ref} size={size} color={resolvedColor} />;
+    }
+    return <AnimatedCheckSvg ref={ref} size={size} color={resolvedColor} svg={svg} />;
+  },
+);
+
+AnimatedCheck.displayName = 'AnimatedCheck';
+
+const styles = StyleSheet.create({
+  staticCheck: {
+    textAlign: 'center',
+    fontWeight: '700',
+  },
+});

package/src/animated-check/index.ts

@@ -0,0 +1,2 @@
+export { AnimatedCheck } from './AnimatedCheck';
+export type { AnimatedCheckProps, AnimatedCheckRef } from './AnimatedCheck';

package/src/dialog/placement.ts

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
 
+import { BREAKPOINTS } from '../styles/breakpoints';
+
 /**
  * Anchor a `<Dialog>` can render against.
  *
@@ -31,14 +33,15 @@ export type ResponsiveDialogPlacement =
     };
 
 /**
- * Tailwind-default breakpoints (px). A responsive `placement` map resolves to
- * the value for the largest key whose min-width is `<=` the current viewport
- * width, falling back to `base`.
+ * Tailwind-default breakpoints (px), re-exported from the canonical
+ * {@link BREAKPOINTS} source. A responsive `placement` map resolves to the value
+ * for the largest key whose min-width is `<=` the current viewport width,
+ * falling back to `base`.
  */
-export const BREAKPOINT_SM = 640;
-export const BREAKPOINT_MD = 768;
-export const BREAKPOINT_LG = 1024;
-export const BREAKPOINT_XL = 1280;
+export const BREAKPOINT_SM = BREAKPOINTS.sm;
+export const BREAKPOINT_MD = BREAKPOINTS.md;
+export const BREAKPOINT_LG = BREAKPOINTS.lg;
+export const BREAKPOINT_XL = BREAKPOINTS.xl;
 
 /** Ordered breakpoint table, widest first, so the first match wins. */
 const RESPONSIVE_KEYS = [

package/src/fill/index.tsx

@@ -1,12 +1,12 @@
 import React, { memo } from 'react';
-import { StyleSheet, View, type ViewStyle } from 'react-native';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
 
 const FillComponent = function Fill({
   children,
   style,
 }: {
   children?: React.ReactNode;
-  style?: ViewStyle | ViewStyle[];
+  style?: StyleProp<ViewStyle>;
 }) {
   return (
     <View style={[fillStyles.base, style]}>

package/src/hooks/index.ts

@@ -3,3 +3,7 @@ export { useDelayedLoading } from './useDelayedLoading';
 export { useThrottledValue } from './useThrottledValue';
 export { usePressAnimation } from './usePressAnimation';
 export { mergeRefs } from './mergeRefs';
+export { useHaptics, BloomHapticsProvider } from './useHaptics';
+export type { HapticStrength, BloomHapticsProviderProps } from './useHaptics';
+export { useGutters } from './useGutters';
+export type { Gutter, Gutters } from './useGutters';

package/src/hooks/useGutters.ts

@@ -0,0 +1,99 @@
+import { useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+
+import { BREAKPOINTS } from '../styles/breakpoints';
+import { space } from '../styles/tokens';
+
+/**
+ * A named gutter size, or `0` for no padding on that edge.
+ *
+ * - `'compact'` — tight gutter (dense lists, chips).
+ * - `'base'` — the default page gutter.
+ * - `'wide'` — roomy gutter (marketing / hero surfaces).
+ */
+export type Gutter = 'compact' | 'base' | 'wide' | 0;
+
+/** Resolved edge padding in px — one value per side, ready to spread onto a style. */
+export interface Gutters {
+  paddingTop: number;
+  paddingRight: number;
+  paddingBottom: number;
+  paddingLeft: number;
+}
+
+/** The active viewport tier: the widest matched breakpoint, or `'base'` below `sm`. */
+type GutterTier = 'base' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * Per-size gutter padding (px) at each viewport tier. Padding steps up around
+ * tablet width (`md`), mirroring the design-system scale: phones get a tighter
+ * gutter, wider screens a roomier one. Values come from the shared `space`
+ * tokens so gutters stay on the spacing grid.
+ */
+const GUTTER_SCALE: Record<Exclude<Gutter, 0>, Record<GutterTier, number>> = {
+  compact: { base: space.sm, sm: space.sm, md: space.md, lg: space.md, xl: space.md },
+  base: { base: space.lg, sm: space.lg, md: space.xl, lg: space.xl, xl: space.xl },
+  wide: { base: space.xl, sm: space.xl, md: space._3xl, lg: space._3xl, xl: space._3xl },
+};
+
+/** Widest-first breakpoint table so the first match wins. */
+const TIERS: ReadonlyArray<readonly [Exclude<GutterTier, 'base'>, number]> = [
+  ['xl', BREAKPOINTS.xl],
+  ['lg', BREAKPOINTS.lg],
+  ['md', BREAKPOINTS.md],
+  ['sm', BREAKPOINTS.sm],
+];
+
+function resolveTier(width: number): GutterTier {
+  for (const [tier, minWidth] of TIERS) {
+    if (width >= minWidth) return tier;
+  }
+  return 'base';
+}
+
+function resolveEdge(size: Gutter, tier: GutterTier): number {
+  return size === 0 ? 0 : GUTTER_SCALE[size][tier];
+}
+
+/**
+ * Expand a 1/2/4-arg CSS-shorthand gutter list into `[top, right, bottom, left]`.
+ * `??` (not `||`) so an explicit `0` is preserved rather than falling through.
+ */
+function normalizeShorthand(gutters: Gutter[]): [Gutter, Gutter, Gutter, Gutter] {
+  const top = gutters[0] ?? 0;
+  const right = gutters[1] ?? top;
+  const bottom = gutters[2] ?? top;
+  const left = gutters[3] ?? right;
+  return [top, right, bottom, left];
+}
+
+/**
+ * Breakpoint-aware gutter padding. Give it CSS-shorthand gutter sizes and it
+ * returns resolved `padding*` values for the current viewport width, recomputed
+ * as the window crosses a breakpoint.
+ *
+ * @example
+ * ```tsx
+ * const gutters = useGutters(['base']);            // uniform
+ * const gutters = useGutters([0, 'wide']);         // no vertical, wide horizontal
+ * const gutters = useGutters(['compact', 'base', 0, 'base']); // t / r / b / l
+ * <View style={gutters} />
+ * ```
+ */
+export function useGutters(gutters: [Gutter]): Gutters;
+export function useGutters(gutters: [Gutter, Gutter]): Gutters;
+export function useGutters(gutters: [Gutter, Gutter, Gutter, Gutter]): Gutters;
+export function useGutters(gutters: Gutter[]): Gutters {
+  const { width } = useWindowDimensions();
+  const [top, right, bottom, left] = normalizeShorthand(gutters);
+
+  return useMemo<Gutters>(() => {
+    const tier = resolveTier(width);
+    return {
+      paddingTop: resolveEdge(top, tier),
+      paddingRight: resolveEdge(right, tier),
+      paddingBottom: resolveEdge(bottom, tier),
+      paddingLeft: resolveEdge(left, tier),
+    };
+  }, [width, top, right, bottom, left]);
+}

package/src/hooks/useHaptics.tsx

@@ -0,0 +1,69 @@
+import React, { createContext, useCallback, useContext, useMemo } from 'react';
+import { Platform } from 'react-native';
+
+import { lazyRequire } from '../utils/lazy-require';
+
+/**
+ * Lazily loads `expo-haptics`, returning `null` when it is not installed. The
+ * dependency is an optional peer, so calls degrade to a no-op when absent.
+ */
+const getHapticsModule = lazyRequire<typeof import('expo-haptics')>('expo-haptics');
+
+/** Impact strength requested by a caller. */
+export type HapticStrength = 'light' | 'medium' | 'heavy';
+
+interface BloomHapticsContextValue {
+  enabled: boolean;
+}
+
+const BloomHapticsContext = createContext<BloomHapticsContextValue>({ enabled: true });
+
+export interface BloomHapticsProviderProps {
+  /** Globally enable or disable haptics for the subtree. Defaults to `true`. */
+  enabled?: boolean;
+  children?: React.ReactNode;
+}
+
+/**
+ * Optional provider that toggles haptic feedback for its subtree — e.g. to honour
+ * a user "reduce haptics" preference. `useHaptics` defaults to enabled when no
+ * provider is present.
+ */
+export function BloomHapticsProvider({ enabled = true, children }: BloomHapticsProviderProps) {
+  const value = useMemo(() => ({ enabled }), [enabled]);
+  return <BloomHapticsContext.Provider value={value}>{children}</BloomHapticsContext.Provider>;
+}
+
+BloomHapticsProvider.displayName = 'BloomHapticsProvider';
+
+/**
+ * Returns a function that fires a haptic impact. The returned callback no-ops on
+ * web, when haptics are disabled via {@link BloomHapticsProvider}, or when the
+ * optional `expo-haptics` peer is not installed.
+ *
+ * `strength` defaults to `'light'`. Android is clamped to the light impact style
+ * regardless of `strength` — its medium/heavy motors read as too strong for UI
+ * feedback (tuned to match iOS perceived intensity).
+ */
+export function useHaptics(): (strength?: HapticStrength) => void {
+  const { enabled } = useContext(BloomHapticsContext);
+
+  return useCallback(
+    (strength: HapticStrength = 'light') => {
+      if (!enabled || Platform.OS === 'web') return;
+
+      const haptics = getHapticsModule();
+      if (!haptics) return;
+
+      const { ImpactFeedbackStyle } = haptics;
+      let style = ImpactFeedbackStyle.Light;
+      if (Platform.OS !== 'android') {
+        if (strength === 'medium') style = ImpactFeedbackStyle.Medium;
+        else if (strength === 'heavy') style = ImpactFeedbackStyle.Heavy;
+      }
+
+      void haptics.impactAsync(style);
+    },
+    [enabled],
+  );
+}

package/src/hooks/useInteractionState.ts

@@ -1,5 +1,11 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
+/**
+ * Tracks a single boolean interaction flag (hovered / focused / pressed).
+ *
+ * Returns a memoized `{ state, onIn, onOut }` with stable handler identities,
+ * suitable for spreading onto Pressable-like components.
+ */
 export function useInteractionState() {
   const [state, setState] = useState(false);
 
@@ -10,7 +16,7 @@ export function useInteractionState() {
     setState(false);
   }, []);
 
-  return { state, onIn, onOut };
+  return useMemo(() => ({ state, onIn, onOut }), [state, onIn, onOut]);
 }
 
 /**

package/src/index.ts

@@ -40,6 +40,10 @@ export type {
 export { useInteractionState } from './hooks/useInteractionState';
 export { useDelayedLoading } from './hooks/useDelayedLoading';
 export { useThrottledValue } from './hooks/useThrottledValue';
+export { useHaptics, BloomHapticsProvider } from './hooks/useHaptics';
+export type { HapticStrength, BloomHapticsProviderProps } from './hooks/useHaptics';
+export { useGutters } from './hooks/useGutters';
+export type { Gutter, Gutters } from './hooks/useGutters';
 
 // Icons
 export * as Icons from './icons';
@@ -97,12 +101,28 @@ export * as Typography from './typography';
 export * as Skeleton from './skeleton';
 export * as Grid from './grid';
 export { Fill } from './fill';
+export { MediaInsetBorder } from './media-inset-border';
+export type { MediaInsetBorderProps } from './media-inset-border';
 export { IconCircle } from './icon-circle';
 export { ConnectionDots } from './connection-dots';
 export type { ConnectionDotsProps } from './connection-dots';
 export { BenefitRow, BenefitList } from './benefit-list';
 export type { BenefitRowProps, BenefitListProps } from './benefit-list';
 
+// Interaction primitives
+export { PressableScale } from './pressable-scale';
+export type { PressableScaleProps } from './pressable-scale';
+export { PressableWithHover } from './pressable-with-hover';
+export type { PressableWithHoverProps } from './pressable-with-hover';
+export { SubtleHover } from './subtle-hover';
+export type { SubtleHoverProps } from './subtle-hover';
+
+// Motion presets (Reanimated enter/exit + directional screen transition)
+export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop, ScreenTransition } from './motion';
+export type { ScreenTransitionProps, ScreenTransitionDirection } from './motion';
+export { AnimatedCheck } from './animated-check';
+export type { AnimatedCheckProps, AnimatedCheckRef } from './animated-check';
+
 // Form components
 export * from './text-field';
 export * from './segmented-control';

package/src/index.web.ts

@@ -45,6 +45,10 @@ export type {
 export { useInteractionState } from './hooks/useInteractionState';
 export { useDelayedLoading } from './hooks/useDelayedLoading';
 export { useThrottledValue } from './hooks/useThrottledValue';
+export { useHaptics, BloomHapticsProvider } from './hooks/useHaptics';
+export type { HapticStrength, BloomHapticsProviderProps } from './hooks/useHaptics';
+export { useGutters } from './hooks/useGutters';
+export type { Gutter, Gutters } from './hooks/useGutters';
 
 // Icons
 export * as Icons from './icons';
@@ -102,12 +106,28 @@ export * as Typography from './typography';
 export * as Skeleton from './skeleton';
 export * as Grid from './grid';
 export { Fill } from './fill';
+export { MediaInsetBorder } from './media-inset-border';
+export type { MediaInsetBorderProps } from './media-inset-border';
 export { IconCircle } from './icon-circle';
 export { ConnectionDots } from './connection-dots/index.web';
 export type { ConnectionDotsProps } from './connection-dots/index.web';
 export { BenefitRow, BenefitList } from './benefit-list';
 export type { BenefitRowProps, BenefitListProps } from './benefit-list';
 
+// Interaction primitives
+export { PressableScale } from './pressable-scale';
+export type { PressableScaleProps } from './pressable-scale';
+export { PressableWithHover } from './pressable-with-hover';
+export type { PressableWithHoverProps } from './pressable-with-hover';
+export { SubtleHover } from './subtle-hover';
+export type { SubtleHoverProps } from './subtle-hover';
+
+// Motion presets (Reanimated enter/exit + directional screen transition)
+export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop, ScreenTransition } from './motion';
+export type { ScreenTransitionProps, ScreenTransitionDirection } from './motion';
+export { AnimatedCheck } from './animated-check';
+export type { AnimatedCheckProps, AnimatedCheckRef } from './animated-check';
+
 // Form components
 export * from './text-field';
 export * from './segmented-control';

package/src/media-inset-border/MediaInsetBorder.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Image, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { MediaInsetBorder } from './index';
+
+const meta: Meta<typeof MediaInsetBorder> = {
+  title: 'Components/MediaInsetBorder',
+  component: MediaInsetBorder,
+  argTypes: {
+    opaque: { control: 'boolean' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MediaInsetBorder>;
+
+const SAMPLE_URI =
+  'https://images.unsplash.com/photo-1526779259212-939e64788e3c?w=400&q=80';
+
+export const OverImage: Story = {
+  render: (args) => (
+    <View style={{ width: 240, height: 160, borderRadius: 8, overflow: 'hidden' }}>
+      <Image source={{ uri: SAMPLE_URI }} style={{ width: '100%', height: '100%' }} />
+      <MediaInsetBorder {...args} />
+    </View>
+  ),
+};
+
+export const OverFlatSurface: Story = {
+  render: (args) => (
+    <View
+      style={{
+        width: 240,
+        height: 160,
+        borderRadius: 8,
+        backgroundColor: '#e5e7eb',
+      }}
+    >
+      <MediaInsetBorder {...args} />
+    </View>
+  ),
+};
+
+export const Opaque: Story = {
+  args: { opaque: true },
+  render: (args) => (
+    <View
+      style={{
+        width: 240,
+        height: 160,
+        borderRadius: 8,
+        backgroundColor: '#e5e7eb',
+      }}
+    >
+      <MediaInsetBorder {...args} />
+    </View>
+  ),
+};

package/src/media-inset-border/MediaInsetBorder.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import {
+  PixelRatio,
+  Platform,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { Fill } from '../fill';
+import { borderRadius } from '../styles/tokens';
+import { useTheme } from '../theme';
+
+/**
+ * A 1px (hairline) inset border reads too heavy on high-DPI web displays, so we
+ * drop to 0.5px there. On native the platform hairline is already correct, and
+ * `PixelRatio` is only consulted on web.
+ */
+const HAIRLINE_WIDTH =
+  Platform.OS === 'web' && PixelRatio.get() > 1 ? 0.5 : StyleSheet.hairlineWidth;
+
+export interface MediaInsetBorderProps {
+  /**
+   * Render a solid, full-contrast border instead of the default softened one.
+   * Use where the inset border must line up with adjacent opaque borders, such
+   * as external link-preview cards.
+   */
+  opaque?: boolean;
+  /**
+   * Extra style merged last. Override `borderRadius` here to match the corner
+   * radius of the surrounding media box.
+   */
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+}
+
+/**
+ * A theme-aware hairline border painted just inside a media box (image, avatar,
+ * embed) to separate it from the surrounding background. Absolutely positioned
+ * to fill its parent (built on {@link Fill}) and non-interactive.
+ */
+export function MediaInsetBorder({ opaque, style, children }: MediaInsetBorderProps) {
+  const theme = useTheme();
+
+  return (
+    <Fill
+      style={[
+        styles.base,
+        { borderColor: theme.colors.border },
+        !opaque && styles.soft,
+        style,
+      ]}
+    >
+      {children}
+    </Fill>
+  );
+}
+
+MediaInsetBorder.displayName = 'MediaInsetBorder';
+
+const styles = StyleSheet.create({
+  base: {
+    borderRadius: borderRadius.sm,
+    borderWidth: HAIRLINE_WIDTH,
+    pointerEvents: 'none',
+  },
+  // Non-opaque: same border color at reduced opacity so it reads as a subtle,
+  // lower-contrast separator rather than a hard edge.
+  soft: {
+    opacity: 0.6,
+  },
+});

package/src/media-inset-border/index.ts

@@ -0,0 +1,2 @@
+export { MediaInsetBorder } from './MediaInsetBorder';
+export type { MediaInsetBorderProps } from './MediaInsetBorder';