@oxy.so/bloom 2.10.0 → 2.12.0

package/lib/module/chip/Chip.js

@@ -1,50 +1,26 @@
 "use strict";
 
-import React, { memo, useMemo } from 'react';
+import React, { forwardRef, memo, useMemo } from 'react';
 import { View, Platform, Pressable } from 'react-native';
 import { useTheme } from "../theme/use-theme.js";
 import { Text } from "../typography/Typography.js";
-import { TYPE_SCALE } from "../typography/scale.js";
 import { borderRadius } from "../styles/tokens.js";
-import { resolveAccentColors } from "../theme/accent-colors.js";
-import { resolveChipHueColors } from "./hue-colors.js";
-import { pressedSurface } from "../theme/press-colors.js";
 import { useInteractionState } from "../hooks/use-interaction-state.js";
 import { RiCloseLine } from "../icons/remix/RiCloseLine.js";
-import { interactiveWebCss, useInteractiveWebCss } from "../styles/interactive-web-css.js";
+import { NOT_DISABLED, interactiveWebCss, useInteractiveWebCss } from "../styles/interactive-web-css.js";
+import { CHIP_GEOMETRY, resolveChipPaint, resolveChipRing } from "./shared.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * The chip, one Bloom size per emphasis level:
+ * The chip, five rungs and four fills. The rung table and the paint recipe are
+ * in `shared.ts` — including why `inverted` is a different idea rather than a
+ * fourth loudness, and why the scale had to grow past 28 (five families had
+ * drawn their own pill because it did not).
  *
- *   small   caption  caption-1-medium (12/16, tracking .15), py 4  → 24 tall
- *   medium  bold     body-medium (14/20),                   py 2  → 24 tall
- *   large   subtle   body-medium (14/20),                   py 4  → 28 tall
- *
- * All px 6. Bloom keeps the full pill, like `Button`, rather than a 6px corner.
- * The icon and close slots are Bloom's own, sized to
- * the label, with Remix's `close-line` (16) as the close glyph.
+ * Bloom keeps the full pill, like `Button`, rather than a 6px corner. The icon
+ * and close slots are Bloom's own, sized to the rung, with Remix's
+ * `close-line` (16) as the close glyph.
  */
 const CLOSE_ICON = 16;
-const SIZE_CONFIG = {
-  small: {
-    height: 24,
-    type: 'caption-1-medium',
-    paddingHorizontal: 6,
-    iconGap: 4
-  },
-  medium: {
-    height: 24,
-    type: 'body-medium',
-    paddingHorizontal: 6,
-    iconGap: 4
-  },
-  large: {
-    height: 28,
-    type: 'body-medium',
-    paddingHorizontal: 6,
-    iconGap: 4
-  }
-};
 
 // ---------------------------------------------------------------------------
 //  Keyboard focus on web
