@12-apps/ui 6.96.1 → 6.96.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/dist/_internal/components/data-display/Avatar/Avatar.js +1 -1
  2. package/dist/_internal/components/data-display/Chip/Chip.js +3 -3
  3. package/dist/_internal/components/data-display/Chip/Chip.metrics.js +3 -1
  4. package/dist/_internal/components/data-display/Chip/Chip.styles.js +2 -2
  5. package/dist/_internal/components/data-display/index.js +4 -4
  6. package/dist/_internal/components/index.js +11 -11
  7. package/dist/_internal/components/layout/SettingCard/SettingCard.js +6 -6
  8. package/dist/_internal/components/layout/SettingCard/SettingCard.parts.js +4 -4
  9. package/dist/_internal/components/layout/SettingCard/SettingCard.summary.js +5 -5
  10. package/dist/_internal/components/layout/SettingCard/SettingGrid.js +5 -5
  11. package/dist/_internal/components/layout/SettingCard/SettingGroup.js +7 -7
  12. package/dist/_internal/components/layout/SettingCard/SettingSwitch.js +6 -6
  13. package/dist/_internal/components/layout/SettingCard/SettingToggle.js +7 -7
  14. package/dist/_internal/components/layout/index.js +10 -10
  15. package/dist/_internal/user-avatar/user-avatar.js +2 -2
  16. package/dist/{chunk-FMNOCFD2.js → chunk-2C7AWMV7.js} +2 -2
  17. package/dist/{chunk-I3QVH34Y.js → chunk-44BTMZB6.js} +3 -3
  18. package/dist/{chunk-GOWKXKWO.js → chunk-44I2KXKW.js} +7 -5
  19. package/dist/chunk-44I2KXKW.js.map +1 -0
  20. package/dist/{chunk-JIEVKHOH.js → chunk-EXEBN5ZP.js} +16 -1
  21. package/dist/chunk-EXEBN5ZP.js.map +1 -0
  22. package/dist/{chunk-Y5J2EIR4.js → chunk-F3UHWLTD.js} +2 -2
  23. package/dist/{chunk-52NM5VEW.js → chunk-GZBLDPXY.js} +3 -1
  24. package/dist/{chunk-52NM5VEW.js.map → chunk-GZBLDPXY.js.map} +1 -1
  25. package/dist/{chunk-UOI3RX4W.js → chunk-IAPFZJ6I.js} +2 -2
  26. package/dist/{chunk-E2UOEI7N.js → chunk-JJYECKEL.js} +2 -2
  27. package/dist/{chunk-BTDRBO4G.js → chunk-L2ICH44N.js} +3 -3
  28. package/dist/{chunk-VILNULUY.js → chunk-RCULGFEH.js} +3 -3
  29. package/dist/{chunk-PQ4P4OEA.js → chunk-SSWNJR36.js} +2 -2
  30. package/dist/{chunk-KCH6O6IC.js → chunk-XSLF3YGH.js} +3 -3
  31. package/dist/data-display/Avatar.js +1 -1
  32. package/dist/data-display/Chip.js +3 -3
  33. package/dist/layout/SettingCard.js +10 -10
  34. package/dist/native/data-display/Chip.js +5 -2
  35. package/dist/native/data-display/Chip.js.map +1 -1
  36. package/dist/types/components/data-display/Avatar/Avatar.d.ts.map +1 -1
  37. package/dist/types/components/data-display/Chip/Chip.base.d.ts +3 -2
  38. package/dist/types/components/data-display/Chip/Chip.base.d.ts.map +1 -1
  39. package/dist/types/components/data-display/Chip/Chip.metrics.d.ts +6 -0
  40. package/dist/types/components/data-display/Chip/Chip.metrics.d.ts.map +1 -1
  41. package/dist/types/components/data-display/Chip/Chip.styles.d.ts.map +1 -1
  42. package/dist/types-native/components/data-display/Chip/Chip.base.d.ts +3 -2
  43. package/dist/types-native/components/data-display/Chip/Chip.base.d.ts.map +1 -1
  44. package/dist/types-native/components/data-display/Chip/Chip.look.native.d.ts.map +1 -1
  45. package/dist/types-native/components/data-display/Chip/Chip.metrics.d.ts +6 -0
  46. package/dist/types-native/components/data-display/Chip/Chip.metrics.d.ts.map +1 -1
  47. package/dist/user-avatar.js +2 -2
  48. package/package.json +1 -1
  49. package/src/components/data-display/Avatar/Avatar.tsx +22 -3
  50. package/src/components/data-display/Chip/Chip.base.ts +3 -2
  51. package/src/components/data-display/Chip/Chip.look.native.ts +6 -3
  52. package/src/components/data-display/Chip/Chip.metrics.ts +6 -0
  53. package/src/components/data-display/Chip/Chip.styles.tsx +9 -4
  54. package/src/components/data-display/Chip/chip.md +1 -1
  55. package/dist/chunk-GOWKXKWO.js.map +0 -1
  56. package/dist/chunk-JIEVKHOH.js.map +0 -1
  57. /package/dist/{chunk-FMNOCFD2.js.map → chunk-2C7AWMV7.js.map} +0 -0
  58. /package/dist/{chunk-I3QVH34Y.js.map → chunk-44BTMZB6.js.map} +0 -0
  59. /package/dist/{chunk-Y5J2EIR4.js.map → chunk-F3UHWLTD.js.map} +0 -0
  60. /package/dist/{chunk-UOI3RX4W.js.map → chunk-IAPFZJ6I.js.map} +0 -0
  61. /package/dist/{chunk-E2UOEI7N.js.map → chunk-JJYECKEL.js.map} +0 -0
  62. /package/dist/{chunk-BTDRBO4G.js.map → chunk-L2ICH44N.js.map} +0 -0
  63. /package/dist/{chunk-VILNULUY.js.map → chunk-RCULGFEH.js.map} +0 -0
  64. /package/dist/{chunk-PQ4P4OEA.js.map → chunk-SSWNJR36.js.map} +0 -0
  65. /package/dist/{chunk-KCH6O6IC.js.map → chunk-XSLF3YGH.js.map} +0 -0
@@ -3,10 +3,10 @@ import {
3
3
  chipStyles,
4
4
  iconWithTestId,
5
5
  makeKeyDownHandler
6
- } from "./chunk-GOWKXKWO.js";
6
+ } from "./chunk-44I2KXKW.js";
7
7
  import {
8
8
  chipMuiSize
9
- } from "./chunk-52NM5VEW.js";
9
+ } from "./chunk-GZBLDPXY.js";
10
10
  import {
11
11
  chipRole,
12
12
  isClickable,
@@ -77,4 +77,4 @@ Chip.displayName = "Chip";
77
77
  export {
78
78
  Chip
79
79
  };
80
- //# sourceMappingURL=chunk-BTDRBO4G.js.map
80
+ //# sourceMappingURL=chunk-L2ICH44N.js.map
@@ -4,13 +4,13 @@ import {
4
4
  import {
5
5
  SettingSwitchBlock,
6
6
  useSettingSwitchIds
7
- } from "./chunk-I3QVH34Y.js";
7
+ } from "./chunk-44BTMZB6.js";
8
8
  import {
9
9
  SettingGroupContext
10
10
  } from "./chunk-XJQNSMGA.js";
11
11
  import {
12
12
  partTestId
13
- } from "./chunk-Y5J2EIR4.js";
13
+ } from "./chunk-F3UHWLTD.js";
14
14
  import {
15
15
  dependentsStyles,
16
16
  hintStyles,
@@ -84,4 +84,4 @@ SettingGroup.displayName = "SettingGroup";
84
84
  export {
85
85
  SettingGroup
86
86
  };
87
- //# sourceMappingURL=chunk-VILNULUY.js.map
87
+ //# sourceMappingURL=chunk-RCULGFEH.js.map
@@ -4,7 +4,7 @@ import {
4
4
  import {
5
5
  SettingSwitchBlock,
6
6
  useSettingSwitchIds
7
- } from "./chunk-I3QVH34Y.js";
7
+ } from "./chunk-44BTMZB6.js";
8
8
  import {
9
9
  useSettingGroup
10
10
  } from "./chunk-XJQNSMGA.js";
@@ -44,4 +44,4 @@ SettingToggle.displayName = "SettingToggle";
44
44
  export {
45
45
  SettingToggle
46
46
  };
47
- //# sourceMappingURL=chunk-PQ4P4OEA.js.map
47
+ //# sourceMappingURL=chunk-SSWNJR36.js.map
@@ -3,14 +3,14 @@ import {
3
3
  } from "./chunk-SALQ65SM.js";
4
4
  import {
5
5
  useSummaryInfo
6
- } from "./chunk-FMNOCFD2.js";
6
+ } from "./chunk-2C7AWMV7.js";
7
7
  import {
8
8
  LearnMore,
9
9
  PendingSpinner,
10
10
  SaveError,
11
11
  SettingHeader,
12
12
  partTestId
13
- } from "./chunk-Y5J2EIR4.js";
13
+ } from "./chunk-F3UHWLTD.js";
14
14
  import {
15
15
  SETTING_CARD_OPEN_ATTR,
16
16
  actionsStyles,
@@ -170,4 +170,4 @@ SettingCard.displayName = "SettingCard";
170
170
  export {
171
171
  SettingCard
172
172
  };
173
- //# sourceMappingURL=chunk-KCH6O6IC.js.map
173
+ //# sourceMappingURL=chunk-XSLF3YGH.js.map
@@ -2,7 +2,7 @@ import "../chunk-UDQSIRAP.js";
2
2
  import {
3
3
  Avatar,
4
4
  AvatarGroup
5
- } from "../chunk-JIEVKHOH.js";
5
+ } from "../chunk-EXEBN5ZP.js";
6
6
  import "../chunk-7XSCEHGA.js";
7
7
  import "../chunk-MTEQEPNY.js";
8
8
  import "../chunk-6ZZGK5DT.js";
@@ -1,9 +1,9 @@
1
1
  import "../chunk-2GTORM5E.js";
