@oxyhq/bloom 0.19.0 → 0.20.0
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.
- package/lib/commonjs/benefit-list/index.js +119 -0
- package/lib/commonjs/benefit-list/index.js.map +1 -0
- package/lib/commonjs/benefit-list/types.js +6 -0
- package/lib/commonjs/benefit-list/types.js.map +1 -0
- package/lib/commonjs/button/Button.web.js +1 -1
- package/lib/commonjs/connection-dots/ConnectionDots.js +112 -0
- package/lib/commonjs/connection-dots/ConnectionDots.js.map +1 -0
- package/lib/commonjs/connection-dots/ConnectionDots.web.js +116 -0
- package/lib/commonjs/connection-dots/ConnectionDots.web.js.map +1 -0
- package/lib/commonjs/connection-dots/ConnectionDotsBase.js +55 -0
- package/lib/commonjs/connection-dots/ConnectionDotsBase.js.map +1 -0
- package/lib/commonjs/connection-dots/index.js +13 -0
- package/lib/commonjs/connection-dots/index.js.map +1 -0
- package/lib/commonjs/connection-dots/index.web.js +13 -0
- package/lib/commonjs/connection-dots/index.web.js.map +1 -0
- package/lib/commonjs/connection-dots/types.js +6 -0
- package/lib/commonjs/connection-dots/types.js.map +1 -0
- package/lib/commonjs/design-tokens/color-roles.js +112 -0
- package/lib/commonjs/design-tokens/color-roles.js.map +1 -0
- package/lib/commonjs/design-tokens/index.js +89 -0
- package/lib/commonjs/design-tokens/index.js.map +1 -0
- package/lib/commonjs/design-tokens/scales.js +168 -0
- package/lib/commonjs/design-tokens/scales.js.map +1 -0
- package/lib/commonjs/design-tokens/shadows.js +48 -0
- package/lib/commonjs/design-tokens/shadows.js.map +1 -0
- package/lib/commonjs/design-tokens/shadows.native.js +53 -0
- package/lib/commonjs/design-tokens/shadows.native.js.map +1 -0
- package/lib/commonjs/design-tokens/tailwind-preset.js +139 -0
- package/lib/commonjs/design-tokens/tailwind-preset.js.map +1 -0
- package/lib/commonjs/design-tokens/theme-css.js +98 -0
- package/lib/commonjs/design-tokens/theme-css.js.map +1 -0
- package/lib/commonjs/index.js +208 -93
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/index.web.js +223 -108
- package/lib/commonjs/index.web.js.map +1 -1
- package/lib/commonjs/text-field/index.js +156 -0
- package/lib/commonjs/text-field/index.js.map +1 -1
- package/lib/module/benefit-list/index.js +114 -0
- package/lib/module/benefit-list/index.js.map +1 -0
- package/lib/module/benefit-list/types.js +4 -0
- package/lib/module/benefit-list/types.js.map +1 -0
- package/lib/module/button/Button.web.js +1 -1
- package/lib/module/connection-dots/ConnectionDots.js +107 -0
- package/lib/module/connection-dots/ConnectionDots.js.map +1 -0
- package/lib/module/connection-dots/ConnectionDots.web.js +111 -0
- package/lib/module/connection-dots/ConnectionDots.web.js.map +1 -0
- package/lib/module/connection-dots/ConnectionDotsBase.js +50 -0
- package/lib/module/connection-dots/ConnectionDotsBase.js.map +1 -0
- package/lib/module/connection-dots/index.js +4 -0
- package/lib/module/connection-dots/index.js.map +1 -0
- package/lib/module/connection-dots/index.web.js +4 -0
- package/lib/module/connection-dots/index.web.js.map +1 -0
- package/lib/module/connection-dots/types.js +4 -0
- package/lib/module/connection-dots/types.js.map +1 -0
- package/lib/module/design-tokens/color-roles.js +108 -0
- package/lib/module/design-tokens/color-roles.js.map +1 -0
- package/lib/module/design-tokens/index.js +27 -0
- package/lib/module/design-tokens/index.js.map +1 -0
- package/lib/module/design-tokens/scales.js +164 -0
- package/lib/module/design-tokens/scales.js.map +1 -0
- package/lib/module/design-tokens/shadows.js +43 -0
- package/lib/module/design-tokens/shadows.js.map +1 -0
- package/lib/module/design-tokens/shadows.native.js +48 -0
- package/lib/module/design-tokens/shadows.native.js.map +1 -0
- package/lib/module/design-tokens/tailwind-preset.js +136 -0
- package/lib/module/design-tokens/tailwind-preset.js.map +1 -0
- package/lib/module/design-tokens/theme-css.js +94 -0
- package/lib/module/design-tokens/theme-css.js.map +1 -0
- package/lib/module/index.js +6 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/index.web.js +6 -1
- package/lib/module/index.web.js.map +1 -1
- package/lib/module/text-field/index.js +158 -2
- package/lib/module/text-field/index.js.map +1 -1
- package/lib/typescript/commonjs/benefit-list/index.d.ts +6 -0
- package/lib/typescript/commonjs/benefit-list/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/benefit-list/types.d.ts +35 -0
- package/lib/typescript/commonjs/benefit-list/types.d.ts.map +1 -0
- package/lib/typescript/commonjs/connection-dots/ConnectionDots.d.ts +4 -0
- package/lib/typescript/commonjs/connection-dots/ConnectionDots.d.ts.map +1 -0
- package/lib/typescript/commonjs/connection-dots/ConnectionDots.web.d.ts +14 -0
- package/lib/typescript/commonjs/connection-dots/ConnectionDots.web.d.ts.map +1 -0
- package/lib/typescript/commonjs/connection-dots/ConnectionDotsBase.d.ts +18 -0
- package/lib/typescript/commonjs/connection-dots/ConnectionDotsBase.d.ts.map +1 -0
- package/lib/typescript/commonjs/connection-dots/index.d.ts +3 -0
- package/lib/typescript/commonjs/connection-dots/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/connection-dots/index.web.d.ts +3 -0
- package/lib/typescript/commonjs/connection-dots/index.web.d.ts.map +1 -0
- package/lib/typescript/commonjs/connection-dots/types.d.ts +41 -0
- package/lib/typescript/commonjs/connection-dots/types.d.ts.map +1 -0
- package/lib/typescript/commonjs/design-tokens/color-roles.d.ts +102 -0
- package/lib/typescript/commonjs/design-tokens/color-roles.d.ts.map +1 -0
- package/lib/typescript/commonjs/design-tokens/index.d.ts +28 -0
- package/lib/typescript/commonjs/design-tokens/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/design-tokens/scales.d.ts +152 -0
- package/lib/typescript/commonjs/design-tokens/scales.d.ts.map +1 -0
- package/lib/typescript/commonjs/design-tokens/shadows.d.ts +34 -0
- package/lib/typescript/commonjs/design-tokens/shadows.d.ts.map +1 -0
- package/lib/typescript/commonjs/design-tokens/shadows.native.d.ts +19 -0
- package/lib/typescript/commonjs/design-tokens/shadows.native.d.ts.map +1 -0
- package/lib/typescript/commonjs/design-tokens/tailwind-preset.d.ts +59 -0
- package/lib/typescript/commonjs/design-tokens/tailwind-preset.d.ts.map +1 -0
- package/lib/typescript/commonjs/design-tokens/theme-css.d.ts +39 -0
- package/lib/typescript/commonjs/design-tokens/theme-css.d.ts.map +1 -0
- package/lib/typescript/commonjs/index.d.ts +6 -0
- package/lib/typescript/commonjs/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/index.web.d.ts +6 -0
- package/lib/typescript/commonjs/index.web.d.ts.map +1 -1
- package/lib/typescript/commonjs/text-field/index.d.ts +14 -1
- package/lib/typescript/commonjs/text-field/index.d.ts.map +1 -1
- package/lib/typescript/module/benefit-list/index.d.ts +6 -0
- package/lib/typescript/module/benefit-list/index.d.ts.map +1 -0
- package/lib/typescript/module/benefit-list/types.d.ts +35 -0
- package/lib/typescript/module/benefit-list/types.d.ts.map +1 -0
- package/lib/typescript/module/connection-dots/ConnectionDots.d.ts +4 -0
- package/lib/typescript/module/connection-dots/ConnectionDots.d.ts.map +1 -0
- package/lib/typescript/module/connection-dots/ConnectionDots.web.d.ts +14 -0
- package/lib/typescript/module/connection-dots/ConnectionDots.web.d.ts.map +1 -0
- package/lib/typescript/module/connection-dots/ConnectionDotsBase.d.ts +18 -0
- package/lib/typescript/module/connection-dots/ConnectionDotsBase.d.ts.map +1 -0
- package/lib/typescript/module/connection-dots/index.d.ts +3 -0
- package/lib/typescript/module/connection-dots/index.d.ts.map +1 -0
- package/lib/typescript/module/connection-dots/index.web.d.ts +3 -0
- package/lib/typescript/module/connection-dots/index.web.d.ts.map +1 -0
- package/lib/typescript/module/connection-dots/types.d.ts +41 -0
- package/lib/typescript/module/connection-dots/types.d.ts.map +1 -0
- package/lib/typescript/module/design-tokens/color-roles.d.ts +102 -0
- package/lib/typescript/module/design-tokens/color-roles.d.ts.map +1 -0
- package/lib/typescript/module/design-tokens/index.d.ts +28 -0
- package/lib/typescript/module/design-tokens/index.d.ts.map +1 -0
- package/lib/typescript/module/design-tokens/scales.d.ts +152 -0
- package/lib/typescript/module/design-tokens/scales.d.ts.map +1 -0
- package/lib/typescript/module/design-tokens/shadows.d.ts +34 -0
- package/lib/typescript/module/design-tokens/shadows.d.ts.map +1 -0
- package/lib/typescript/module/design-tokens/shadows.native.d.ts +19 -0
- package/lib/typescript/module/design-tokens/shadows.native.d.ts.map +1 -0
- package/lib/typescript/module/design-tokens/tailwind-preset.d.ts +59 -0
- package/lib/typescript/module/design-tokens/tailwind-preset.d.ts.map +1 -0
- package/lib/typescript/module/design-tokens/theme-css.d.ts +39 -0
- package/lib/typescript/module/design-tokens/theme-css.d.ts.map +1 -0
- package/lib/typescript/module/index.d.ts +6 -0
- package/lib/typescript/module/index.d.ts.map +1 -1
- package/lib/typescript/module/index.web.d.ts +6 -0
- package/lib/typescript/module/index.web.d.ts.map +1 -1
- package/lib/typescript/module/text-field/index.d.ts +14 -1
- package/lib/typescript/module/text-field/index.d.ts.map +1 -1
- package/package.json +50 -1
- package/src/__tests__/BenefitList.test.tsx +108 -0
- package/src/__tests__/ConnectionDots.test.tsx +86 -0
- package/src/__tests__/TextFieldFloatingLabel.test.tsx +93 -0
- package/src/__tests__/design-tokens.test.ts +169 -0
- package/src/benefit-list/BenefitList.stories.tsx +50 -0
- package/src/benefit-list/index.tsx +133 -0
- package/src/benefit-list/types.ts +36 -0
- package/src/button/Button.web.tsx +1 -1
- package/src/connection-dots/ConnectionDots.stories.tsx +54 -0
- package/src/connection-dots/ConnectionDots.tsx +139 -0
- package/src/connection-dots/ConnectionDots.web.tsx +122 -0
- package/src/connection-dots/ConnectionDotsBase.tsx +62 -0
- package/src/connection-dots/index.ts +2 -0
- package/src/connection-dots/index.web.ts +2 -0
- package/src/connection-dots/types.ts +41 -0
- package/src/design-tokens/color-roles.ts +110 -0
- package/src/design-tokens/index.ts +45 -0
- package/src/design-tokens/scales.ts +134 -0
- package/src/design-tokens/shadows.native.ts +44 -0
- package/src/design-tokens/shadows.ts +42 -0
- package/src/design-tokens/tailwind-preset.ts +139 -0
- package/src/design-tokens/theme-css.ts +99 -0
- package/src/index.ts +33 -0
- package/src/index.web.ts +33 -0
- package/src/text-field/TextField.stories.tsx +46 -0
- package/src/text-field/index.tsx +212 -1
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.BenefitRow = exports.BenefitList = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _useTheme = require("../theme/use-theme.js");
|
|
10
|
+
var _index = require("../styles/index.js");
|
|
11
|
+
var _shadows = require("../design-tokens/shadows");
|
|
12
|
+
var _scales = require("../design-tokens/scales.js");
|
|
13
|
+
var _index2 = require("../typography/index.js");
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
16
|
+
/** Side of the rounded `fill-secondary` icon square. */
|
|
17
|
+
const ICON_SQUARE_SIZE = 36;
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* `BenefitRow` — an icon in a rounded `fill-secondary` square paired with a
|
|
21
|
+
* `text-secondary` caption (the `caption` type role). The building block of
|
|
22
|
+
* {@link BenefitList} (the "icon + caption row" of the consent reference), but
|
|
23
|
+
* usable standalone.
|
|
24
|
+
*
|
|
25
|
+
* Token roles → runtime theme colors:
|
|
26
|
+
* - icon square bg → `fill-secondary` (`--muted`) → `theme.colors.backgroundTertiary`
|
|
27
|
+
* - caption color → `text-secondary` (`--muted-foreground`) → `theme.colors.textSecondary`
|
|
28
|
+
* - caption type → `caption` role (size 11 / line-height 14)
|
|
29
|
+
*/
|
|
30
|
+
const BenefitRowComponent = ({
|
|
31
|
+
icon,
|
|
32
|
+
label,
|
|
33
|
+
children,
|
|
34
|
+
accessibilityLabel,
|
|
35
|
+
className,
|
|
36
|
+
style,
|
|
37
|
+
textStyle
|
|
38
|
+
}) => {
|
|
39
|
+
const theme = (0, _useTheme.useTheme)();
|
|
40
|
+
const content = children ?? label;
|
|
41
|
+
const a11y = accessibilityLabel ?? (typeof content === 'string' ? content : undefined);
|
|
42
|
+
const rowStyle = [_index.atoms.flex_row, _index.atoms.align_center, {
|
|
43
|
+
gap: _scales.SPACING['space-12']
|
|
44
|
+
}, style];
|
|
45
|
+
const squareStyle = {
|
|
46
|
+
width: ICON_SQUARE_SIZE,
|
|
47
|
+
height: ICON_SQUARE_SIZE,
|
|
48
|
+
borderRadius: _scales.RADIUS['radius-12'],
|
|
49
|
+
alignItems: 'center',
|
|
50
|
+
justifyContent: 'center',
|
|
51
|
+
backgroundColor: theme.colors.backgroundTertiary
|
|
52
|
+
};
|
|
53
|
+
const captionStyle = [{
|
|
54
|
+
fontSize: _scales.TYPOGRAPHY.caption.size,
|
|
55
|
+
lineHeight: _scales.TYPOGRAPHY.caption.lineHeight,
|
|
56
|
+
fontWeight: _scales.TYPOGRAPHY.caption.weight,
|
|
57
|
+
color: theme.colors.textSecondary
|
|
58
|
+
}, _index.atoms.flex_1, textStyle];
|
|
59
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
60
|
+
...(className ? {
|
|
61
|
+
className
|
|
62
|
+
} : {}),
|
|
63
|
+
style: rowStyle,
|
|
64
|
+
accessibilityLabel: a11y,
|
|
65
|
+
...(a11y ? {
|
|
66
|
+
accessibilityRole: 'text'
|
|
67
|
+
} : {}),
|
|
68
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
69
|
+
style: squareStyle,
|
|
70
|
+
accessibilityElementsHidden: true,
|
|
71
|
+
"aria-hidden": true,
|
|
72
|
+
children: icon
|
|
73
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
|
|
74
|
+
style: captionStyle,
|
|
75
|
+
children: content
|
|
76
|
+
})]
|
|
77
|
+
});
|
|
78
|
+
};
|
|
79
|
+
const BenefitRow = exports.BenefitRow = /*#__PURE__*/(0, _react.memo)(BenefitRowComponent);
|
|
80
|
+
BenefitRow.displayName = 'BenefitRow';
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* `BenefitList` — a bordered card that stacks {@link BenefitRow}s with consistent
|
|
84
|
+
* spacing. The "3 icon + caption rows in a card" from the consent reference.
|
|
85
|
+
*
|
|
86
|
+
* Token roles → runtime values:
|
|
87
|
+
* - card bg → `fill` role (`--card`) → `theme.colors.card`
|
|
88
|
+
* - hairline → `border-image` role (`--border`) → `theme.colors.border` at
|
|
89
|
+
* the `border-hairline` (0.5px) width
|
|
90
|
+
* - radius → `radius-20`
|
|
91
|
+
* - elevation → `shadow-s` (platform-correct via `bloomShadowStyle`)
|
|
92
|
+
*/
|
|
93
|
+
const BenefitListComponent = ({
|
|
94
|
+
children,
|
|
95
|
+
accessibilityLabel,
|
|
96
|
+
className,
|
|
97
|
+
style
|
|
98
|
+
}) => {
|
|
99
|
+
const theme = (0, _useTheme.useTheme)();
|
|
100
|
+
const cardStyle = [{
|
|
101
|
+
backgroundColor: theme.colors.card,
|
|
102
|
+
borderRadius: _scales.RADIUS['radius-20'],
|
|
103
|
+
borderWidth: _scales.BORDER_WIDTH.hairline,
|
|
104
|
+
borderColor: theme.colors.border,
|
|
105
|
+
padding: _scales.SPACING['space-16'],
|
|
106
|
+
gap: _scales.SPACING['space-16']
|
|
107
|
+
}, (0, _shadows.bloomShadowStyle)('s'), style];
|
|
108
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
109
|
+
...(className ? {
|
|
110
|
+
className
|
|
111
|
+
} : {}),
|
|
112
|
+
style: cardStyle,
|
|
113
|
+
accessibilityLabel: accessibilityLabel,
|
|
114
|
+
children: children
|
|
115
|
+
});
|
|
116
|
+
};
|
|
117
|
+
const BenefitList = exports.BenefitList = /*#__PURE__*/(0, _react.memo)(BenefitListComponent);
|
|
118
|
+
BenefitList.displayName = 'BenefitList';
|
|
119
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_useTheme","_index","_shadows","_scales","_index2","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ICON_SQUARE_SIZE","BenefitRowComponent","icon","label","children","accessibilityLabel","className","style","textStyle","theme","useTheme","content","a11y","undefined","rowStyle","a","flex_row","align_center","gap","SPACING","squareStyle","width","height","borderRadius","RADIUS","alignItems","justifyContent","backgroundColor","colors","backgroundTertiary","captionStyle","fontSize","TYPOGRAPHY","caption","size","lineHeight","fontWeight","weight","color","textSecondary","flex_1","jsxs","View","accessibilityRole","jsx","accessibilityElementsHidden","Text","BenefitRow","exports","memo","displayName","BenefitListComponent","cardStyle","card","borderWidth","BORDER_WIDTH","hairline","borderColor","border","padding","bloomShadowStyle","BenefitList"],"sourceRoot":"../../../src","sources":["benefit-list/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["benefit-list/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ConnectionDots = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
9
|
+
var _useTheme = require("../theme/use-theme.js");
|
|
10
|
+
var _ConnectionDotsBase = require("./ConnectionDotsBase.js");
|
|
11
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
13
|
+
const DEFAULT_DOT_COUNT = 6;
|
|
14
|
+
const DEFAULT_DOT_SIZE = 6;
|
|
15
|
+
const WAVE_DURATION = 1400;
|
|
16
|
+
/** Opacity floor of a dot at the trough of the wave. */
|
|
17
|
+
const DOT_DIM = 0.25;
|
|
18
|
+
/**
|
|
19
|
+
* One dot. Its opacity is the shared driver phase-shifted by `phase`, mapped
|
|
20
|
+
* through a triangle wave so the bright crest sweeps left→right across the row
|
|
21
|
+
* (the "ellipsis shimmer").
|
|
22
|
+
*/
|
|
23
|
+
const ShimmerDot = ({
|
|
24
|
+
phase,
|
|
25
|
+
color,
|
|
26
|
+
size,
|
|
27
|
+
driver
|
|
28
|
+
}) => {
|
|
29
|
+
const opacity = (0, _reactNativeReanimated.useDerivedValue)(() => {
|
|
30
|
+
// wrap into 0..1 then fold into a 0→1→0 triangle so the crest is a moving band
|
|
31
|
+
const t = (driver.value + phase) % 1;
|
|
32
|
+
const wave = 1 - Math.abs(t * 2 - 1);
|
|
33
|
+
return (0, _reactNativeReanimated.interpolate)(wave, [0, 1], [DOT_DIM, 1]);
|
|
34
|
+
});
|
|
35
|
+
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
36
|
+
opacity: opacity.value
|
|
37
|
+
}));
|
|
38
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
39
|
+
style: [{
|
|
40
|
+
width: size,
|
|
41
|
+
height: size,
|
|
42
|
+
borderRadius: size / 2,
|
|
43
|
+
backgroundColor: color
|
|
44
|
+
}, animatedStyle]
|
|
45
|
+
});
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Native `ConnectionDots` — a consent/linking header rendering
|
|
50
|
+
* `left · (animated ellipsis dots) · right`. The dots run a looping opacity wave
|
|
51
|
+
* in the brand color (`fill-brand` → `theme.colors.primary`). Reduced-motion
|
|
52
|
+
* (Reanimated's `useReducedMotion`, or the `reducedMotion` prop) renders the
|
|
53
|
+
* dots static at full opacity.
|
|
54
|
+
*/
|
|
55
|
+
const ConnectionDotsComponent = ({
|
|
56
|
+
left,
|
|
57
|
+
right,
|
|
58
|
+
dotCount = DEFAULT_DOT_COUNT,
|
|
59
|
+
dotSize = DEFAULT_DOT_SIZE,
|
|
60
|
+
accessibilityLabel,
|
|
61
|
+
className,
|
|
62
|
+
style,
|
|
63
|
+
reducedMotion
|
|
64
|
+
}) => {
|
|
65
|
+
const theme = (0, _useTheme.useTheme)();
|
|
66
|
+
const systemReduceMotion = (0, _reactNativeReanimated.useReducedMotion)();
|
|
67
|
+
const reduce = reducedMotion ?? systemReduceMotion;
|
|
68
|
+
const color = theme.colors.primary;
|
|
69
|
+
const driver = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
70
|
+
(0, _react.useEffect)(() => {
|
|
71
|
+
if (reduce) {
|
|
72
|
+
driver.value = 0;
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
driver.value = (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(1, {
|
|
76
|
+
duration: WAVE_DURATION,
|
|
77
|
+
easing: _reactNativeReanimated.Easing.linear
|
|
78
|
+
}), -1, false);
|
|
79
|
+
// driver is a stable shared-value ref; withRepeat/withTiming/Easing are
|
|
80
|
+
// module-level constants from a static import.
|
|
81
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
82
|
+
}, [reduce]);
|
|
83
|
+
const count = Math.max(1, Math.floor(dotCount));
|
|
84
|
+
const dots = reduce ? Array.from({
|
|
85
|
+
length: count
|
|
86
|
+
}, (_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
87
|
+
style: {
|
|
88
|
+
width: dotSize,
|
|
89
|
+
height: dotSize,
|
|
90
|
+
borderRadius: dotSize / 2,
|
|
91
|
+
backgroundColor: color
|
|
92
|
+
}
|
|
93
|
+
}, i)) : Array.from({
|
|
94
|
+
length: count
|
|
95
|
+
}, (_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ShimmerDot, {
|
|
96
|
+
phase: i / count,
|
|
97
|
+
color: color,
|
|
98
|
+
size: dotSize,
|
|
99
|
+
driver: driver
|
|
100
|
+
}, i));
|
|
101
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConnectionDotsBase.ConnectionDotsBase, {
|
|
102
|
+
left: left,
|
|
103
|
+
right: right,
|
|
104
|
+
dots: dots,
|
|
105
|
+
accessibilityLabel: accessibilityLabel,
|
|
106
|
+
className: className,
|
|
107
|
+
style: style
|
|
108
|
+
});
|
|
109
|
+
};
|
|
110
|
+
const ConnectionDots = exports.ConnectionDots = /*#__PURE__*/(0, _react.memo)(ConnectionDotsComponent);
|
|
111
|
+
ConnectionDots.displayName = 'ConnectionDots';
|
|
112
|
+
//# sourceMappingURL=ConnectionDots.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeReanimated","_useTheme","_ConnectionDotsBase","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DEFAULT_DOT_COUNT","DEFAULT_DOT_SIZE","WAVE_DURATION","DOT_DIM","ShimmerDot","phase","color","size","driver","opacity","useDerivedValue","value","wave","Math","abs","interpolate","animatedStyle","useAnimatedStyle","jsx","View","style","width","height","borderRadius","backgroundColor","ConnectionDotsComponent","left","right","dotCount","dotSize","accessibilityLabel","className","reducedMotion","theme","useTheme","systemReduceMotion","useReducedMotion","reduce","colors","primary","useSharedValue","useEffect","withRepeat","withTiming","duration","easing","Easing","linear","count","max","floor","dots","Array","from","length","_","ConnectionDotsBase","ConnectionDots","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["connection-dots/ConnectionDots.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ConnectionDots = exports.BLOOM_CONNECTION_DOTS_CSS = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _useTheme = require("../theme/use-theme.js");
|
|
10
|
+
var _ConnectionDotsBase = require("./ConnectionDotsBase.js");
|
|
11
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
13
|
+
const DEFAULT_DOT_COUNT = 6;
|
|
14
|
+
const DEFAULT_DOT_SIZE = 6;
|
|
15
|
+
const WAVE_DURATION_MS = 1400;
|
|
16
|
+
const KEYFRAMES_ID = 'bloom-connection-dots-keyframes';
|
|
17
|
+
const WAVE_ANIMATION_NAME = 'bloomConnectionDotsWave';
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* CSS keyframes powering the ellipsis shimmer. Mirrors the native Reanimated
|
|
21
|
+
* triangle wave: each dot's opacity rises to 1 and falls back to a dim floor,
|
|
22
|
+
* with a per-dot `animation-delay` sweeping the bright crest left→right.
|
|
23
|
+
*
|
|
24
|
+
* A `prefers-reduced-motion: reduce` media query pins every dot to full opacity,
|
|
25
|
+
* matching the native `useReducedMotion` branch — defence-in-depth alongside the
|
|
26
|
+
* JS `matchMedia` gate below (which also stops emitting the `animation` prop).
|
|
27
|
+
*/
|
|
28
|
+
const BLOOM_CONNECTION_DOTS_CSS = exports.BLOOM_CONNECTION_DOTS_CSS = `
|
|
29
|
+
@keyframes ${WAVE_ANIMATION_NAME} { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
|
|
30
|
+
@media (prefers-reduced-motion: reduce) {
|
|
31
|
+
[data-bloom-connection-dot] { animation: none !important; opacity: 1 !important; }
|
|
32
|
+
}
|
|
33
|
+
`;
|
|
34
|
+
function useKeyframes() {
|
|
35
|
+
(0, _react.useEffect)(() => {
|
|
36
|
+
if (typeof document === 'undefined') return;
|
|
37
|
+
if (document.getElementById(KEYFRAMES_ID)) return;
|
|
38
|
+
const style = document.createElement('style');
|
|
39
|
+
style.id = KEYFRAMES_ID;
|
|
40
|
+
style.textContent = BLOOM_CONNECTION_DOTS_CSS;
|
|
41
|
+
document.head.appendChild(style);
|
|
42
|
+
}, []);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/** Read the OS `prefers-reduced-motion` preference reactively. */
|
|
46
|
+
function usePrefersReducedMotion() {
|
|
47
|
+
const [reduced, setReduced] = (0, _react.useState)(false);
|
|
48
|
+
(0, _react.useEffect)(() => {
|
|
49
|
+
if (typeof window === 'undefined' || !window.matchMedia) return;
|
|
50
|
+
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
51
|
+
setReduced(mq.matches);
|
|
52
|
+
const onChange = e => setReduced(e.matches);
|
|
53
|
+
mq.addEventListener('change', onChange);
|
|
54
|
+
return () => mq.removeEventListener('change', onChange);
|
|
55
|
+
}, []);
|
|
56
|
+
return reduced;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Web fork of `./ConnectionDots`. The native variant runs the opacity wave with
|
|
61
|
+
* `react-native-reanimated`, which cannot ship to a web bundle. This fork drives
|
|
62
|
+
* the same motion with a CSS `@keyframes` animation (injected once into
|
|
63
|
+
* `<head>`) and a per-dot `animation-delay`. Brand color comes from the
|
|
64
|
+
* `fill-brand` role (`theme.colors.primary`). Reduced-motion (the `reducedMotion`
|
|
65
|
+
* prop, the JS `matchMedia` gate, or the CSS media query) renders static dots.
|
|
66
|
+
*/
|
|
67
|
+
const ConnectionDotsComponent = ({
|
|
68
|
+
left,
|
|
69
|
+
right,
|
|
70
|
+
dotCount = DEFAULT_DOT_COUNT,
|
|
71
|
+
dotSize = DEFAULT_DOT_SIZE,
|
|
72
|
+
accessibilityLabel,
|
|
73
|
+
className,
|
|
74
|
+
style,
|
|
75
|
+
reducedMotion
|
|
76
|
+
}) => {
|
|
77
|
+
const theme = (0, _useTheme.useTheme)();
|
|
78
|
+
useKeyframes();
|
|
79
|
+
const systemReduceMotion = usePrefersReducedMotion();
|
|
80
|
+
const reduce = reducedMotion ?? systemReduceMotion;
|
|
81
|
+
const color = theme.colors.primary;
|
|
82
|
+
const count = Math.max(1, Math.floor(dotCount));
|
|
83
|
+
const dots = Array.from({
|
|
84
|
+
length: count
|
|
85
|
+
}, (_, i) => {
|
|
86
|
+
const base = {
|
|
87
|
+
width: dotSize,
|
|
88
|
+
height: dotSize,
|
|
89
|
+
borderRadius: dotSize / 2,
|
|
90
|
+
backgroundColor: color
|
|
91
|
+
};
|
|
92
|
+
const animated = reduce ? {
|
|
93
|
+
opacity: 1
|
|
94
|
+
} : {
|
|
95
|
+
// `animation` / `animationDelay` are real CSS props on web;
|
|
96
|
+
// react-native-web passes them through to the DOM node.
|
|
97
|
+
animation: `${WAVE_ANIMATION_NAME} ${WAVE_DURATION_MS}ms linear infinite`,
|
|
98
|
+
animationDelay: `${i / count * WAVE_DURATION_MS}ms`
|
|
99
|
+
};
|
|
100
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
101
|
+
'data-bloom-connection-dot': '',
|
|
102
|
+
style: [base, animated]
|
|
103
|
+
}, i);
|
|
104
|
+
});
|
|
105
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConnectionDotsBase.ConnectionDotsBase, {
|
|
106
|
+
left: left,
|
|
107
|
+
right: right,
|
|
108
|
+
dots: dots,
|
|
109
|
+
accessibilityLabel: accessibilityLabel,
|
|
110
|
+
className: className,
|
|
111
|
+
style: style
|
|
112
|
+
});
|
|
113
|
+
};
|
|
114
|
+
const ConnectionDots = exports.ConnectionDots = /*#__PURE__*/(0, _react.memo)(ConnectionDotsComponent);
|
|
115
|
+
ConnectionDots.displayName = 'ConnectionDots';
|
|
116
|
+
//# sourceMappingURL=ConnectionDots.web.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_useTheme","_ConnectionDotsBase","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DEFAULT_DOT_COUNT","DEFAULT_DOT_SIZE","WAVE_DURATION_MS","KEYFRAMES_ID","WAVE_ANIMATION_NAME","BLOOM_CONNECTION_DOTS_CSS","exports","useKeyframes","useEffect","document","getElementById","style","createElement","id","textContent","head","appendChild","usePrefersReducedMotion","reduced","setReduced","useState","window","matchMedia","mq","matches","onChange","addEventListener","removeEventListener","ConnectionDotsComponent","left","right","dotCount","dotSize","accessibilityLabel","className","reducedMotion","theme","useTheme","systemReduceMotion","reduce","color","colors","primary","count","Math","max","floor","dots","Array","from","length","_","base","width","height","borderRadius","backgroundColor","animated","opacity","animation","animationDelay","jsx","View","ConnectionDotsBase","ConnectionDots","memo","displayName"],"sourceRoot":"../../../src","sources":["connection-dots/ConnectionDots.web.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AAA0D,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,wBAAAM,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAR,uBAAA,YAAAA,CAAAM,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAG1D,MAAMkB,iBAAiB,GAAG,CAAC;AAC3B,MAAMC,gBAAgB,GAAG,CAAC;AAC1B,MAAMC,gBAAgB,GAAG,IAAI;AAE7B,MAAMC,YAAY,GAAG,iCAAiC;AACtD,MAAMC,mBAAmB,GAAG,yBAAyB;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG;AACzC,aAAaD,mBAAmB;AAChC;AACA;AACA;AACA,CAAC;AAED,SAASG,YAAYA,CAAA,EAAS;EAC5B,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;IACrC,IAAIA,QAAQ,CAACC,cAAc,CAACP,YAAY,CAAC,EAAE;IAC3C,MAAMQ,KAAK,GAAGF,QAAQ,CAACG,aAAa,CAAC,OAAO,CAAC;IAC7CD,KAAK,CAACE,EAAE,GAAGV,YAAY;IACvBQ,KAAK,CAACG,WAAW,GAAGT,yBAAyB;IAC7CI,QAAQ,CAACM,IAAI,CAACC,WAAW,CAACL,KAAK,CAAC;EAClC,CAAC,EAAE,EAAE,CAAC;AACR;;AAEA;AACA,SAASM,uBAAuBA,CAAA,EAAY;EAC1C,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAE7C,IAAAZ,gBAAS,EAAC,MAAM;IACd,IAAI,OAAOa,MAAM,KAAK,WAAW,IAAI,CAACA,MAAM,CAACC,UAAU,EAAE;IACzD,MAAMC,EAAE,GAAGF,MAAM,CAACC,UAAU,CAAC,kCAAkC,CAAC;IAChEH,UAAU,CAACI,EAAE,CAACC,OAAO,CAAC;IACtB,MAAMC,QAAQ,GAAI5C,CAAsB,IAAKsC,UAAU,CAACtC,CAAC,CAAC2C,OAAO,CAAC;IAClED,EAAE,CAACG,gBAAgB,CAAC,QAAQ,EAAED,QAAQ,CAAC;IACvC,OAAO,MAAMF,EAAE,CAACI,mBAAmB,CAAC,QAAQ,EAAEF,QAAQ,CAAC;EACzD,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOP,OAAO;AAChB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMU,uBAAsD,GAAGA,CAAC;EAC9DC,IAAI;EACJC,KAAK;EACLC,QAAQ,GAAG/B,iBAAiB;EAC5BgC,OAAO,GAAG/B,gBAAgB;EAC1BgC,kBAAkB;EAClBC,SAAS;EACTvB,KAAK;EACLwB;AACF,CAAC,KAAK;EACJ,MAAMC,KAAK,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EACxB9B,YAAY,CAAC,CAAC;EACd,MAAM+B,kBAAkB,GAAGrB,uBAAuB,CAAC,CAAC;EACpD,MAAMsB,MAAM,GAAGJ,aAAa,IAAIG,kBAAkB;EAClD,MAAME,KAAK,GAAGJ,KAAK,CAACK,MAAM,CAACC,OAAO;EAElC,MAAMC,KAAK,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,KAAK,CAACf,QAAQ,CAAC,CAAC;EAE/C,MAAMgB,IAAI,GAAGC,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEP;EAAM,CAAC,EAAE,CAACQ,CAAC,EAAE/D,CAAC,KAAK;IACnD,MAAMgE,IAAe,GAAG;MACtBC,KAAK,EAAErB,OAAO;MACdsB,MAAM,EAAEtB,OAAO;MACfuB,YAAY,EAAEvB,OAAO,GAAG,CAAC;MACzBwB,eAAe,EAAEhB;IACnB,CAAC;IACD,MAAMiB,QAAmB,GAAGlB,MAAM,GAC9B;MAAEmB,OAAO,EAAE;IAAE,CAAC,GACb;MACC;MACA;MACAC,SAAS,EAAE,GAAGvD,mBAAmB,IAAIF,gBAAgB,oBAAoB;MACzE0D,cAAc,EAAE,GAAIxE,CAAC,GAAGuD,KAAK,GAAIzC,gBAAgB;IACnD,CAAe;IACnB,oBACE,IAAAtB,WAAA,CAAAiF,GAAA,EAACpF,YAAA,CAAAqF,IAAI;MAGI,2BAA2B,EAAE,EAAE;MACtCnD,KAAK,EAAE,CAACyC,IAAI,EAAEK,QAAQ;IAAE,GAHnBrE,CAIN,CAAC;EAEN,CAAC,CAAC;EAEF,oBACE,IAAAR,WAAA,CAAAiF,GAAA,EAAClF,mBAAA,CAAAoF,kBAAkB;IACjBlC,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbiB,IAAI,EAAEA,IAAK;IACXd,kBAAkB,EAAEA,kBAAmB;IACvCC,SAAS,EAAEA,SAAU;IACrBvB,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC;AAEM,MAAMqD,cAAc,GAAA1D,OAAA,CAAA0D,cAAA,gBAAG,IAAAC,WAAI,EAACrC,uBAAuB,CAAC;AAC3DoC,cAAc,CAACE,WAAW,GAAG,gBAAgB","ignoreList":[]}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ConnectionDotsBase = ConnectionDotsBase;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _index = require("../styles/index.js");
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
+
/**
|
|
13
|
+
* Shared layout + accessibility chrome for {@link ConnectionDots}:
|
|
14
|
+
*
|
|
15
|
+
* leftSlot · (animated ellipsis dots) · rightSlot
|
|
16
|
+
*
|
|
17
|
+
* The dots themselves are supplied by the platform fork (`ConnectionDots.tsx`
|
|
18
|
+
* native / `ConnectionDots.web.tsx` web) because the shimmer animation impl
|
|
19
|
+
* differs (Reanimated vs CSS). This base owns the row layout, the slot wrappers,
|
|
20
|
+
* and the single accessibility label that stands in for the decorative dots.
|
|
21
|
+
*/
|
|
22
|
+
function ConnectionDotsBase({
|
|
23
|
+
left,
|
|
24
|
+
right,
|
|
25
|
+
dots,
|
|
26
|
+
accessibilityLabel = 'Connecting',
|
|
27
|
+
className,
|
|
28
|
+
style
|
|
29
|
+
}) {
|
|
30
|
+
const rowStyle = [_index.atoms.flex_row, _index.atoms.align_center, _index.atoms.justify_center, {
|
|
31
|
+
gap: _index.tokens.space.md
|
|
32
|
+
}, style];
|
|
33
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
34
|
+
...(className ? {
|
|
35
|
+
className
|
|
36
|
+
} : {}),
|
|
37
|
+
style: rowStyle,
|
|
38
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
39
|
+
style: [_index.atoms.align_center, _index.atoms.justify_center],
|
|
40
|
+
children: left
|
|
41
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
42
|
+
accessibilityRole: "image",
|
|
43
|
+
accessibilityLabel: accessibilityLabel,
|
|
44
|
+
"aria-label": accessibilityLabel,
|
|
45
|
+
style: [_index.atoms.flex_row, _index.atoms.align_center, {
|
|
46
|
+
gap: _index.tokens.space.xs
|
|
47
|
+
}],
|
|
48
|
+
children: dots
|
|
49
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
50
|
+
style: [_index.atoms.align_center, _index.atoms.justify_center],
|
|
51
|
+
children: right
|
|
52
|
+
})]
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
//# sourceMappingURL=ConnectionDotsBase.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_index","_jsxRuntime","e","__esModule","default","ConnectionDotsBase","left","right","dots","accessibilityLabel","className","style","rowStyle","a","flex_row","align_center","justify_center","gap","tokens","space","md","jsxs","View","children","jsx","accessibilityRole","xs"],"sourceRoot":"../../../src","sources":["connection-dots/ConnectionDotsBase.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AAA+C,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAY/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,kBAAkBA,CAAC;EACjCC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC,kBAAkB,GAAG,YAAY;EACjCC,SAAS;EACTC;AACuB,CAAC,EAAE;EAC1B,MAAMC,QAA8B,GAAG,CACrCC,YAAC,CAACC,QAAQ,EACVD,YAAC,CAACE,YAAY,EACdF,YAAC,CAACG,cAAc,EAChB;IAAEC,GAAG,EAAEC,aAAM,CAACC,KAAK,CAACC;EAAG,CAAC,EACxBT,KAAK,CACN;EAED,oBACE,IAAAV,WAAA,CAAAoB,IAAA,EAACtB,YAAA,CAAAuB,IAAI;IAAA,IACEZ,SAAS,GAAI;MAAEA;IAAU,CAAC,GAA8B,CAAC,CAAC;IAC/DC,KAAK,EAAEC,QAAS;IAAAW,QAAA,gBAChB,IAAAtB,WAAA,CAAAuB,GAAA,EAACzB,YAAA,CAAAuB,IAAI;MAACX,KAAK,EAAE,CAACE,YAAC,CAACE,YAAY,EAAEF,YAAC,CAACG,cAAc,CAAE;MAAAO,QAAA,EAAEjB;IAAI,CAAO,CAAC,eAK9D,IAAAL,WAAA,CAAAuB,GAAA,EAACzB,YAAA,CAAAuB,IAAI;MACHG,iBAAiB,EAAC,OAAO;MACzBhB,kBAAkB,EAAEA,kBAAmB;MACvC,cAAYA,kBAAmB;MAC/BE,KAAK,EAAE,CAACE,YAAC,CAACC,QAAQ,EAAED,YAAC,CAACE,YAAY,EAAE;QAAEE,GAAG,EAAEC,aAAM,CAACC,KAAK,CAACO;MAAG,CAAC,CAAE;MAAAH,QAAA,EAC7Df;IAAI,CACD,CAAC,eAEP,IAAAP,WAAA,CAAAuB,GAAA,EAACzB,YAAA,CAAAuB,IAAI;MAACX,KAAK,EAAE,CAACE,YAAC,CAACE,YAAY,EAAEF,YAAC,CAACG,cAAc,CAAE;MAAAO,QAAA,EAAEhB;IAAK,CAAO,CAAC;EAAA,CAC3D,CAAC;AAEX","ignoreList":[]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "ConnectionDots", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _ConnectionDots.ConnectionDots;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
var _ConnectionDots = require("./ConnectionDots");
|
|
13
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_ConnectionDots","require"],"sourceRoot":"../../../src","sources":["connection-dots/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA","ignoreList":[]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "ConnectionDots", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _ConnectionDotsWeb.ConnectionDots;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
var _ConnectionDotsWeb = require("./ConnectionDots.web.js");
|
|
13
|
+
//# sourceMappingURL=index.web.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_ConnectionDotsWeb","require"],"sourceRoot":"../../../src","sources":["connection-dots/index.web.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,kBAAA,GAAAC,OAAA","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["connection-dots/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.TEXT_ROLES = exports.FILL_ROLES = exports.BORDER_ROLES = void 0;
|
|
7
|
+
/**
|
|
8
|
+
* Semantic color-role vocabulary for the Oxy Unified Design Language.
|
|
9
|
+
*
|
|
10
|
+
* Every role is an ALIAS onto one of Bloom's existing canonical theme tokens
|
|
11
|
+
* (`--background`, `--surface`, `--primary`, …) — the SINGLE source of resolved
|
|
12
|
+
* color values produced by `getResolvedTokens` and written to the document root
|
|
13
|
+
* (web) / `rootVariables` (native) by `BloomThemeProvider`. No color VALUE is
|
|
14
|
+
* invented here: a role's value is the `var(--canonical)` reference, so it stays
|
|
15
|
+
* driven by the active light/dark mode and color preset automatically.
|
|
16
|
+
*
|
|
17
|
+
* The maps are consumed by the Bloom Tailwind preset (`tailwind-preset.ts`),
|
|
18
|
+
* which slots them into `theme.extend.{backgroundColor,textColor,borderColor}`.
|
|
19
|
+
* Because the values are `var(--x)` strings, the SAME class names resolve on
|
|
20
|
+
* Tailwind (web) and NativeWind (native): web reads the CSS custom property from
|
|
21
|
+
* `document.documentElement`; native reads it from react-native-css's
|
|
22
|
+
* `rootVariables` family — both populated by Bloom from one pipeline.
|
|
23
|
+
*
|
|
24
|
+
* Web CSS-var contract (see Bloom AGENTS.md): base `--x` tokens already resolve
|
|
25
|
+
* to a FULL `rgb(...)` color at runtime, so the role values reference them with
|
|
26
|
+
* `var(--x)` directly — NEVER `hsl(var(--x))`.
|
|
27
|
+
*
|
|
28
|
+
* ADDITIVE: these are NEW utility names (`bg-fill`, `text-text-tertiary`,
|
|
29
|
+
* `border-border-image`, …). They do not touch the existing app-defined color
|
|
30
|
+
* utilities (`bg-background`, `text-muted-foreground`, …), which keep working.
|
|
31
|
+
*/
|
|
32
|
+
|
|
33
|
+
/** A `var(--canonical-token)` reference string. */
|
|
34
|
+
|
|
35
|
+
const ref = token => `var(--${token})`;
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Surface / fill roles → background-color utilities (`bg-<role>`).
|
|
39
|
+
*
|
|
40
|
+
* | role | utility | canonical token | rationale |
|
|
41
|
+
* | ----------------- | ------------------ | ----------------- | ------------------------------------------- |
|
|
42
|
+
* | bg | bg-bg | --background | the page background |
|
|
43
|
+
* | fill | bg-fill | --card | default raised surface (cards/sheets) |
|
|
44
|
+
* | fill-secondary | bg-fill-secondary | --muted | muted/secondary fill |
|
|
45
|
+
* | fill-hover | bg-fill-hover | --accent | hover state of a secondary fill |
|
|
46
|
+
* | fill-brand | bg-fill-brand | --primary | brand-colored fill |
|
|
47
|
+
* | fill-brand-hover | bg-fill-brand-hover| --ring | hover of brand fill (ring == primary hue) |
|
|
48
|
+
* | fill-inverse | bg-fill-inverse | --foreground | inverse (high-contrast) fill |
|
|
49
|
+
* | fill-inverse-hover| bg-fill-inverse-hov| --muted-foreground| hover of inverse fill |
|
|
50
|
+
* | fill-placeholder | bg-fill-placeholder| --muted | disabled/placeholder surface |
|
|
51
|
+
*/
|
|
52
|
+
const FILL_ROLES = exports.FILL_ROLES = {
|
|
53
|
+
bg: ref('background'),
|
|
54
|
+
fill: ref('card'),
|
|
55
|
+
'fill-secondary': ref('muted'),
|
|
56
|
+
'fill-hover': ref('accent'),
|
|
57
|
+
'fill-brand': ref('primary'),
|
|
58
|
+
'fill-brand-hover': ref('ring'),
|
|
59
|
+
'fill-inverse': ref('foreground'),
|
|
60
|
+
'fill-inverse-hover': ref('muted-foreground'),
|
|
61
|
+
'fill-placeholder': ref('muted')
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* Text roles → text-color utilities (`text-<role>`).
|
|
66
|
+
*
|
|
67
|
+
* Tailwind prefixes text-color utilities with `text-`, so a role literally
|
|
68
|
+
* named `text` becomes the utility `text-text`, `text-secondary` → the utility
|
|
69
|
+
* `text-text-secondary`, etc. (matches the namespaced spec).
|
|
70
|
+
*
|
|
71
|
+
* | role | utility | canonical token | rationale |
|
|
72
|
+
* | ---------------- | --------------------- | --------------------- | ---------------------------------- |
|
|
73
|
+
* | text | text-text | --foreground | primary text |
|
|
74
|
+
* | text-secondary | text-text-secondary | --muted-foreground | secondary text |
|
|
75
|
+
* | text-tertiary | text-text-tertiary | --muted-foreground | tertiary/least-emphasis text |
|
|
76
|
+
* | text-inverse | text-text-inverse | --primary-foreground | text on a brand fill |
|
|
77
|
+
* | text-fixed-light | text-text-fixed-light | --primary-foreground | always-light text (on brand) |
|
|
78
|
+
* | text-placeholder | text-text-placeholder | --muted-foreground | placeholder/input hint |
|
|
79
|
+
*/
|
|
80
|
+
const TEXT_ROLES = exports.TEXT_ROLES = {
|
|
81
|
+
text: ref('foreground'),
|
|
82
|
+
'text-secondary': ref('muted-foreground'),
|
|
83
|
+
'text-tertiary': ref('muted-foreground'),
|
|
84
|
+
'text-inverse': ref('primary-foreground'),
|
|
85
|
+
'text-fixed-light': ref('primary-foreground'),
|
|
86
|
+
'text-placeholder': ref('muted-foreground')
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* Border roles → border-color utilities (`border-<role>`).
|
|
91
|
+
*
|
|
92
|
+
* | role | utility | canonical token | rationale |
|
|
93
|
+
* | ------------------ | ----------------------- | --------------- | ------------------------------------------ |
|
|
94
|
+
* | border | border-border | --border | default border |
|
|
95
|
+
* | border-image | border-border-image | --border | hairline border color (0.5px width helper) |
|
|
96
|
+
* | border-secondary | border-border-secondary | --input | secondary/softer border |
|
|
97
|
+
* | border-input | border-border-input | --input | input field border |
|
|
98
|
+
* | border-input-active| border-border-input-active | --ring | focused input border (== primary) |
|
|
99
|
+
*
|
|
100
|
+
* NOTE: the hairline 0.5px WIDTH for `border-image` is shipped as a separate
|
|
101
|
+
* `borderWidth` scale entry (`border-hairline`) in the preset; the color role
|
|
102
|
+
* above only provides the matching color. Consumers compose them:
|
|
103
|
+
* `border-hairline border-border-image`.
|
|
104
|
+
*/
|
|
105
|
+
const BORDER_ROLES = exports.BORDER_ROLES = {
|
|
106
|
+
border: ref('border'),
|
|
107
|
+
'border-image': ref('border'),
|
|
108
|
+
'border-secondary': ref('input'),
|
|
109
|
+
'border-input': ref('input'),
|
|
110
|
+
'border-input-active': ref('ring')
|
|
111
|
+
};
|
|
112
|
+
//# sourceMappingURL=color-roles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["ref","token","FILL_ROLES","exports","bg","fill","TEXT_ROLES","text","BORDER_ROLES","border"],"sourceRoot":"../../../src","sources":["design-tokens/color-roles.ts"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAGA,MAAMA,GAAG,GAAIC,KAAa,IAAe,SAASA,KAAK,GAAG;;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG;EACxBE,EAAE,EAAEJ,GAAG,CAAC,YAAY,CAAC;EACrBK,IAAI,EAAEL,GAAG,CAAC,MAAM,CAAC;EACjB,gBAAgB,EAAEA,GAAG,CAAC,OAAO,CAAC;EAC9B,YAAY,EAAEA,GAAG,CAAC,QAAQ,CAAC;EAC3B,YAAY,EAAEA,GAAG,CAAC,SAAS,CAAC;EAC5B,kBAAkB,EAAEA,GAAG,CAAC,MAAM,CAAC;EAC/B,cAAc,EAAEA,GAAG,CAAC,YAAY,CAAC;EACjC,oBAAoB,EAAEA,GAAG,CAAC,kBAAkB,CAAC;EAC7C,kBAAkB,EAAEA,GAAG,CAAC,OAAO;AACjC,CAAU;;AAEV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,UAAU,GAAAH,OAAA,CAAAG,UAAA,GAAG;EACxBC,IAAI,EAAEP,GAAG,CAAC,YAAY,CAAC;EACvB,gBAAgB,EAAEA,GAAG,CAAC,kBAAkB,CAAC;EACzC,eAAe,EAAEA,GAAG,CAAC,kBAAkB,CAAC;EACxC,cAAc,EAAEA,GAAG,CAAC,oBAAoB,CAAC;EACzC,kBAAkB,EAAEA,GAAG,CAAC,oBAAoB,CAAC;EAC7C,kBAAkB,EAAEA,GAAG,CAAC,kBAAkB;AAC5C,CAAU;;AAEV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMQ,YAAY,GAAAL,OAAA,CAAAK,YAAA,GAAG;EAC1BC,MAAM,EAAET,GAAG,CAAC,QAAQ,CAAC;EACrB,cAAc,EAAEA,GAAG,CAAC,QAAQ,CAAC;EAC7B,kBAAkB,EAAEA,GAAG,CAAC,OAAO,CAAC;EAChC,cAAc,EAAEA,GAAG,CAAC,OAAO,CAAC;EAC5B,qBAAqB,EAAEA,GAAG,CAAC,MAAM;AACnC,CAAU","ignoreList":[]}
|