@@ -62,6 +38,15 @@ const SIZE_CONFIG = {
 //  attribute rather than a class because a class never reaches the DOM here:
 //  react-native-css consumes `className` into `style` before that could happen.
 //
+//  THE RING COLOUR IS THE ACCENT RAMP'S 500, not the chip's own label. It was
+//  the label, which is the one colour guaranteed to be invisible on the chip:
+//  a solid chip's ring was white on white (measured 1.09:1 in light mode, black
+//  on black in dark). Every other ring in the library — sidebar, menus, the map
+//  markers, the category bar, the filter pills — is `accent[500]`, and it is a
+//  ring on the PAGE, so it must contrast with what is behind the chip rather
+//  than with the chip. Nothing in jest can see this: the custom property is
+//  present, spelled correctly, and carries a real colour either way.
+//
 //  `adoptStyleSheet` no-ops without a `document`, so this file stays universal
 //  and native pays for a hook call and nothing else.
 // ---------------------------------------------------------------------------
@@ -88,10 +73,25 @@ const BLOOM_CHIP_CSS = interactiveWebCss({
   hover: {
     declarations: 'opacity: 0.9;'
   },
-  outlineOffset: 2
+  outlineOffset: 2,
+  extraRules: `
+/* The rung with a minWidth ("Any", "1", "8+" in a counts row) centres its
+   label. The style prop cannot say so: the reset above is an adopted sheet and
+   wins over react-native-web's atomic classes, so it has to be said here too. */
+[data-bloom-chip][data-bloom-chip-center] {
+  justify-content: center;
+}
+/* An inverted chip answers hover with its BORDER, in JS, because the colour is
+   a resolved token. The shared opacity hover would fire as well and fade the
+   label of a pill that has no fill to fade. The disabled filter is not optional:
+   without it this would undo the 0.5 a disabled chip is dimmed to, on hover. */
+[data-bloom-chip][data-bloom-chip-inverted]${NOT_DISABLED}:hover {
+  opacity: 1;
+}
+`
 });
 const IS_WEB = Platform.OS === 'web';
-const ChipComponent = ({
+const ChipComponent = /*#__PURE__*/forwardRef(function ChipComponent({
   children,
   variant = 'subtle',
   color = 'default',
@@ -103,12 +103,15 @@ const ChipComponent = ({
   onPress,
   onClose,
   selected = false,
+  role = 'button',
   disabled = false,
+  tabIndex,
+  onKeyDown,
   style,
   textStyle,
   accessibilityLabel,
   testID
-}) => {
+}, ref) {
   const theme = useTheme();
   useInteractiveWebCss(STYLE_ID, BLOOM_CHIP_CSS);
   // No press scale, like `Button`: a press is the background change alone,
@@ -118,63 +121,65 @@ const ChipComponent = ({
     onIn: onPressIn,
     onOut: onPressOut
   } = useInteractionState();
-  // Selection promotes the chip to the brand tone \u2014 the filter-pill behaviour \u2014
-  // rather than to a second colour system of its own.
-  const colors = useMemo(() => {
-    if (!hue || selected) return resolveAccentColors(theme.colors, selected ? 'primary' : color, variant);
-    const pair = resolveChipHueColors(theme, hue, surface);
-    return {
-      ...pair,
-      border: 'transparent'
-    };
-  }, [theme, hue, surface, selected, color, variant]);
-  const sizeConfig = SIZE_CONFIG[size];
-  // All three fills go through the one resolver and land somewhere different
-  // because their REST surfaces do: `solid` keeps its tone and gains a state
-  // layer of its own label colour, `subtle` deepens the tint AND its alpha
-  // rather than flattening it, `outlined` has no fill so the press IS the fill.
-  const pressedBackground = useMemo(() => pressedSurface(theme.colors, colors.background, colors.foreground), [theme.colors, colors.background, colors.foreground]);
+  // Hover is JS only for the fill that answers it with a border colour; every
+  // other fill answers in CSS, and wiring the handlers unconditionally would
+  // re-render every chip in a tag list on pointer move for nothing.
+  const {
+    state: hovered,
+    onIn: onHoverIn,
+    onOut: onHoverOut
+  } = useInteractionState();
+  const paint = useMemo(() => resolveChipPaint(theme, {
+    tone: color,
+    variant,
+    selected,
+    hue,
+    surface
+  }), [theme, color, variant, selected, hue, surface]);
+  const ring = useMemo(() => resolveChipRing(theme), [theme]);
+  const geometry = CHIP_GEOMETRY[size];
   const containerStyle = useMemo(() => ({
-    height: sizeConfig.height,
+    height: geometry.height,
     borderRadius: borderRadius.full,
-    paddingHorizontal: sizeConfig.paddingHorizontal,
-    backgroundColor: colors.background,
-    borderWidth: variant === 'outlined' && !(hue && !selected) ? 1 : 0,
-    borderColor: colors.border,
+    paddingHorizontal: geometry.paddingHorizontal,
+    backgroundColor: paint.background,
+    borderWidth: paint.borderWidth,
+    borderColor: paint.border,
     flexDirection: 'row',
     alignItems: 'center',
-    gap: sizeConfig.iconGap,
+    gap: geometry.iconGap,
     alignSelf: 'flex-start',
+    ...(geometry.minWidth ? {
+      minWidth: geometry.minWidth,
+      justifyContent: 'center'
+    } : null),
     // A pill is a fixed-size token. In a flex row of chips (a filter bar, a tag
     // list) the default `flexShrink: 1` lets a long label squeeze its
-    // neighbours into ellipsis; shadcn's badge says the same thing as
-    // `shrink-0`. `overflow: hidden` keeps the content inside the radius.
+    // neighbours into ellipsis. `overflow: hidden` keeps the content inside the
+    // radius.
     flexShrink: 0,
     overflow: 'hidden',
     // The `:focus-visible` ring colour, read by the adopted sheet. A custom
     // property because the value is a resolved theme token the static sheet
     // cannot know; native has no such style key and ignores it.
-    '--bloom-chip-ring': colors.foreground
-  }), [sizeConfig, colors, variant, hue, selected]);
+    '--bloom-chip-ring': ring
+  }), [geometry, paint, ring]);
   const labelStyle = useMemo(() => ({
-    color: colors.foreground,
+    color: paint.foreground,
     // The label yields before the pill does: a chip narrower than its text
     // ellipsises rather than overflowing its own radius.
     flexShrink: 1
-  }), [sizeConfig, colors]);
+  }), [paint]);
 
-  // Icons inside the pill are sized to the pill, not to whatever the caller
-  // happened to pass \u2014 shadcn's badge pins them with `[&>svg]:size-3`. A slot
-  // with a fixed box does the same thing without reaching into the child.
-  const iconSlotStyle = useMemo(() => {
-    const box = Math.round(TYPE_SCALE[sizeConfig.type].fontSize * 1.15);
-    return {
-      width: box,
-      height: box,
-      alignItems: 'center',
-      justifyContent: 'center'
-    };
-  }, [sizeConfig]);
+  // Icons inside the pill are sized to the RUNG, not to whatever the caller
+  // happened to pass. A slot with a fixed box does that without reaching into
+  // the child.
+  const iconSlotStyle = useMemo(() => ({
+    width: geometry.icon,
+    height: geometry.icon,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }), [geometry]);
   const closeButton = onClose ? /*#__PURE__*/_jsx(Pressable, {
     onPress: onClose,
     hitSlop: {
@@ -189,7 +194,7 @@ const ChipComponent = ({
     children: /*#__PURE__*/_jsx(RiCloseLine, {
       width: CLOSE_ICON,
       height: CLOSE_ICON,
-      fill: colors.foreground
+      fill: paint.foreground
     })
   }) : null;
   const content = /*#__PURE__*/_jsxs(_Fragment, {
@@ -197,7 +202,7 @@ const ChipComponent = ({
       style: iconSlotStyle,
       children: startIcon
     }) : null, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
-      variant: sizeConfig.type,
+      variant: geometry.type,
       numberOfLines: 1,
       style: [labelStyle, textStyle],
       children: children
@@ -207,59 +212,94 @@ const ChipComponent = ({
     }) : null, closeButton]
   });
   if (onPress) {
-    return /*#__PURE__*/_jsx(Pressable
-    // The DOM hook the adopted sheet above hangs off.
-    //
-    // It MUST go through `dataSet`. react-native-web filters props against
-    // a fixed list and drops anything it does not know, so a literal
-    // `'data-bloom-chip'` prop never reaches the DOM — measured in a real
-    // browser: the attribute was absent, the sheet matched nothing, and
-    // the ring that appeared under keyboard focus was Chrome's own default,
-    // which is exactly what a working ring looks like from a distance.
-    // `dataSet` is the one channel react-native-web turns into `data-*`.
-    //
-    // A cast because react-native has no type for it (it is a
-    // react-native-web prop, inert on native). Same web-only-attribute case
-    // as `TextField`'s DOM mouse handlers, registered in
-    // `classname-interop.test.ts`'s exemption list. It is NOT a `className`
-    // smuggled past `styled()`, which is what that gate forbids.
-    , {
+    // Both spellings of the state, because neither platform reads the other's
+    // and there is no single prop that serves both: react-native-web ignores
+    // `accessibilityState`, while React Native has no `aria-pressed` at all
+    // (its `AccessibilityState` is disabled/selected/checked/busy/expanded).
+    // WHICH attribute is a property of the ROLE, not a preference — a `radio`
+    // carries `aria-checked` and a `tab` `aria-selected`; `aria-pressed` on
+    // either is invalid, and `aria-selected` on a `button` is too.
+    const stateProps = role === 'radio' ? {
+      accessibilityState: {
+        checked: selected,
+        disabled
+      },
+      'aria-checked': selected
+    } : role === 'tab' ? {
+      accessibilityState: {
+        selected,
+        disabled
+      },
+      'aria-selected': selected
+    } : {
+      accessibilityState: {
+        disabled,
+        selected
+      },
+      'aria-pressed': selected
+    };
+    return /*#__PURE__*/_jsx(Pressable, {
+      ref: ref
+      // The DOM hook the adopted sheet above hangs off.
+      //
+      // It MUST go through `dataSet`. react-native-web filters props against
+      // a fixed list and drops anything it does not know, so a literal
+      // `'data-bloom-chip'` prop never reaches the DOM — measured in a real
+      // browser: the attribute was absent, the sheet matched nothing, and
+      // the ring that appeared under keyboard focus was Chrome's own default,
+      // which is exactly what a working ring looks like from a distance.
+      // `dataSet` is the one channel react-native-web turns into `data-*`.
+      //
+      // A cast because react-native has no type for it (it is a
+      // react-native-web prop, inert on native). Same web-only-attribute case
+      // as `TextField`'s DOM mouse handlers, registered in
+      // `classname-interop.test.ts`'s exemption list. It is NOT a `className`
+      // smuggled past `styled()`, which is what that gate forbids.
+      ,
       ...(IS_WEB ? {
         dataSet: {
-          bloomChip: ''
-        }
+          bloomChip: '',
+          ...(geometry.minWidth ? {
+            bloomChipCenter: ''
+          } : null),
+          ...(variant === 'inverted' ? {
+            bloomChipInverted: ''
+          } : null)
+        },
+        ...(tabIndex !== undefined ? {
+          tabIndex
+        } : null),
+        ...(onKeyDown ? {
+          onKeyDown
+        } : null)
       } : {}),
       style: [containerStyle, disabled && {
         opacity: 0.5
-      },
+      }, hovered && !disabled && paint.hoveredBorder ? {
+        borderColor: paint.hoveredBorder
+      } : null,
       // Before the caller's `style`, so `style` still wins the array.
       pressed && !disabled && {
-        backgroundColor: pressedBackground
+        backgroundColor: paint.pressedBackground
       }, style],
       onPress: onPress,
       onPressIn: onPressIn,
       onPressOut: onPressOut,
+      ...(paint.hoveredBorder ? {
+        onHoverIn,
+        onHoverOut
+      } : null),
       disabled: disabled,
       accessibilityLabel: accessibilityLabel,
-      accessibilityRole: "button"
-      // Both spellings, because neither platform reads the other's and
-      // there is no single prop that serves both here: react-native-web
-      // ignores `accessibilityState`, while React Native has no
-      // `aria-pressed` at all (its `AccessibilityState` is
-      // disabled/selected/checked/busy/expanded). `aria-pressed` is also
-      // the state ARIA defines for a toggle with `role="button"` —
-      // `aria-selected` would be invalid on that role.
-      ,
-      accessibilityState: {
-        disabled,
-        selected
-      },
-      "aria-pressed": selected,
+      role: role,
+      ...stateProps,
+      "aria-disabled": disabled || undefined,
       testID: testID,
       children: content
     });
   }
   return /*#__PURE__*/_jsx(View, {
+    ref: ref,
     style: [containerStyle, disabled && {
       opacity: 0.5
     }, style],
@@ -267,7 +307,7 @@ const ChipComponent = ({
     testID: testID,
     children: content
   });
-};
+});
 export const Chip = /*#__PURE__*/memo(ChipComponent);
 Chip.displayName = 'Chip';
 //# sourceMappingURL=Chip.js.map

package/lib/module/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","useMemo","View","Platform","Pressable","useTheme","Text","TYPE_SCALE","borderRadius","resolveAccentColors","resolveChipHueColors","pressedSurface","useInteractionState","RiCloseLine","interactiveWebCss","useInteractiveWebCss","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","CLOSE_ICON","SIZE_CONFIG","small","height","type","paddingHorizontal","iconGap","medium","large","STYLE_ID","BLOOM_CHIP_CSS","selector","varPrefix","base","transition","hover","declarations","outlineOffset","IS_WEB","OS","ChipComponent","children","variant","color","hue","surface","size","startIcon","endIcon","onPress","onClose","selected","disabled","style","textStyle","accessibilityLabel","testID","theme","state","pressed","onIn","onPressIn","onOut","onPressOut","colors","pair","border","sizeConfig","pressedBackground","background","foreground","containerStyle","full","backgroundColor","borderWidth","borderColor","flexDirection","alignItems","gap","alignSelf","flexShrink","overflow","labelStyle","iconSlotStyle","box","Math","round","fontSize","width","justifyContent","closeButton","hitSlop","top","bottom","left","right","accessibilityRole","fill","content","numberOfLines","dataSet","bloomChip","opacity","accessibilityState","Chip","displayName"],"sourceRoot":"../../../src","sources":["chip/Chip.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","forwardRef","memo","useMemo","View","Platform","Pressable","useTheme","Text","borderRadius","useInteractionState","RiCloseLine","NOT_DISABLED","interactiveWebCss","useInteractiveWebCss","CHIP_GEOMETRY","resolveChipPaint","resolveChipRing","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","CLOSE_ICON","STYLE_ID","BLOOM_CHIP_CSS","selector","varPrefix","base","transition","hover","declarations","outlineOffset","extraRules","IS_WEB","OS","ChipComponent","children","variant","color","hue","surface","size","startIcon","endIcon","onPress","onClose","selected","role","disabled","tabIndex","onKeyDown","style","textStyle","accessibilityLabel","testID","ref","theme","state","pressed","onIn","onPressIn","onOut","onPressOut","hovered","onHoverIn","onHoverOut","paint","tone","ring","geometry","containerStyle","height","full","paddingHorizontal","backgroundColor","background","borderWidth","borderColor","border","flexDirection","alignItems","gap","iconGap","alignSelf","minWidth","justifyContent","flexShrink","overflow","labelStyle","foreground","iconSlotStyle","width","icon","closeButton","hitSlop","top","bottom","left","right","accessibilityRole","fill","content","type","numberOfLines","stateProps","accessibilityState","checked","dataSet","bloomChip","bloomChipCenter","bloomChipInverted","undefined","opacity","hoveredBorder","pressedBackground","Chip","displayName"],"sourceRoot":"../../../src","sources":["chip/Chip.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/chip/ChipRow.js

@@ -0,0 +1,177 @@
+"use strict";
+
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { Platform, ScrollView, View } from 'react-native';
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { useTheme } from "../theme/use-theme.js";
+import { chipRowOverflow } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A row of pills that scrolls sideways, with a fade at whichever edge has more
+ * behind it.
+ *
+ * The fade is the thing worth sharing. Without it a clipped pill just stops
+ * mid-glyph and reads as a rendering fault rather than as "there is more"; the
+ * row `category-bar` draws is the only place in the library that had one, and
+ * five filter rows were scrolling without it. The gradient resolves into
+ * `fadeColor` — the surface BEHIND the row, which the row cannot know — so a
+ * caller on a card must say so or the fade will blend into the page instead.
+ *
+ * Web only, and deliberately: the fade is painted with a CSS gradient, and on
+ * native a scroll row already shows its own bounce. The row scrolls on both.
+ *
+ * `ringInset` keeps room on every side for a pill's focus ring and takes it
+ * back out with negative margins, so the row still lines up with the heading
+ * above it — a ring clipped by its own scroller is the usual way a focus
+ * outline half-disappears.
+ *
+ * Semantics belong to the CALLER: pass `role` and `accessibilityLabel` that
+ * match what the pills are (`group` of toggles, `radiogroup`, `tablist`). The
+ * row draws nothing of its own that assistive technology should see.
+ */
+
+const IS_WEB = Platform.OS === 'web';
+
+/** Width of each edge's fade. */
+export const CHIP_ROW_EDGE = 40;
+const STYLE_ID = 'bloom-chip-row-web-css';
+const TRACK = '[data-bloom-chip-row-track]';
+const BLOOM_CHIP_ROW_CSS = `
+${TRACK} {
+  scrollbar-width: none;
+  overscroll-behavior-x: contain;
+}
+${TRACK}::-webkit-scrollbar {
+  display: none;
+}
+`;
+function ChipRowComponent({
+  children,
+  gap = 8,
+  contentInset = 0,
+  fadeColor,
+  ringInset = 4,
+  role = 'group',
+  accessibilityLabel,
+  disabled,
+  style,
+  contentContainerStyle,
+  testID
+}) {
+  const theme = useTheme();
+  React.useEffect(() => {
+    adoptStyleSheet(STYLE_ID, BLOOM_CHIP_ROW_CSS);
+  }, []);
+  const [scroll, setScroll] = useState({
+    x: 0,
+    viewport: 0,
+    content: 0
+  });
+  const overflow = useMemo(() => chipRowOverflow(scroll), [scroll]);
+  const fade = fadeColor ?? theme.colors.background;
+  const onScroll = useCallback(event => {
+    const {
+      contentOffset,
+      layoutMeasurement,
+      contentSize
+    } = event.nativeEvent;
+    setScroll({
+      x: contentOffset.x,
+      viewport: layoutMeasurement.width,
+      content: contentSize.width
+    });
+  }, []);
+  const onLayout = useCallback(event => {
+    const {
+      width
+    } = event.nativeEvent.layout;
+    setScroll(previous => previous.viewport === width ? previous : {
+      ...previous,
+      viewport: width
+    });
+  }, []);
+  const onContentSizeChange = useCallback(width => {
+    setScroll(previous => previous.content === width ? previous : {
+      ...previous,
+      content: width
+    });
+  }, []);
+
+  // The fade has to cover the SCROLLER, which sits `ringInset` outside the
+  // wrapper on every side (the negative margins above). Pinned to the wrapper's
+  // own edge instead, it leaves exactly that much uncovered, and a chip clipped
+  // by those few pixels reads as a hard cut with a fade beside it — measured in
+  // Chrome at 4px, which is enough to see.
+  const edgeStyle = side => ({
+    position: 'absolute',
+    top: -ringInset,
+    bottom: -ringInset,
+    ...(side === 'left' ? {
+      left: -ringInset
+    } : {
+      right: -ringInset
+    }),
+    width: CHIP_ROW_EDGE,
+    backgroundImage: `linear-gradient(to ${side === 'left' ? 'right' : 'left'}, ${fade} 0%, ${fade} 40%, transparent 100%)`
+  });
+  return (
+    /*#__PURE__*/
+    // The ROLE and the name go on the wrapper, not the scroller: the wrapper is
+    // the element a caller's `testID` lands on, and a group whose semantics
+    // hide one node deeper is a group every consumer's test misses.
+    _jsxs(View, {
+      role: role,
+      accessibilityLabel: accessibilityLabel,
+      "aria-disabled": disabled || undefined,
+      style: [{
+        position: 'relative'
+      }, style],
+      testID: testID,
+      children: [/*#__PURE__*/_jsx(ScrollView, {
+        ...(IS_WEB ? {
+          dataSet: {
+            bloomChipRowTrack: ''
+          }
+        } : {}),
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        scrollEventThrottle: 16,
+        onScroll: onScroll,
+        onLayout: onLayout,
+        onContentSizeChange: onContentSizeChange
+        // The ring room, and the same amount taken back out, so a focus outline
+        // is not clipped by the scroller and the row still lines up.
+        ,
+        style: {
+          flexGrow: 0,
+          marginTop: -ringInset,
+          marginBottom: -ringInset,
+          marginLeft: -ringInset,
+          marginRight: -ringInset
+        },
+        contentContainerStyle: [{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap,
+          paddingTop: ringInset,
+          paddingBottom: ringInset,
+          paddingLeft: contentInset + ringInset,
+          paddingRight: contentInset + ringInset
+        }, contentContainerStyle],
+        testID: testID ? `${testID}-track` : undefined,
+        children: children
+      }), IS_WEB && overflow.previous ? /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        style: edgeStyle('left'),
+        testID: testID ? `${testID}-fade-start` : undefined
+      }) : null, IS_WEB && overflow.next ? /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        style: edgeStyle('right'),
+        testID: testID ? `${testID}-fade-end` : undefined
+      }) : null]
+    })
+  );
+}
+export const ChipRow = /*#__PURE__*/memo(ChipRowComponent);
+ChipRow.displayName = 'ChipRow';
+//# sourceMappingURL=ChipRow.js.map