2
2
  import {
3
3
  Chip
4
- } from "../chunk-BTDRBO4G.js";
5
- import "../chunk-GOWKXKWO.js";
6
- import "../chunk-52NM5VEW.js";
4
+ } from "../chunk-L2ICH44N.js";
5
+ import "../chunk-44I2KXKW.js";
6
+ import "../chunk-GZBLDPXY.js";
7
7
  import "../chunk-BF4FYOAR.js";
8
8
  import "../chunk-XJAD6E3V.js";
9
9
  import "../chunk-F5H2ZXST.js";
@@ -1,22 +1,22 @@
1
1
  import "../chunk-QGUNUXTT.js";
2
2
  import {
3
3
  SettingCard
4
- } from "../chunk-KCH6O6IC.js";
4
+ } from "../chunk-XSLF3YGH.js";
5
5
  import {
6
6
  SettingToggle
7
- } from "../chunk-PQ4P4OEA.js";
7
+ } from "../chunk-SSWNJR36.js";
8
8
  import {
9
9
  SettingGroup
10
- } from "../chunk-VILNULUY.js";
10
+ } from "../chunk-RCULGFEH.js";
11
11
  import "../chunk-SALQ65SM.js";
12
- import "../chunk-I3QVH34Y.js";
13
- import "../chunk-FMNOCFD2.js";
12
+ import "../chunk-44BTMZB6.js";
13
+ import "../chunk-2C7AWMV7.js";
14
14
  import "../chunk-XJQNSMGA.js";
15
15
  import {
16
16
  SETTING_GRID_CONTAINER,
17
17
  SettingGrid
18
- } from "../chunk-UOI3RX4W.js";
19
- import "../chunk-Y5J2EIR4.js";
18
+ } from "../chunk-IAPFZJ6I.js";
19
+ import "../chunk-F3UHWLTD.js";
20
20
  import "../chunk-UJ7EHEXG.js";
21
21
  import "../chunk-KSZ6GH3J.js";
22
22
  import "../chunk-RN7UJI7S.js";
@@ -28,9 +28,9 @@ import "../chunk-Z5WUSI47.js";
28
28
  import "../chunk-BCWL7HUO.js";
29
29
  import "../chunk-QYJ25FWM.js";
30
30
  import "../chunk-2GTORM5E.js";
31
- import "../chunk-BTDRBO4G.js";
32
- import "../chunk-GOWKXKWO.js";
33
- import "../chunk-52NM5VEW.js";
31
+ import "../chunk-L2ICH44N.js";
32
+ import "../chunk-44I2KXKW.js";
33
+ import "../chunk-GZBLDPXY.js";
34
34
  import "../chunk-BF4FYOAR.js";
35
35
  import "../chunk-4PJ52YBO.js";
36
36
  import "../chunk-EIMFA7KP.js";
@@ -13,7 +13,8 @@ import {
13
13
  useUiTheme
14
14
  } from "../chunks/chunk-ZYSOBULX.js";
15
15
  import {
16
- alpha
16
+ alpha,
17
+ darken
17
18
  } from "../chunks/chunk-DNTO2D5M.js";
18
19
 
19
20
  // src/components/data-display/Chip/Chip.native.tsx
@@ -90,6 +91,7 @@ var DELETE_ICON_ON_COLOR_ALPHA = 0.7;
90
91
  var OUTLINED_HOVER_ALPHA = 0.04;
91
92
  var SOFT_GROUND_ALPHA = 0.14;
92
93
  var SOFT_HOVER_ALPHA = 0.22;
94
+ var SOFT_WARNING_LIGHT_DARKEN = 0.2;
93
95
 
94
96
  // src/components/data-display/Chip/Chip.look.native.ts
95
97
  var SELECTED_OPACITY = 0.08;
@@ -122,7 +124,8 @@ function softPaint(theme, color) {
122
124
  };
123
125
  }
124
126
  const accent = theme.palette[color];