package/lib/module/chip/ChipRow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useCallback","useMemo","useState","Platform","ScrollView","View","adoptStyleSheet","useTheme","chipRowOverflow","jsx","_jsx","jsxs","_jsxs","IS_WEB","OS","CHIP_ROW_EDGE","STYLE_ID","TRACK","BLOOM_CHIP_ROW_CSS","ChipRowComponent","children","gap","contentInset","fadeColor","ringInset","role","accessibilityLabel","disabled","style","contentContainerStyle","testID","theme","useEffect","scroll","setScroll","x","viewport","content","overflow","fade","colors","background","onScroll","event","contentOffset","layoutMeasurement","contentSize","nativeEvent","width","onLayout","layout","previous","onContentSizeChange","edgeStyle","side","position","top","bottom","left","right","backgroundImage","undefined","dataSet","bloomChipRowTrack","horizontal","showsHorizontalScrollIndicator","scrollEventThrottle","flexGrow","marginTop","marginBottom","marginLeft","marginRight","flexDirection","alignItems","paddingTop","paddingBottom","paddingLeft","paddingRight","pointerEvents","next","ChipRow","displayName"],"sourceRoot":"../../../src","sources":["chip/ChipRow.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,EAAEC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACnE,SACEC,QAAQ,EACRC,UAAU,EACVC,IAAI,QAIC,cAAc;AAErB,SAASC,eAAe,QAAQ,gCAA6B;AAE7D,SAASC,QAAQ,QAAQ,uBAAoB;AAC7C,SAASC,eAAe,QAA4B,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAMC,MAAM,GAAGV,QAAQ,CAACW,EAAE,KAAK,KAAK;;AAEpC;AACA,OAAO,MAAMC,aAAa,GAAG,EAAE;AAE/B,MAAMC,QAAQ,GAAG,wBAAwB;AACzC,MAAMC,KAAK,GAAG,6BAA6B;AAE3C,MAAMC,kBAAkB,GAAG;AAC3B,EAAED,KAAK;AACP;AACA;AACA;AACA,EAAEA,KAAK;AACP;AACA;AACA,CAAC;AAED,SAASE,gBAAgBA,CAAC;EACxBC,QAAQ;EACRC,GAAG,GAAG,CAAC;EACPC,YAAY,GAAG,CAAC;EAChBC,SAAS;EACTC,SAAS,GAAG,CAAC;EACbC,IAAI,GAAG,OAAO;EACdC,kBAAkB;EAClBC,QAAQ;EACRC,KAAK;EACLC,qBAAqB;EACrBC;AACY,CAAC,EAAE;EACf,MAAMC,KAAK,GAAGxB,QAAQ,CAAC,CAAC;EACxBT,KAAK,CAACkC,SAAS,CAAC,MAAM;IACpB1B,eAAe,CAACU,QAAQ,EAAEE,kBAAkB,CAAC;EAC/C,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACe,MAAM,EAAEC,SAAS,CAAC,GAAGhC,QAAQ,CAAgB;IAAEiC,CAAC,EAAE,CAAC;IAAEC,QAAQ,EAAE,CAAC;IAAEC,OAAO,EAAE;EAAE,CAAC,CAAC;EACtF,MAAMC,QAAQ,GAAGrC,OAAO,CAAC,MAAMO,eAAe,CAACyB,MAAM,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EACjE,MAAMM,IAAI,GAAGhB,SAAS,IAAIQ,KAAK,CAACS,MAAM,CAACC,UAAU;EAEjD,MAAMC,QAAQ,GAAG1C,WAAW,CAAE2C,KAA8C,IAAK;IAC/E,MAAM;MAAEC,aAAa;MAAEC,iBAAiB;MAAEC;IAAY,CAAC,GAAGH,KAAK,CAACI,WAAW;IAC3Eb,SAAS,CAAC;MAAEC,CAAC,EAAES,aAAa,CAACT,CAAC;MAAEC,QAAQ,EAAES,iBAAiB,CAACG,KAAK;MAAEX,OAAO,EAAES,WAAW,CAACE;IAAM,CAAC,CAAC;EAClG,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,QAAQ,GAAGjD,WAAW,CAAE2C,KAAwB,IAAK;IACzD,MAAM;MAAEK;IAAM,CAAC,GAAGL,KAAK,CAACI,WAAW,CAACG,MAAM;IAC1ChB,SAAS,CAAEiB,QAAQ,IAAMA,QAAQ,CAACf,QAAQ,KAAKY,KAAK,GAAGG,QAAQ,GAAG;MAAE,GAAGA,QAAQ;MAAEf,QAAQ,EAAEY;IAAM,CAAE,CAAC;EACtG,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMI,mBAAmB,GAAGpD,WAAW,CAAEgD,KAAa,IAAK;IACzDd,SAAS,CAAEiB,QAAQ,IAAMA,QAAQ,CAACd,OAAO,KAAKW,KAAK,GAAGG,QAAQ,GAAG;MAAE,GAAGA,QAAQ;MAAEd,OAAO,EAAEW;IAAM,CAAE,CAAC;EACpG,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA;EACA;EACA;EACA;EACA,MAAMK,SAAS,GAAIC,IAAsB,KAAmB;IAC1DC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAChC,SAAS;IACfiC,MAAM,EAAE,CAACjC,SAAS;IAClB,IAAI8B,IAAI,KAAK,MAAM,GAAG;MAAEI,IAAI,EAAE,CAAClC;IAAU,CAAC,GAAG;MAAEmC,KAAK,EAAE,CAACnC;IAAU,CAAC,CAAC;IACnEwB,KAAK,EAAEjC,aAAa;IACpB6C,eAAe,EAAE,sBAAsBN,IAAI,KAAK,MAAM,GAAG,OAAO,GAAG,MAAM,KAAKf,IAAI,QAAQA,IAAI;EAChG,CAAC,CAAC;EAEF;IAAA;IACE;IACA;IACA;IACA3B,KAAA,CAACP,IAAI;MACHoB,IAAI,EAAEA,IAAK;MACXC,kBAAkB,EAAEA,kBAAmB;MACvC,iBAAeC,QAAQ,IAAIkC,SAAU;MACrCjC,KAAK,EAAE,CAAC;QAAE2B,QAAQ,EAAE;MAAW,CAAC,EAAE3B,KAAK,CAAE;MACzCE,MAAM,EAAEA,MAAO;MAAAV,QAAA,gBAEfV,IAAA,CAACN,UAAU;QAAA,IACJS,MAAM,GAAI;UAAEiD,OAAO,EAAE;YAAEC,iBAAiB,EAAE;UAAG;QAAE,CAAC,GAA+B,CAAC,CAAC;QACtFC,UAAU;QACVC,8BAA8B,EAAE,KAAM;QACtCC,mBAAmB,EAAE,EAAG;QACxBxB,QAAQ,EAAEA,QAAS;QACnBO,QAAQ,EAAEA,QAAS;QACnBG,mBAAmB,EAAEA;QACrB;QACA;QAAA;QACAxB,KAAK,EAAE;UACLuC,QAAQ,EAAE,CAAC;UACXC,SAAS,EAAE,CAAC5C,SAAS;UACrB6C,YAAY,EAAE,CAAC7C,SAAS;UACxB8C,UAAU,EAAE,CAAC9C,SAAS;UACtB+C,WAAW,EAAE,CAAC/C;QAChB,CAAE;QACFK,qBAAqB,EAAE,CACrB;UACE2C,aAAa,EAAE,KAAK;UACpBC,UAAU,EAAE,QAAQ;UACpBpD,GAAG;UACHqD,UAAU,EAAElD,SAAS;UACrBmD,aAAa,EAAEnD,SAAS;UACxBoD,WAAW,EAAEtD,YAAY,GAAGE,SAAS;UACrCqD,YAAY,EAAEvD,YAAY,GAAGE;QAC/B,CAAC,EACDK,qBAAqB,CACrB;QACFC,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,QAAQ,GAAG+B,SAAU;QAAAzC,QAAA,EAE9CA;MAAQ,CACC,CAAC,EACZP,MAAM,IAAIyB,QAAQ,CAACa,QAAQ,gBAC1BzC,IAAA,CAACL,IAAI;QAACyE,aAAa,EAAC,MAAM;QAAClD,KAAK,EAAEyB,SAAS,CAAC,MAAM,CAAE;QAACvB,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,aAAa,GAAG+B;MAAU,CAAE,CAAC,GAC1G,IAAI,EACPhD,MAAM,IAAIyB,QAAQ,CAACyC,IAAI,gBACtBrE,IAAA,CAACL,IAAI;QAACyE,aAAa,EAAC,MAAM;QAAClD,KAAK,EAAEyB,SAAS,CAAC,OAAO,CAAE;QAACvB,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,WAAW,GAAG+B;MAAU,CAAE,CAAC,GACzG,IAAI;IAAA,CACJ;EAAC;AAEX;AAEA,OAAO,MAAMmB,OAAO,gBAAGjF,IAAI,CAACoB,gBAAgB,CAAC;AAC7C6D,OAAO,CAACC,WAAW,GAAG,SAAS","ignoreList":[]}

package/lib/module/chip/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
 export { Chip } from "./Chip.js";
+export { ChipRow, CHIP_ROW_EDGE } from "./ChipRow.js";
 export { resolveChipHueColors } from "./hue-colors.js";
+export { CHIP_GEOMETRY, chipRowOverflow, resolveChipPaint, resolveChipRing } from "./shared.js";
 //# sourceMappingURL=index.js.map

package/lib/module/chip/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Chip","resolveChipHueColors"],"sourceRoot":"../../../src","sources":["chip/index.ts"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,WAAQ;AAC7B,SAASC,oBAAoB,QAAQ,iBAAc","ignoreList":[]}
+{"version":3,"names":["Chip","ChipRow","CHIP_ROW_EDGE","resolveChipHueColors","CHIP_GEOMETRY","chipRowOverflow","resolveChipPaint","resolveChipRing"],"sourceRoot":"../../../src","sources":["chip/index.ts"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,WAAQ;AAC7B,SAASC,OAAO,EAAEC,aAAa,QAAQ,cAAW;AAClD,SAASC,oBAAoB,QAAQ,iBAAc;AACnD,SAASC,aAAa,EAAEC,eAAe,EAAEC,gBAAgB,EAAEC,eAAe,QAAQ,aAAU","ignoreList":[]}