125
- const ink = theme.mode === "dark" ? accent.light : accent.dark;
127
+ const lightInk = color === "warning" ? darken(accent.dark, SOFT_WARNING_LIGHT_DARKEN) : accent.dark;
128
+ const ink = theme.mode === "dark" ? accent.light : lightInk;
126
129
  return {
127
130
  container: { backgroundColor: alpha(accent.main, SOFT_GROUND_ALPHA) },
128
131
  pressed: { backgroundColor: alpha(accent.main, SOFT_HOVER_ALPHA) },
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/data-display/Chip/Chip.native.tsx","../../../src/components/data-display/Chip/Chip.helpers.ts","../../../src/components/data-display/Chip/Chip.metrics.ts","../../../src/components/data-display/Chip/Chip.look.native.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n Image,\n Pressable,\n Text as RNText,\n View,\n type GestureResponderEvent,\n type StyleProp,\n type ViewStyle,\n} from 'react-native';\n\nimport { chipKeyAction, chipRole, isClickable, makeTestId } from './Chip.helpers';\nimport {\n chipAvatarStyle,\n chipContainerStyle,\n chipDeleteSlotStyle,\n chipLabelStyle,\n chipLeadingSlotStyle,\n chipMetrics,\n chipPaint,\n type ChipPaint,\n} from './Chip.look.native';\nimport { chipMuiSize, type ChipSizeMetrics } from './Chip.metrics';\nimport type { ChipProps, ChipVariant } from './Chip.types.native';\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webKeyDown, type WebKeyHandler } from '../../../platform/web-keys';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\n\ninterface SlotArgs {\n metrics: ChipSizeMetrics;\n variant: ChipVariant;\n}\n\n/**\n * The leading slot. MUI restyles the icon ELEMENT through a class — 24px, or\n * 18px when small — which a native renderer cannot do to an arbitrary node, so\n * the slot carries the margins and the glyph keeps the size it was given.\n */\nfunction LeadingSlot({\n metrics,\n variant,\n avatar,\n avatarSrc,\n icon,\n testID,\n}: SlotArgs &\n Pick<ChipProps, 'avatar' | 'avatarSrc' | 'icon'> & { testID: string }): React.JSX.Element | null {\n if (avatar) {\n return <View style={chipLeadingSlotStyle(metrics, variant, 'avatar')}>{avatar}</View>;\n }\n if (avatarSrc) {\n return (\n <View style={chipLeadingSlotStyle(metrics, variant, 'avatar')}>\n <Image\n source={{ uri: avatarSrc }}\n style={chipAvatarStyle(metrics)}\n accessibilityIgnoresInvertColors\n />\n </View>\n );\n }\n if (icon) {\n return (\n <View style={chipLeadingSlotStyle(metrics, variant, 'icon')} testID={testID}>\n {icon}\n </View>\n );\n }\n return null;\n}\n\n/** MUI's `deleteIcon`: the `Cancel` glyph, pressable, tucked under the label. */\nfunction DeleteSlot({\n metrics,\n variant,\n color,\n onDelete,\n deleteLabel = EN_US_UI_LABELS.common.delete,\n disabled,\n testID,\n}: SlotArgs & {\n color: string;\n deleteLabel?: string;\n onDelete?: () => void;\n disabled?: boolean;\n testID: string;\n}): React.JSX.Element {\n return (\n <Pressable\n testID={testID}\n role=\"button\"\n aria-label={deleteLabel}\n disabled={disabled}\n onPress={onDelete}\n style={chipDeleteSlotStyle(metrics, variant)}\n >\n <Icon name=\"Cancel\" size={metrics.deleteSize} color={color} />\n </Pressable>\n );\n}\n\ninterface ChipBodyProps extends SlotArgs {\n paint: ChipPaint;\n label: string;\n avatar?: ChipProps['avatar'];\n avatarSrc?: string;\n icon?: ChipProps['icon'];\n deletable?: boolean;\n disabled?: boolean;\n onDelete?: () => void;\n deleteLabel?: string;\n idFor: (suffix: string) => string;\n}\n\n/** Everything inside the pill: the leading slot, the label, the delete button. */\nfunction ChipBody({\n metrics,\n variant,\n paint,\n label,\n avatar,\n avatarSrc,\n icon,\n deletable,\n disabled,\n onDelete,\n deleteLabel,\n idFor,\n}: ChipBodyProps): React.JSX.Element {\n const theme = useUiTheme();\n return (\n <>\n <LeadingSlot\n metrics={metrics}\n variant={variant}\n avatar={avatar}\n avatarSrc={avatarSrc}\n icon={icon}\n testID={idFor('icon')}\n />\n <RNText\n testID={idFor('label')}\n numberOfLines={1}\n style={[chipLabelStyle(theme, metrics, variant), paint.label]}\n >\n {label}\n </RNText>\n {deletable ? (\n <DeleteSlot\n metrics={metrics}\n variant={variant}\n color={paint.deleteColor}\n onDelete={onDelete}\n deleteLabel={deleteLabel}\n disabled={disabled}\n testID={idFor('delete')}\n />\n ) : null}\n </>\n );\n}\n\ninterface KeyDownArgs {\n role: 'option' | 'button' | undefined;\n disabled?: boolean;\n deletable?: boolean;\n selectable?: boolean;\n /** Whether the chip acts at all, under either handler spelling. */\n acts?: unknown;\n onClick?: () => void;\n onDelete?: () => void;\n}\n\n/**\n * The half of the chip's keyboard contract react-native-web does NOT already\n * cover. Its `Pressable` turns Enter into a press on any role, and Space into\n * one only on a `button` role (`isValidKeyPress`) — so a selectable chip, which\n * is an `option`, needs Space wiring here, and Delete/Backspace is never its.\n * On a device none of this is ever called.\n */\nfunction makeChipKeyDown(args: KeyDownArgs): WebKeyHandler {\n return (event) => {\n const action = chipKeyAction(event.key, { ...args, onClick: args.acts });\n if (action === null) return;\n if (action === 'delete') {\n event.preventDefault();\n args.onDelete?.();\n return;\n }\n if (event.key === 'Enter' || args.role === 'button') return;\n event.preventDefault();\n args.onClick?.();\n };\n}\n\n/**\n * The native `Chip`: MUI's pill on a `Pressable`, reachable by keyboard only\n * when it acts — which is the same rule MUI applies through `clickable`.\n */\nexport const Chip = React.forwardRef<View, ChipProps>((props, ref) => {\n const {\n label,\n variant = 'filled',\n size = 'md',\n color = 'primary',\n avatarSrc,\n avatar,\n icon,\n selected,\n selectable,\n deletable,\n disabled,\n onClick,\n onPress,\n onDelete,\n deleteLabel,\n dataTestId,\n testID,\n style,\n ...rest\n } = props;\n const theme = useUiTheme();\n const chipId = testID ?? dataTestId;\n const metrics = chipMetrics(chipMuiSize(size));\n const paint = chipPaint(theme, variant, color, Boolean(selected));\n const acts = onClick ?? onPress;\n const clickable = isClickable(disabled, acts, selectable);\n const role = chipRole(selectable, acts);\n\n const base: StyleProp<ViewStyle> = [\n chipContainerStyle(metrics, Boolean(disabled)),\n paint.container,\n style,\n ];\n\n const press = (event: GestureResponderEvent): void => {\n onClick?.();\n onPress?.(event);\n };\n\n return (\n <Pressable\n ref={ref}\n testID={chipId || 'chip'}\n role={role}\n aria-selected={selectable ? selected : undefined}\n disabled={disabled}\n // MUI makes only a clickable chip keyboard-reachable; react-native-web\n // would otherwise give every Pressable a tab stop.\n tabIndex={clickable ? 0 : -1}\n onPress={clickable ? press : undefined}\n {...webKeyDown(\n makeChipKeyDown({ role, disabled, deletable, selectable, acts, onClick, onDelete }),\n )}\n style={(state) => [base, state.pressed && clickable ? paint.pressed : null]}\n {...rest}\n >\n <ChipBody\n metrics={metrics}\n variant={variant}\n paint={paint}\n label={label}\n avatar={avatar}\n avatarSrc={avatarSrc}\n icon={icon}\n deletable={deletable}\n disabled={disabled}\n onDelete={onDelete}\n deleteLabel={deleteLabel}\n idFor={makeTestId(chipId)}\n />\n </Pressable>\n );\n});\n\nChip.displayName = 'Chip';\n","/** `${dataTestId}-label`, or `chip-label` when the caller named nothing. */\nexport const makeTestId =\n (dataTestId?: string) =>\n (suffix: string): string =>\n dataTestId ? `${dataTestId}-${suffix}` : `chip-${suffix}`;\n\n/** `option` when the chip belongs to a selectable set, `button` when it merely acts. */\nexport const chipRole = (\n selectable?: boolean,\n // `unknown`, because the two renderers hand this a differently-typed handler\n // and all that is asked of it here is whether the caller supplied one.\n onClick?: unknown,\n): 'option' | 'button' | undefined => {\n if (selectable) return 'option';\n return onClick ? 'button' : undefined;\n};\n\nexport const isClickable = (\n disabled?: boolean,\n onClick?: unknown,\n selectable?: boolean,\n): boolean => !disabled && (Boolean(onClick) || Boolean(selectable));\n\n/** What a key press on a chip means, if anything. */\nexport type ChipKeyAction = 'delete' | 'activate' | null;\n\nconst DELETE_KEYS = new Set(['Delete', 'Backspace']);\nconst ACTIVATE_KEYS = new Set(['Enter', ' ']);\n\nexport interface ChipKeyArgs {\n disabled?: boolean;\n deletable?: boolean;\n selectable?: boolean;\n onClick?: unknown;\n onDelete?: unknown;\n}\n\n/**\n * A chip is not a native control, so the two keyboard conventions it stands in\n * for are decided by hand: Delete/Backspace removes it, Enter/Space activates\n * it. Both renderers read this one decision — the web wires it to the DOM\n * handler, the native half to react-native-web's (see `Chip.native.tsx`).\n */\nexport function chipKeyAction(key: string, a: ChipKeyArgs): ChipKeyAction {\n if (a.disabled) return null;\n if (DELETE_KEYS.has(key) && a.deletable && a.onDelete) return 'delete';\n if (ACTIVATE_KEYS.has(key) && (a.onClick || a.selectable)) return 'activate';\n return null;\n}\n","import type { ChipSize } from './Chip.base';\n\n/**\n * THE NUMBERS BOTH `Chip` RENDERERS DRAW WITH.\n *\n * Most of them are MUI's own `Chip` geometry rather than anything this package\n * writes — the 32px pill, the 13px label, the 5px/-6px icon tuck — because the\n * web half hands the drawing to `MuiChip` and the native half has to draw it.\n * Restated here once, read by both, so the two cannot disagree about a chip's\n * height. What THIS package adds (`Chip.styles.tsx`'s hover lift, its shadow\n * and its transition) is at the bottom, and the web derives its CSS from it.\n */\n\n/** MUI draws two chip sizes; ours are the house abbreviations for them. */\nexport type ChipMuiSize = 'small' | 'medium';\n\nexport const chipMuiSize = (size: ChipSize): ChipMuiSize =>\n size === 'xs' || size === 'sm' ? 'small' : 'medium';\n\nexport interface ChipSizeMetrics {\n height: number;\n /** The label's own side padding, filled and outlined (outlined is 1px tighter). */\n labelPadding: number;\n labelPaddingOutlined: number;\n /** The leading icon's box, and how far it tucks under the label. */\n iconSize: number;\n iconMarginLeft: number;\n iconMarginLeftOutlined: number;\n iconMarginRight: number;\n /** The avatar's round box and the type inside it. */\n avatarSize: number;\n avatarFontSize: number;\n avatarMarginLeft: number;\n avatarMarginLeftOutlined: number;\n avatarMarginRight: number;\n /** The delete glyph's box and its own tuck. */\n deleteSize: number;\n deleteMarginLeft: number;\n deleteMarginRight: number;\n deleteMarginRightOutlined: number;\n}\n\nexport const CHIP_SIZES: Record<ChipMuiSize, ChipSizeMetrics> = {\n medium: {\n height: 32,\n labelPadding: 12,\n labelPaddingOutlined: 11,\n iconSize: 24,\n iconMarginLeft: 5,\n iconMarginLeftOutlined: 4,\n iconMarginRight: -6,\n avatarSize: 24,\n avatarFontSize: 12,\n avatarMarginLeft: 5,\n avatarMarginLeftOutlined: 4,\n avatarMarginRight: -6,\n deleteSize: 22,\n deleteMarginLeft: -6,\n deleteMarginRight: 5,\n deleteMarginRightOutlined: 5,\n },\n small: {\n height: 24,\n labelPadding: 8,\n labelPaddingOutlined: 7,\n iconSize: 18,\n iconMarginLeft: 4,\n iconMarginLeftOutlined: 2,\n iconMarginRight: -4,\n avatarSize: 18,\n avatarFontSize: 10,\n avatarMarginLeft: 4,\n avatarMarginLeftOutlined: 2,\n avatarMarginRight: -4,\n deleteSize: 16,\n deleteMarginLeft: -4,\n deleteMarginRight: 4,\n deleteMarginRightOutlined: 3,\n },\n};\n\n/** MUI's `borderRadius: 32 / 2` — a pill at either height, since the box clamps it. */\nexport const CHIP_RADIUS = 16;\n/** The label's type, in px. MUI sets it on the root and the small size keeps it. */\nexport const CHIP_FONT_SIZE = 13;\n/** MUI's `palette.action.disabledOpacity`. */\nexport const CHIP_DISABLED_OPACITY = 0.38;\n/** An outlined chip's hairline: the hue at 0.7, or the grey ramp for `neutral`. */\nexport const OUTLINED_BORDER_ALPHA = 0.7;\n/** The delete glyph over an unaccented chip, and over a coloured one. */\nexport const DELETE_ICON_ALPHA = 0.26;\nexport const DELETE_ICON_ON_COLOR_ALPHA = 0.7;\n/** MUI's `action.hoverOpacity`, the wash a clickable outlined chip takes. */\nexport const OUTLINED_HOVER_ALPHA = 0.04;\n\n/* ── What this package adds on top of MUI's chip ──────────────────────────── */\n\n/** The lift a clickable chip takes on hover, and the shadow under it. */\nexport const HOVER_LIFT_PX = 1;\nexport const HOVER_SHADOW = { offsetY: 4, blur: 12, alphaLight: 0.15, alphaDark: 0.3 } as const;\nexport const CHIP_TRANSITION_MS = 200;\nexport const CHIP_TRANSITION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n/** A soft chip's ground: the colour at this alpha over the page. */\nexport const SOFT_GROUND_ALPHA = 0.14;\n/** A soft chip's hover ground. */\nexport const SOFT_HOVER_ALPHA = 0.22;\n/** A soft chip's keyboard-focus ring, in design px (read through `rem`). */\nexport const SOFT_FOCUS_RING = { width: 2, offset: 2 } as const;\n","import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';\n\nimport type { ChipColor, ChipVariant } from './Chip.base';\nimport {\n CHIP_DISABLED_OPACITY,\n CHIP_FONT_SIZE,\n CHIP_RADIUS,\n CHIP_SIZES,\n DELETE_ICON_ALPHA,\n DELETE_ICON_ON_COLOR_ALPHA,\n OUTLINED_BORDER_ALPHA,\n OUTLINED_HOVER_ALPHA,\n SOFT_GROUND_ALPHA,\n SOFT_HOVER_ALPHA,\n type ChipMuiSize,\n type ChipSizeMetrics,\n} from './Chip.metrics';\nimport { alpha } from '../../../tokens/color';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/** MUI's `action.selectedOpacity`; its hover wash adds `OUTLINED_HOVER_ALPHA` on top. */\nconst SELECTED_OPACITY = 0.08;\n\nexport interface ChipPaint {\n container: ViewStyle;\n /** The web's `:hover` background, which touch has no equivalent of. */\n pressed: ViewStyle;\n label: TextStyle;\n deleteColor: string;\n}\n\n/** `neutral` is MUI's `default`: no accent, the ink and the ramp instead. */\nconst isAccented = (color: ChipColor): boolean => color !== 'neutral';\n\n/** An unaccented chip's hairline, which follows the mode rather than a hue. */\nconst neutralBorder = (theme: UiTheme): string =>\n theme.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700];\n\nfunction filledPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n if (!isAccented(color)) {\n return {\n container: { backgroundColor: theme.palette.action.selected },\n pressed: { backgroundColor: alpha(theme.palette.action.selected, SELECTED_OPACITY + OUTLINED_HOVER_ALPHA) },\n label: { color: theme.palette.text.primary },\n deleteColor: alpha(theme.palette.text.primary, DELETE_ICON_ALPHA),\n };\n }\n const accent = theme.palette[color];\n return {\n container: { backgroundColor: accent.main },\n pressed: { backgroundColor: accent.dark },\n label: { color: accent.contrastText },\n deleteColor: alpha(accent.contrastText, DELETE_ICON_ON_COLOR_ALPHA),\n };\n}\n\nfunction softPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n if (!isAccented(color)) {\n return {\n container: { backgroundColor: theme.palette.action.selected },\n pressed: { backgroundColor: theme.palette.action.hover },\n label: { color: theme.palette.text.secondary, fontWeight: '600' },\n deleteColor: alpha(theme.palette.text.secondary, DELETE_ICON_ALPHA),\n };\n }\n const accent = theme.palette[color];\n // The ink that reads on a 14% tint: `dark` over a light page, `light` over a dark one.\n const ink = theme.mode === 'dark' ? accent.light : accent.dark;\n return {\n container: { backgroundColor: alpha(accent.main, SOFT_GROUND_ALPHA) },\n pressed: { backgroundColor: alpha(accent.main, SOFT_HOVER_ALPHA) },\n label: { color: ink, fontWeight: '600' },\n deleteColor: ink,\n };\n}\n\nfunction outlinedPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n const border: ViewStyle = { backgroundColor: 'transparent', borderWidth: 1, borderStyle: 'solid' };\n if (!isAccented(color)) {\n return {\n container: { ...border, borderColor: neutralBorder(theme) },\n pressed: { backgroundColor: theme.palette.action.hover },\n label: { color: theme.palette.text.primary },\n deleteColor: alpha(theme.palette.text.primary, DELETE_ICON_ALPHA),\n };\n }\n const accent = theme.palette[color];\n return {\n container: { ...border, borderColor: alpha(accent.main, OUTLINED_BORDER_ALPHA) },\n pressed: { backgroundColor: alpha(accent.main, OUTLINED_HOVER_ALPHA) },\n label: { color: accent.main },\n deleteColor: alpha(accent.main, OUTLINED_BORDER_ALPHA),\n };\n}\n\n/**\n * What MUI's chip paints, as React Native styles. `selected` tints an OUTLINED\n * chip with `action.selected` — a filled one is already solid, which is what\n * `Chip.styles.tsx` decided for the web.\n */\nexport function chipPaint(\n theme: UiTheme,\n variant: ChipVariant,\n color: ChipColor,\n selected: boolean,\n): ChipPaint {\n const paint =\n variant === 'outlined' ? outlinedPaint(theme, color) : variant === 'soft' ? softPaint(theme, color) : filledPaint(theme, color);\n if (variant !== 'outlined' || !selected) return paint;\n return {\n ...paint,\n container: { ...paint.container, backgroundColor: theme.palette.action.selected },\n };\n}\n\n/** The pill itself: MUI's height, its 16px radius, and the disabled fade. */\nexport function chipContainerStyle(metrics: ChipSizeMetrics, disabled: boolean): ViewStyle {\n return {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n alignSelf: 'flex-start',\n maxWidth: '100%',\n height: metrics.height,\n borderRadius: CHIP_RADIUS,\n ...(disabled ? { opacity: CHIP_DISABLED_OPACITY } : {}),\n };\n}\n\n/** The label: MUI's 13px, padded by the variant, clipped rather than wrapped. */\nexport function chipLabelStyle(\n theme: UiTheme,\n metrics: ChipSizeMetrics,\n variant: ChipVariant,\n): TextStyle {\n const padding = variant === 'outlined' ? metrics.labelPaddingOutlined : metrics.labelPadding;\n return {\n fontFamily: theme.typography.fontFamily,\n fontSize: CHIP_FONT_SIZE,\n paddingLeft: padding,\n paddingRight: padding,\n flexShrink: 1,\n };\n}\n\n/** The margins MUI gives the leading slot, tucking it under the label's padding. */\nexport function chipLeadingSlotStyle(\n metrics: ChipSizeMetrics,\n variant: ChipVariant,\n slot: 'icon' | 'avatar',\n): ViewStyle {\n const outlined = variant === 'outlined';\n const marginLeft =\n slot === 'icon'\n ? (outlined ? metrics.iconMarginLeftOutlined : metrics.iconMarginLeft)\n : (outlined ? metrics.avatarMarginLeftOutlined : metrics.avatarMarginLeft);\n return {\n marginLeft,\n marginRight: slot === 'icon' ? metrics.iconMarginRight : metrics.avatarMarginRight,\n alignItems: 'center',\n justifyContent: 'center',\n };\n}\n\n/** The delete glyph's own tuck, one pixel tighter when the chip is outlined. */\nexport function chipDeleteSlotStyle(metrics: ChipSizeMetrics, variant: ChipVariant): ViewStyle {\n return {\n marginLeft: metrics.deleteMarginLeft,\n marginRight:\n variant === 'outlined' ? metrics.deleteMarginRightOutlined : metrics.deleteMarginRight,\n alignItems: 'center',\n justifyContent: 'center',\n };\n}\n\n/** The round avatar box MUI draws for an `avatarSrc`. */\nexport function chipAvatarStyle(metrics: ChipSizeMetrics): ImageStyle {\n return {\n width: metrics.avatarSize,\n height: metrics.avatarSize,\n borderRadius: metrics.avatarSize / 2,\n overflow: 'hidden',\n };\n}\n\nexport const chipMetrics = (size: ChipMuiSize): ChipSizeMetrics => CHIP_SIZES[size];\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../../src/components/data-display/Chip/Chip.native.tsx","../../../src/components/data-display/Chip/Chip.helpers.ts","../../../src/components/data-display/Chip/Chip.metrics.ts","../../../src/components/data-display/Chip/Chip.look.native.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n Image,\n Pressable,\n Text as RNText,\n View,\n type GestureResponderEvent,\n type StyleProp,\n type ViewStyle,\n} from 'react-native';\n\nimport { chipKeyAction, chipRole, isClickable, makeTestId } from './Chip.helpers';\nimport {\n chipAvatarStyle,\n chipContainerStyle,\n chipDeleteSlotStyle,\n chipLabelStyle,\n chipLeadingSlotStyle,\n chipMetrics,\n chipPaint,\n type ChipPaint,\n} from './Chip.look.native';\nimport { chipMuiSize, type ChipSizeMetrics } from './Chip.metrics';\nimport type { ChipProps, ChipVariant } from './Chip.types.native';\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webKeyDown, type WebKeyHandler } from '../../../platform/web-keys';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\n\ninterface SlotArgs {\n metrics: ChipSizeMetrics;\n variant: ChipVariant;\n}\n\n/**\n * The leading slot. MUI restyles the icon ELEMENT through a class — 24px, or\n * 18px when small — which a native renderer cannot do to an arbitrary node, so\n * the slot carries the margins and the glyph keeps the size it was given.\n */\nfunction LeadingSlot({\n metrics,\n variant,\n avatar,\n avatarSrc,\n icon,\n testID,\n}: SlotArgs &\n Pick<ChipProps, 'avatar' | 'avatarSrc' | 'icon'> & { testID: string }): React.JSX.Element | null {\n if (avatar) {\n return <View style={chipLeadingSlotStyle(metrics, variant, 'avatar')}>{avatar}</View>;\n }\n if (avatarSrc) {\n return (\n <View style={chipLeadingSlotStyle(metrics, variant, 'avatar')}>\n <Image\n source={{ uri: avatarSrc }}\n style={chipAvatarStyle(metrics)}\n accessibilityIgnoresInvertColors\n />\n </View>\n );\n }\n if (icon) {\n return (\n <View style={chipLeadingSlotStyle(metrics, variant, 'icon')} testID={testID}>\n {icon}\n </View>\n );\n }\n return null;\n}\n\n/** MUI's `deleteIcon`: the `Cancel` glyph, pressable, tucked under the label. */\nfunction DeleteSlot({\n metrics,\n variant,\n color,\n onDelete,\n deleteLabel = EN_US_UI_LABELS.common.delete,\n disabled,\n testID,\n}: SlotArgs & {\n color: string;\n deleteLabel?: string;\n onDelete?: () => void;\n disabled?: boolean;\n testID: string;\n}): React.JSX.Element {\n return (\n <Pressable\n testID={testID}\n role=\"button\"\n aria-label={deleteLabel}\n disabled={disabled}\n onPress={onDelete}\n style={chipDeleteSlotStyle(metrics, variant)}\n >\n <Icon name=\"Cancel\" size={metrics.deleteSize} color={color} />\n </Pressable>\n );\n}\n\ninterface ChipBodyProps extends SlotArgs {\n paint: ChipPaint;\n label: string;\n avatar?: ChipProps['avatar'];\n avatarSrc?: string;\n icon?: ChipProps['icon'];\n deletable?: boolean;\n disabled?: boolean;\n onDelete?: () => void;\n deleteLabel?: string;\n idFor: (suffix: string) => string;\n}\n\n/** Everything inside the pill: the leading slot, the label, the delete button. */\nfunction ChipBody({\n metrics,\n variant,\n paint,\n label,\n avatar,\n avatarSrc,\n icon,\n deletable,\n disabled,\n onDelete,\n deleteLabel,\n idFor,\n}: ChipBodyProps): React.JSX.Element {\n const theme = useUiTheme();\n return (\n <>\n <LeadingSlot\n metrics={metrics}\n variant={variant}\n avatar={avatar}\n avatarSrc={avatarSrc}\n icon={icon}\n testID={idFor('icon')}\n />\n <RNText\n testID={idFor('label')}\n numberOfLines={1}\n style={[chipLabelStyle(theme, metrics, variant), paint.label]}\n >\n {label}\n </RNText>\n {deletable ? (\n <DeleteSlot\n metrics={metrics}\n variant={variant}\n color={paint.deleteColor}\n onDelete={onDelete}\n deleteLabel={deleteLabel}\n disabled={disabled}\n testID={idFor('delete')}\n />\n ) : null}\n </>\n );\n}\n\ninterface KeyDownArgs {\n role: 'option' | 'button' | undefined;\n disabled?: boolean;\n deletable?: boolean;\n selectable?: boolean;\n /** Whether the chip acts at all, under either handler spelling. */\n acts?: unknown;\n onClick?: () => void;\n onDelete?: () => void;\n}\n\n/**\n * The half of the chip's keyboard contract react-native-web does NOT already\n * cover. Its `Pressable` turns Enter into a press on any role, and Space into\n * one only on a `button` role (`isValidKeyPress`) — so a selectable chip, which\n * is an `option`, needs Space wiring here, and Delete/Backspace is never its.\n * On a device none of this is ever called.\n */\nfunction makeChipKeyDown(args: KeyDownArgs): WebKeyHandler {\n return (event) => {\n const action = chipKeyAction(event.key, { ...args, onClick: args.acts });\n if (action === null) return;\n if (action === 'delete') {\n event.preventDefault();\n args.onDelete?.();\n return;\n }\n if (event.key === 'Enter' || args.role === 'button') return;\n event.preventDefault();\n args.onClick?.();\n };\n}\n\n/**\n * The native `Chip`: MUI's pill on a `Pressable`, reachable by keyboard only\n * when it acts — which is the same rule MUI applies through `clickable`.\n */\nexport const Chip = React.forwardRef<View, ChipProps>((props, ref) => {\n const {\n label,\n variant = 'filled',\n size = 'md',\n color = 'primary',\n avatarSrc,\n avatar,\n icon,\n selected,\n selectable,\n deletable,\n disabled,\n onClick,\n onPress,\n onDelete,\n deleteLabel,\n dataTestId,\n testID,\n style,\n ...rest\n } = props;\n const theme = useUiTheme();\n const chipId = testID ?? dataTestId;\n const metrics = chipMetrics(chipMuiSize(size));\n const paint = chipPaint(theme, variant, color, Boolean(selected));\n const acts = onClick ?? onPress;\n const clickable = isClickable(disabled, acts, selectable);\n const role = chipRole(selectable, acts);\n\n const base: StyleProp<ViewStyle> = [\n chipContainerStyle(metrics, Boolean(disabled)),\n paint.container,\n style,\n ];\n\n const press = (event: GestureResponderEvent): void => {\n onClick?.();\n onPress?.(event);\n };\n\n return (\n <Pressable\n ref={ref}\n testID={chipId || 'chip'}\n role={role}\n aria-selected={selectable ? selected : undefined}\n disabled={disabled}\n // MUI makes only a clickable chip keyboard-reachable; react-native-web\n // would otherwise give every Pressable a tab stop.\n tabIndex={clickable ? 0 : -1}\n onPress={clickable ? press : undefined}\n {...webKeyDown(\n makeChipKeyDown({ role, disabled, deletable, selectable, acts, onClick, onDelete }),\n )}\n style={(state) => [base, state.pressed && clickable ? paint.pressed : null]}\n {...rest}\n >\n <ChipBody\n metrics={metrics}\n variant={variant}\n paint={paint}\n label={label}\n avatar={avatar}\n avatarSrc={avatarSrc}\n icon={icon}\n deletable={deletable}\n disabled={disabled}\n onDelete={onDelete}\n deleteLabel={deleteLabel}\n idFor={makeTestId(chipId)}\n />\n </Pressable>\n );\n});\n\nChip.displayName = 'Chip';\n","/** `${dataTestId}-label`, or `chip-label` when the caller named nothing. */\nexport const makeTestId =\n (dataTestId?: string) =>\n (suffix: string): string =>\n dataTestId ? `${dataTestId}-${suffix}` : `chip-${suffix}`;\n\n/** `option` when the chip belongs to a selectable set, `button` when it merely acts. */\nexport const chipRole = (\n selectable?: boolean,\n // `unknown`, because the two renderers hand this a differently-typed handler\n // and all that is asked of it here is whether the caller supplied one.\n onClick?: unknown,\n): 'option' | 'button' | undefined => {\n if (selectable) return 'option';\n return onClick ? 'button' : undefined;\n};\n\nexport const isClickable = (\n disabled?: boolean,\n onClick?: unknown,\n selectable?: boolean,\n): boolean => !disabled && (Boolean(onClick) || Boolean(selectable));\n\n/** What a key press on a chip means, if anything. */\nexport type ChipKeyAction = 'delete' | 'activate' | null;\n\nconst DELETE_KEYS = new Set(['Delete', 'Backspace']);\nconst ACTIVATE_KEYS = new Set(['Enter', ' ']);\n\nexport interface ChipKeyArgs {\n disabled?: boolean;\n deletable?: boolean;\n selectable?: boolean;\n onClick?: unknown;\n onDelete?: unknown;\n}\n\n/**\n * A chip is not a native control, so the two keyboard conventions it stands in\n * for are decided by hand: Delete/Backspace removes it, Enter/Space activates\n * it. Both renderers read this one decision — the web wires it to the DOM\n * handler, the native half to react-native-web's (see `Chip.native.tsx`).\n */\nexport function chipKeyAction(key: string, a: ChipKeyArgs): ChipKeyAction {\n if (a.disabled) return null;\n if (DELETE_KEYS.has(key) && a.deletable && a.onDelete) return 'delete';\n if (ACTIVATE_KEYS.has(key) && (a.onClick || a.selectable)) return 'activate';\n return null;\n}\n","import type { ChipSize } from './Chip.base';\n\n/**\n * THE NUMBERS BOTH `Chip` RENDERERS DRAW WITH.\n *\n * Most of them are MUI's own `Chip` geometry rather than anything this package\n * writes — the 32px pill, the 13px label, the 5px/-6px icon tuck — because the\n * web half hands the drawing to `MuiChip` and the native half has to draw it.\n * Restated here once, read by both, so the two cannot disagree about a chip's\n * height. What THIS package adds (`Chip.styles.tsx`'s hover lift, its shadow\n * and its transition) is at the bottom, and the web derives its CSS from it.\n */\n\n/** MUI draws two chip sizes; ours are the house abbreviations for them. */\nexport type ChipMuiSize = 'small' | 'medium';\n\nexport const chipMuiSize = (size: ChipSize): ChipMuiSize =>\n size === 'xs' || size === 'sm' ? 'small' : 'medium';\n\nexport interface ChipSizeMetrics {\n height: number;\n /** The label's own side padding, filled and outlined (outlined is 1px tighter). */\n labelPadding: number;\n labelPaddingOutlined: number;\n /** The leading icon's box, and how far it tucks under the label. */\n iconSize: number;\n iconMarginLeft: number;\n iconMarginLeftOutlined: number;\n iconMarginRight: number;\n /** The avatar's round box and the type inside it. */\n avatarSize: number;\n avatarFontSize: number;\n avatarMarginLeft: number;\n avatarMarginLeftOutlined: number;\n avatarMarginRight: number;\n /** The delete glyph's box and its own tuck. */\n deleteSize: number;\n deleteMarginLeft: number;\n deleteMarginRight: number;\n deleteMarginRightOutlined: number;\n}\n\nexport const CHIP_SIZES: Record<ChipMuiSize, ChipSizeMetrics> = {\n medium: {\n height: 32,\n labelPadding: 12,\n labelPaddingOutlined: 11,\n iconSize: 24,\n iconMarginLeft: 5,\n iconMarginLeftOutlined: 4,\n iconMarginRight: -6,\n avatarSize: 24,\n avatarFontSize: 12,\n avatarMarginLeft: 5,\n avatarMarginLeftOutlined: 4,\n avatarMarginRight: -6,\n deleteSize: 22,\n deleteMarginLeft: -6,\n deleteMarginRight: 5,\n deleteMarginRightOutlined: 5,\n },\n small: {\n height: 24,\n labelPadding: 8,\n labelPaddingOutlined: 7,\n iconSize: 18,\n iconMarginLeft: 4,\n iconMarginLeftOutlined: 2,\n iconMarginRight: -4,\n avatarSize: 18,\n avatarFontSize: 10,\n avatarMarginLeft: 4,\n avatarMarginLeftOutlined: 2,\n avatarMarginRight: -4,\n deleteSize: 16,\n deleteMarginLeft: -4,\n deleteMarginRight: 4,\n deleteMarginRightOutlined: 3,\n },\n};\n\n/** MUI's `borderRadius: 32 / 2` — a pill at either height, since the box clamps it. */\nexport const CHIP_RADIUS = 16;\n/** The label's type, in px. MUI sets it on the root and the small size keeps it. */\nexport const CHIP_FONT_SIZE = 13;\n/** MUI's `palette.action.disabledOpacity`. */\nexport const CHIP_DISABLED_OPACITY = 0.38;\n/** An outlined chip's hairline: the hue at 0.7, or the grey ramp for `neutral`. */\nexport const OUTLINED_BORDER_ALPHA = 0.7;\n/** The delete glyph over an unaccented chip, and over a coloured one. */\nexport const DELETE_ICON_ALPHA = 0.26;\nexport const DELETE_ICON_ON_COLOR_ALPHA = 0.7;\n/** MUI's `action.hoverOpacity`, the wash a clickable outlined chip takes. */\nexport const OUTLINED_HOVER_ALPHA = 0.04;\n\n/* ── What this package adds on top of MUI's chip ──────────────────────────── */\n\n/** The lift a clickable chip takes on hover, and the shadow under it. */\nexport const HOVER_LIFT_PX = 1;\nexport const HOVER_SHADOW = { offsetY: 4, blur: 12, alphaLight: 0.15, alphaDark: 0.3 } as const;\nexport const CHIP_TRANSITION_MS = 200;\nexport const CHIP_TRANSITION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n/** A soft chip's ground: the colour at this alpha over the page. */\nexport const SOFT_GROUND_ALPHA = 0.14;\n/** A soft chip's hover ground. */\nexport const SOFT_HOVER_ALPHA = 0.22;\n/**\n * How much a light-mode soft WARNING ink darkens its `dark` step (FUT-4464). With\n * the default theme, `warning.dark` (#e65100) on its 14% tint is 3.25:1; darkened\n * by 0.2 it is 4.77:1. The other five colours clear 4.5:1 on `dark` as it is.\n */\nexport const SOFT_WARNING_LIGHT_DARKEN = 0.2;\n/** A soft chip's keyboard-focus ring, in design px (read through `rem`). */\nexport const SOFT_FOCUS_RING = { width: 2, offset: 2 } as const;\n","import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';\n\nimport type { ChipColor, ChipVariant } from './Chip.base';\nimport {\n CHIP_DISABLED_OPACITY,\n CHIP_FONT_SIZE,\n CHIP_RADIUS,\n CHIP_SIZES,\n DELETE_ICON_ALPHA,\n DELETE_ICON_ON_COLOR_ALPHA,\n OUTLINED_BORDER_ALPHA,\n OUTLINED_HOVER_ALPHA,\n SOFT_GROUND_ALPHA,\n SOFT_HOVER_ALPHA,\n SOFT_WARNING_LIGHT_DARKEN,\n type ChipMuiSize,\n type ChipSizeMetrics,\n} from './Chip.metrics';\nimport { alpha, darken } from '../../../tokens/color';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/** MUI's `action.selectedOpacity`; its hover wash adds `OUTLINED_HOVER_ALPHA` on top. */\nconst SELECTED_OPACITY = 0.08;\n\nexport interface ChipPaint {\n container: ViewStyle;\n /** The web's `:hover` background, which touch has no equivalent of. */\n pressed: ViewStyle;\n label: TextStyle;\n deleteColor: string;\n}\n\n/** `neutral` is MUI's `default`: no accent, the ink and the ramp instead. */\nconst isAccented = (color: ChipColor): boolean => color !== 'neutral';\n\n/** An unaccented chip's hairline, which follows the mode rather than a hue. */\nconst neutralBorder = (theme: UiTheme): string =>\n theme.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700];\n\nfunction filledPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n if (!isAccented(color)) {\n return {\n container: { backgroundColor: theme.palette.action.selected },\n pressed: { backgroundColor: alpha(theme.palette.action.selected, SELECTED_OPACITY + OUTLINED_HOVER_ALPHA) },\n label: { color: theme.palette.text.primary },\n deleteColor: alpha(theme.palette.text.primary, DELETE_ICON_ALPHA),\n };\n }\n const accent = theme.palette[color];\n return {\n container: { backgroundColor: accent.main },\n pressed: { backgroundColor: accent.dark },\n label: { color: accent.contrastText },\n deleteColor: alpha(accent.contrastText, DELETE_ICON_ON_COLOR_ALPHA),\n };\n}\n\nfunction softPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n if (!isAccented(color)) {\n return {\n container: { backgroundColor: theme.palette.action.selected },\n pressed: { backgroundColor: theme.palette.action.hover },\n label: { color: theme.palette.text.secondary, fontWeight: '600' },\n deleteColor: alpha(theme.palette.text.secondary, DELETE_ICON_ALPHA),\n };\n }\n const accent = theme.palette[color];\n // The ink that reads on a 14% tint: `dark` over a light page, `light` over a dark\n // one; a light-mode warning darkens `dark` further, as the web does (FUT-4464).\n const lightInk = color === 'warning' ? darken(accent.dark, SOFT_WARNING_LIGHT_DARKEN) : accent.dark;\n const ink = theme.mode === 'dark' ? accent.light : lightInk;\n return {\n container: { backgroundColor: alpha(accent.main, SOFT_GROUND_ALPHA) },\n pressed: { backgroundColor: alpha(accent.main, SOFT_HOVER_ALPHA) },\n label: { color: ink, fontWeight: '600' },\n deleteColor: ink,\n };\n}\n\nfunction outlinedPaint(theme: UiTheme, color: ChipColor): ChipPaint {\n const border: ViewStyle = { backgroundColor: 'transparent', borderWidth: 1, borderStyle: 'solid' };\n if (!isAccented(color)) {\n return {\n container: { ...border, borderColor: neutralBorder(theme) },\n pressed: { backgroundColor: theme.palette.action.hover },\n label: { color: theme.palette.text.primary },\n deleteColor: alpha(theme.palette.text.primary, DELETE_ICON_ALPHA),\n };\n }\n const accent = theme.palette[color];\n return {\n container: { ...border, borderColor: alpha(accent.main, OUTLINED_BORDER_ALPHA) },\n pressed: { backgroundColor: alpha(accent.main, OUTLINED_HOVER_ALPHA) },\n label: { color: accent.main },\n deleteColor: alpha(accent.main, OUTLINED_BORDER_ALPHA),\n };\n}\n\n/**\n * What MUI's chip paints, as React Native styles. `selected` tints an OUTLINED\n * chip with `action.selected` — a filled one is already solid, which is what\n * `Chip.styles.tsx` decided for the web.\n */\nexport function chipPaint(\n theme: UiTheme,\n variant: ChipVariant,\n color: ChipColor,\n selected: boolean,\n): ChipPaint {\n const paint =\n variant === 'outlined' ? outlinedPaint(theme, color) : variant === 'soft' ? softPaint(theme, color) : filledPaint(theme, color);\n if (variant !== 'outlined' || !selected) return paint;\n return {\n ...paint,\n container: { ...paint.container, backgroundColor: theme.palette.action.selected },\n };\n}\n\n/** The pill itself: MUI's height, its 16px radius, and the disabled fade. */\nexport function chipContainerStyle(metrics: ChipSizeMetrics, disabled: boolean): ViewStyle {\n return {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n alignSelf: 'flex-start',\n maxWidth: '100%',\n height: metrics.height,\n borderRadius: CHIP_RADIUS,\n ...(disabled ? { opacity: CHIP_DISABLED_OPACITY } : {}),\n };\n}\n\n/** The label: MUI's 13px, padded by the variant, clipped rather than wrapped. */\nexport function chipLabelStyle(\n theme: UiTheme,\n metrics: ChipSizeMetrics,\n variant: ChipVariant,\n): TextStyle {\n const padding = variant === 'outlined' ? metrics.labelPaddingOutlined : metrics.labelPadding;\n return {\n fontFamily: theme.typography.fontFamily,\n fontSize: CHIP_FONT_SIZE,\n paddingLeft: padding,\n paddingRight: padding,\n flexShrink: 1,\n };\n}\n\n/** The margins MUI gives the leading slot, tucking it under the label's padding. */\nexport function chipLeadingSlotStyle(\n metrics: ChipSizeMetrics,\n variant: ChipVariant,\n slot: 'icon' | 'avatar',\n): ViewStyle {\n const outlined = variant === 'outlined';\n const marginLeft =\n slot === 'icon'\n ? (outlined ? metrics.iconMarginLeftOutlined : metrics.iconMarginLeft)\n : (outlined ? metrics.avatarMarginLeftOutlined : metrics.avatarMarginLeft);\n return {\n marginLeft,\n marginRight: slot === 'icon' ? metrics.iconMarginRight : metrics.avatarMarginRight,\n alignItems: 'center',\n justifyContent: 'center',\n };\n}\n\n/** The delete glyph's own tuck, one pixel tighter when the chip is outlined. */\nexport function chipDeleteSlotStyle(metrics: ChipSizeMetrics, variant: ChipVariant): ViewStyle {\n return {\n marginLeft: metrics.deleteMarginLeft,\n marginRight:\n variant === 'outlined' ? metrics.deleteMarginRightOutlined : metrics.deleteMarginRight,\n alignItems: 'center',\n justifyContent: 'center',\n };\n}\n\n/** The round avatar box MUI draws for an `avatarSrc`. */\nexport function chipAvatarStyle(metrics: ChipSizeMetrics): ImageStyle {\n return {\n width: metrics.avatarSize,\n height: metrics.avatarSize,\n borderRadius: metrics.avatarSize / 2,\n overflow: 'hidden',\n };\n}\n\nexport const chipMetrics = (size: ChipMuiSize): ChipSizeMetrics => CHIP_SIZES[size];\n"],"mappings":"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","names":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Avatar/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAShE,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAkJ/D,eAAO,MAAM,MAAM,iGAEjB,CAAC;AAuBH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAmBA,CAAC"}
1
+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Avatar/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAShE,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAqK/D,eAAO,MAAM,MAAM,iGAEjB,CAAC;AAuBH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAmBA,CAAC"}
@@ -9,8 +9,9 @@ import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
9
9
  */
10
10
  /**
11
11
  * `soft` is a status chip's look: the colour's tint for a ground and, for ink,
12
- * its dark step in light mode and its light step in dark mode (4.5:1 on the
13
- * tint either way), so a row of states reads without a row of solid blocks.
12
+ * its dark step in light mode (warning's darkened a step further) and its light
13
+ * step in dark mode (4.5:1 on the tint either way), so a row of states reads
14
+ * without a row of solid blocks.
14
15
  */
15
16
  export type ChipVariant = 'filled' | 'outlined' | 'soft';
16
17
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"Chip.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAExE;;;;;;GAMG;AACH;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEzD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC;AAEjC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC;AAEnC,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IAEd,2BAA2B;IAC3B,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,uBAAuB;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
1
+ {"version":3,"file":"Chip.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAExE;;;;;;GAMG;AACH;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEzD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC;AAEjC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC;AAEnC,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IAEd,2BAA2B;IAC3B,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,uBAAuB;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
@@ -62,6 +62,12 @@ export declare const CHIP_TRANSITION_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
62
62
  export declare const SOFT_GROUND_ALPHA = 0.14;
63
63
  /** A soft chip's hover ground. */
64
64
  export declare const SOFT_HOVER_ALPHA = 0.22;
65
+ /**
66
+ * How much a light-mode soft WARNING ink darkens its `dark` step (FUT-4464). With
67
+ * the default theme, `warning.dark` (#e65100) on its 14% tint is 3.25:1; darkened
68
+ * by 0.2 it is 4.77:1. The other five colours clear 4.5:1 on `dark` as it is.
69
+ */
70
+ export declare const SOFT_WARNING_LIGHT_DARKEN = 0.2;
65
71
  /** A soft chip's keyboard-focus ring, in design px (read through `rem`). */
66
72
  export declare const SOFT_FOCUS_RING: {
67
73
  readonly width: 2;
@@ -1 +1 @@
1
- {"version":3,"file":"Chip.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;;;;;;;;GASG;AAEH,2EAA2E;AAC3E,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7C,eAAO,MAAM,WAAW,GAAI,MAAM,QAAQ,KAAG,WACQ,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oEAAoE;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,MAAM,CAAC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,yBAAyB,EAAE,MAAM,CAAC;CACnC;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE,eAAe,CAqC3D,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,oFAAoF;AACpF,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,8CAA8C;AAC9C,eAAO,MAAM,qBAAqB,OAAO,CAAC;AAC1C,mFAAmF;AACnF,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAC9C,6EAA6E;AAC7E,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAIzC,yEAAyE;AACzE,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,eAAO,MAAM,YAAY;;;;;CAAsE,CAAC;AAChG,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,sBAAsB,iCAAiC,CAAC;AAErE,oEAAoE;AACpE,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,kCAAkC;AAClC,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC,4EAA4E;AAC5E,eAAO,MAAM,eAAe;;;CAAmC,CAAC"}
1
+ {"version":3,"file":"Chip.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;;;;;;;;GASG;AAEH,2EAA2E;AAC3E,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7C,eAAO,MAAM,WAAW,GAAI,MAAM,QAAQ,KAAG,WACQ,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oEAAoE;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,MAAM,CAAC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,yBAAyB,EAAE,MAAM,CAAC;CACnC;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE,eAAe,CAqC3D,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,oFAAoF;AACpF,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,8CAA8C;AAC9C,eAAO,MAAM,qBAAqB,OAAO,CAAC;AAC1C,mFAAmF;AACnF,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAC9C,6EAA6E;AAC7E,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAIzC,yEAAyE;AACzE,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,eAAO,MAAM,YAAY;;;;;CAAsE,CAAC;AAChG,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,sBAAsB,iCAAiC,CAAC;AAErE,oEAAoE;AACpE,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,kCAAkC;AAClC,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,4EAA4E;AAC5E,eAAO,MAAM,eAAe;;;CAAmC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Chip.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.styles.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAajE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC5B,MAAM,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,MACnE,OAAO,aAAa,KAAG,IASvB,CAAC;AAEJ,eAAO,MAAM,SAAS,GACpB,QAAQ,SAAS,CAAC,QAAQ,CAAC,EAC3B,YAAY,MAAM,KACjB,YAAY,GAAG,SASjB,CAAC;AAEF,UAAU,aAAa;IACrB,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuED,eAAO,MAAM,UAAU,GAAI,oDAMxB,aAAa,KAAG,OAAO,CAAC,KAAK,CA4B/B,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,MAAM,SAAS,CAAC,MAAM,CAAC,EACvB,QAAQ,MAAM,KACb,YAAY,GAAG,SAKH,CAAC"}
1
+ {"version":3,"file":"Chip.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.styles.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAcjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC5B,MAAM,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,MACnE,OAAO,aAAa,KAAG,IASvB,CAAC;AAEJ,eAAO,MAAM,SAAS,GACpB,QAAQ,SAAS,CAAC,QAAQ,CAAC,EAC3B,YAAY,MAAM,KACjB,YAAY,GAAG,SASjB,CAAC;AAEF,UAAU,aAAa;IACrB,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2ED,eAAO,MAAM,UAAU,GAAI,oDAMxB,aAAa,KAAG,OAAO,CAAC,KAAK,CA4B/B,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,MAAM,SAAS,CAAC,MAAM,CAAC,EACvB,QAAQ,MAAM,KACb,YAAY,GAAG,SAKH,CAAC"}
@@ -9,8 +9,9 @@ import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
9
9
  */
10
10
  /**
11
11
  * `soft` is a status chip's look: the colour's tint for a ground and, for ink,
12
- * its dark step in light mode and its light step in dark mode (4.5:1 on the
13
- * tint either way), so a row of states reads without a row of solid blocks.
12
+ * its dark step in light mode (warning's darkened a step further) and its light
13
+ * step in dark mode (4.5:1 on the tint either way), so a row of states reads
14
+ * without a row of solid blocks.
14
15
  */
15
16
  export type ChipVariant = 'filled' | 'outlined' | 'soft';
16
17
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"Chip.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAExE;;;;;;GAMG;AACH;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEzD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC;AAEjC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC;AAEnC,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IAEd,2BAA2B;IAC3B,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,uBAAuB;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
1
+ {"version":3,"file":"Chip.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAExE;;;;;;GAMG;AACH;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEzD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC;AAEjC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC;AAEnC,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IAEd,2BAA2B;IAC3B,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,uBAAuB;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
@@ -1 +1 @@
1
- {"version":3,"file":"Chip.look.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.look.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAWL,KAAK,WAAW,EAChB,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAKrD,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,SAAS,CAAC;IACrB,uEAAuE;IACvE,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAkED;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,OAAO,GAChB,SAAS,CAQX;AAED,6EAA6E;AAC7E,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,CAWzF;AAED,iFAAiF;AACjF,wBAAgB,cAAc,CAC5B,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,WAAW,GACnB,SAAS,CASX;AAED,oFAAoF;AACpF,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,MAAM,GAAG,QAAQ,GACtB,SAAS,CAYX;AAED,gFAAgF;AAChF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,WAAW,GAAG,SAAS,CAQ7F;AAED,yDAAyD;AACzD,wBAAgB,eAAe,CAAC,OAAO,EAAE,eAAe,GAAG,UAAU,CAOpE;AAED,eAAO,MAAM,WAAW,GAAI,MAAM,WAAW,KAAG,eAAmC,CAAC"}
1
+ {"version":3,"file":"Chip.look.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.look.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAYL,KAAK,WAAW,EAChB,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAKrD,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,SAAS,CAAC;IACrB,uEAAuE;IACvE,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAoED;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,OAAO,GAChB,SAAS,CAQX;AAED,6EAA6E;AAC7E,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,CAWzF;AAED,iFAAiF;AACjF,wBAAgB,cAAc,CAC5B,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,WAAW,GACnB,SAAS,CASX;AAED,oFAAoF;AACpF,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,MAAM,GAAG,QAAQ,GACtB,SAAS,CAYX;AAED,gFAAgF;AAChF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,WAAW,GAAG,SAAS,CAQ7F;AAED,yDAAyD;AACzD,wBAAgB,eAAe,CAAC,OAAO,EAAE,eAAe,GAAG,UAAU,CAOpE;AAED,eAAO,MAAM,WAAW,GAAI,MAAM,WAAW,KAAG,eAAmC,CAAC"}
@@ -62,6 +62,12 @@ export declare const CHIP_TRANSITION_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
62
62
  export declare const SOFT_GROUND_ALPHA = 0.14;
63
63
  /** A soft chip's hover ground. */
64
64
  export declare const SOFT_HOVER_ALPHA = 0.22;
65
+ /**
66
+ * How much a light-mode soft WARNING ink darkens its `dark` step (FUT-4464). With
67
+ * the default theme, `warning.dark` (#e65100) on its 14% tint is 3.25:1; darkened
68
+ * by 0.2 it is 4.77:1. The other five colours clear 4.5:1 on `dark` as it is.
69
+ */
70
+ export declare const SOFT_WARNING_LIGHT_DARKEN = 0.2;
65
71
  /** A soft chip's keyboard-focus ring, in design px (read through `rem`). */
66
72
  export declare const SOFT_FOCUS_RING: {
67
73
  readonly width: 2;
@@ -1 +1 @@
1
- {"version":3,"file":"Chip.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;;;;;;;;GASG;AAEH,2EAA2E;AAC3E,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7C,eAAO,MAAM,WAAW,GAAI,MAAM,QAAQ,KAAG,WACQ,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oEAAoE;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,MAAM,CAAC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,yBAAyB,EAAE,MAAM,CAAC;CACnC;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE,eAAe,CAqC3D,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,oFAAoF;AACpF,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,8CAA8C;AAC9C,eAAO,MAAM,qBAAqB,OAAO,CAAC;AAC1C,mFAAmF;AACnF,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAC9C,6EAA6E;AAC7E,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAIzC,yEAAyE;AACzE,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,eAAO,MAAM,YAAY;;;;;CAAsE,CAAC;AAChG,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,sBAAsB,iCAAiC,CAAC;AAErE,oEAAoE;AACpE,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,kCAAkC;AAClC,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC,4EAA4E;AAC5E,eAAO,MAAM,eAAe;;;CAAmC,CAAC"}
1
+ {"version":3,"file":"Chip.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;;;;;;;;GASG;AAEH,2EAA2E;AAC3E,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7C,eAAO,MAAM,WAAW,GAAI,MAAM,QAAQ,KAAG,WACQ,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oEAAoE;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,MAAM,CAAC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,yBAAyB,EAAE,MAAM,CAAC;CACnC;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE,eAAe,CAqC3D,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,oFAAoF;AACpF,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,8CAA8C;AAC9C,eAAO,MAAM,qBAAqB,OAAO,CAAC;AAC1C,mFAAmF;AACnF,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAC9C,6EAA6E;AAC7E,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAIzC,yEAAyE;AACzE,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,eAAO,MAAM,YAAY;;;;;CAAsE,CAAC;AAChG,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,sBAAsB,iCAAiC,CAAC;AAErE,oEAAoE;AACpE,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,kCAAkC;AAClC,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,4EAA4E;AAC5E,eAAO,MAAM,eAAe;;;CAAmC,CAAC"}
@@ -1,10 +1,10 @@
1
1
  import {
2
2
  UserAvatar,
3
3
  UserMenu
4
- } from "./chunk-E2UOEI7N.js";
4
+ } from "./chunk-JJYECKEL.js";
5
5
  import "./chunk-DQ22UKMZ.js";
6
6
  import "./chunk-UDQSIRAP.js";
7
- import "./chunk-JIEVKHOH.js";
7
+ import "./chunk-EXEBN5ZP.js";
8
8
  import "./chunk-7XSCEHGA.js";
9
9
  import "./chunk-MTEQEPNY.js";
10
10
  import "./chunk-6ZZGK5DT.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@12-apps/ui",
3
- "version": "6.96.1",
3
+ "version": "6.96.2",
4
4
  "license": "MIT",
5
5
  "packageManager": "pnpm@10.34.5",
6
6
  "type": "module",
@@ -59,9 +59,13 @@ interface ImageState {
59
59
  }
60
60
 
61
61
  /**
62
- * Tracks the `<img>` load lifecycle. `imageLoading` starts true whenever there is
63
- * a `src` and clears on load/error — the handlers must be wired to the actual img
64
- * (via `slotProps.img` in the view), since load/error don't bubble to the root.
62
+ * Tracks the image's load lifecycle. `imageLoading` starts true whenever there is
63
+ * a `src` and clears on load/error. Two sources report it: the `<img>`'s own
64
+ * events (wired via `slotProps.img` in the view, since load/error don't bubble to
65
+ * the root), and a probe of the same src. The probe is needed because MUI's
66
+ * Avatar runs its own probe and, once that one errors, stops rendering the
67
+ * `<img>` — whose error event then never fires, leaving the avatar blank under
68
+ * the spinner forever (FUT-4467). Whichever reports first wins.
65
69
  */
66
70
  function useImageState(src: string | undefined, onError?: React.ReactEventHandler): ImageState {
67
71
  const [imageError, setImageError] = useState(false);
@@ -70,6 +74,21 @@ function useImageState(src: string | undefined, onError?: React.ReactEventHandle
70
74
  useEffect(() => {
71
75
  setImageError(false);
72
76
  setImageLoading(!!src);
77
+ if (!src || typeof Image === 'undefined') return undefined;
78
+ let current = true;
79
+ const probe = new Image();
80
+ probe.onload = () => {
81
+ if (current) setImageLoading(false);
82
+ };
83
+ probe.onerror = () => {
84
+ if (!current) return;
85
+ setImageError(true);
86
+ setImageLoading(false);
87
+ };
88
+ probe.src = src;
89
+ return () => {
90
+ current = false;
91
+ };
73
92
  }, [src]);
74
93
 
75
94
  const handleImageError = useCallback<React.ReactEventHandler>(
@@ -11,8 +11,9 @@ import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
11
11
  */
12
12
  /**
13
13
  * `soft` is a status chip's look: the colour's tint for a ground and, for ink,
14
- * its dark step in light mode and its light step in dark mode (4.5:1 on the
15
- * tint either way), so a row of states reads without a row of solid blocks.
14
+ * its dark step in light mode (warning's darkened a step further) and its light
15
+ * step in dark mode (4.5:1 on the tint either way), so a row of states reads
16
+ * without a row of solid blocks.
16
17
  */
17
18
  export type ChipVariant = 'filled' | 'outlined' | 'soft';
18
19
 
@@ -12,10 +12,11 @@ import {
12
12
  OUTLINED_HOVER_ALPHA,
13
13
  SOFT_GROUND_ALPHA,
14
14
  SOFT_HOVER_ALPHA,
15
+ SOFT_WARNING_LIGHT_DARKEN,
15
16
  type ChipMuiSize,
16
17
  type ChipSizeMetrics,
17
18
  } from './Chip.metrics';
18
- import { alpha } from '../../../tokens/color';
19
+ import { alpha, darken } from '../../../tokens/color';
19
20
  import type { UiTheme } from '../../../tokens/theme';
20
21
 
21
22
  /** MUI's `action.selectedOpacity`; its hover wash adds `OUTLINED_HOVER_ALPHA` on top. */
@@ -64,8 +65,10 @@ function softPaint(theme: UiTheme, color: ChipColor): ChipPaint {
64
65
  };
65
66
  }
66
67
  const accent = theme.palette[color];
67
- // The ink that reads on a 14% tint: `dark` over a light page, `light` over a dark one.
68
- const ink = theme.mode === 'dark' ? accent.light : accent.dark;
68
+ // The ink that reads on a 14% tint: `dark` over a light page, `light` over a dark
69
+ // one; a light-mode warning darkens `dark` further, as the web does (FUT-4464).
70
+ const lightInk = color === 'warning' ? darken(accent.dark, SOFT_WARNING_LIGHT_DARKEN) : accent.dark;
71
+ const ink = theme.mode === 'dark' ? accent.light : lightInk;
69
72
  return {
70
73
  container: { backgroundColor: alpha(accent.main, SOFT_GROUND_ALPHA) },
71
74
  pressed: { backgroundColor: alpha(accent.main, SOFT_HOVER_ALPHA) },
@@ -105,5 +105,11 @@ export const CHIP_TRANSITION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';
105
105
  export const SOFT_GROUND_ALPHA = 0.14;
106
106
  /** A soft chip's hover ground. */
107
107
  export const SOFT_HOVER_ALPHA = 0.22;
108
+ /**
109
+ * How much a light-mode soft WARNING ink darkens its `dark` step (FUT-4464). With
110
+ * the default theme, `warning.dark` (#e65100) on its 14% tint is 3.25:1; darkened
111
+ * by 0.2 it is 4.77:1. The other five colours clear 4.5:1 on `dark` as it is.
112
+ */
113
+ export const SOFT_WARNING_LIGHT_DARKEN = 0.2;
108
114
  /** A soft chip's keyboard-focus ring, in design px (read through `rem`). */
109
115
  export const SOFT_FOCUS_RING = { width: 2, offset: 2 } as const;
@@ -4,7 +4,7 @@ import type { KeyboardEvent, ReactElement } from 'react';
4
4
  import React from 'react';
5
5
 
6
6
  import { chipKeyAction, type ChipKeyArgs } from './Chip.helpers';
7
- import { alpha } from '@mui/material/styles/index.js';
7
+ import { alpha, darken } from '@mui/material/styles/index.js';
8
8
 
9
9
  import {
10
10
  CHIP_SIZES,
@@ -15,6 +15,7 @@ import {
15
15
  SOFT_FOCUS_RING,
16
16
  SOFT_GROUND_ALPHA,
17
17
  SOFT_HOVER_ALPHA,
18
+ SOFT_WARNING_LIGHT_DARKEN,
18
19
  } from './Chip.metrics';
19
20
  import type { ChipProps } from './Chip.types';
20
21
  import { shadowInk } from '../../../tokens/ink';
@@ -83,8 +84,10 @@ const paletteKey = (color: NonNullable<ChipProps['color']>): 'primary' | 'second
83
84
  * `soft`: the colour's tint for a ground, and for ink the step that reads on it:
84
85
  * the `dark` step in light mode, the `light` step in dark mode (FUT-4442). The
85
86
  * ground is a 14% tint over the page, so on a near-black page the ink has to be
86
- * lighter than `main`; `dark` there is 2.6 to 3.9:1, `light` clears 4.5:1. The
87
- * label, the icon and the delete glyph all take it.
87
+ * lighter than `main`; `dark` there is 2.6 to 3.9:1, `light` clears 4.5:1. In
88
+ * light mode warning's `dark` is 3.25:1 on its tint, so it is darkened by
89
+ * `SOFT_WARNING_LIGHT_DARKEN` (4.77:1, FUT-4464). The label, the icon and the
90
+ * delete glyph all take it.
88
91
  */
89
92
  const softStyles = (color: NonNullable<ChipProps['color']>): SxProps<Theme> => {
90
93
  const key = paletteKey(color);
@@ -92,7 +95,9 @@ const softStyles = (color: NonNullable<ChipProps['color']>): SxProps<Theme> => {
92
95
  key ? alpha(theme.palette[key].main, SOFT_GROUND_ALPHA) : theme.palette.action.selected;
93
96
  const ink = (theme: Theme): string => {
94
97
  if (!key) return theme.palette.text.secondary;
95
- return theme.palette.mode === 'dark' ? theme.palette[key].light : theme.palette[key].dark;
98
+ if (theme.palette.mode === 'dark') return theme.palette[key].light;
99
+ // Warning's `dark` step is too light for its own tint (FUT-4464).
100
+ return key === 'warning' ? darken(theme.palette.warning.dark, SOFT_WARNING_LIGHT_DARKEN) : theme.palette[key].dark;
96
101
  };
97
102
  return {
98
103
  backgroundColor: ground,
@@ -29,7 +29,7 @@ interface ChipProps {
29
29
 
30
30
  **Features**
31
31
 
32
- - Filled/Outlined/Soft variants; optional avatar or icon. `soft` is a status chip: the colour's tint for a ground and, for ink, its dark step in light mode and its light step in dark mode.
32
+ - Filled/Outlined/Soft variants; optional avatar or icon. `soft` is a status chip: the colour's tint for a ground and, for ink, its dark step in light mode (warning's darkened a step further, FUT-4464) and its light step in dark mode.
33
33
  - Selectable (toggle) and/or deletable (× button).
34
34
  - Keyboard: Space/Enter activates; Delete/Backspace triggers remove when focused.
35
35