@dloizides/ui-motion 1.2.0 → 1.2.1
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/CHANGELOG.md +7 -0
- package/dist/{constants-BrJ7VJYu.d.mts → constants-DXSyrmvQ.d.mts} +9 -2
- package/dist/{constants-BrJ7VJYu.d.ts → constants-DXSyrmvQ.d.ts} +9 -2
- package/dist/hairline/native.d.mts +2 -2
- package/dist/hairline/native.d.ts +2 -2
- package/dist/hairline/native.js +62 -30
- package/dist/hairline/native.js.map +1 -1
- package/dist/hairline/native.mjs +63 -32
- package/dist/hairline/native.mjs.map +1 -1
- package/dist/hairline/web.d.mts +2 -2
- package/dist/hairline/web.d.ts +2 -2
- package/dist/hairline/web.js +16 -5
- package/dist/hairline/web.js.map +1 -1
- package/dist/hairline/web.mjs +16 -6
- package/dist/hairline/web.mjs.map +1 -1
- package/package.json +1 -1
package/dist/hairline/web.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { H as HairlineFigureProps } from '../constants-
|
|
3
|
-
export { D as DEFAULT_HAIRLINE_INTENSITY, a as HAIRLINE_ASPECT_RATIO, b as HAIRLINE_TEST_ID, c as HairlineFigureName, d as HairlineVarName, e as HairlineVars, h as hairlineVars } from '../constants-
|
|
2
|
+
import { H as HairlineFigureProps } from '../constants-DXSyrmvQ.mjs';
|
|
3
|
+
export { D as DEFAULT_HAIRLINE_INTENSITY, a as HAIRLINE_ASPECT_RATIO, b as HAIRLINE_TEST_ID, c as HairlineFigureName, d as HairlineVarName, e as HairlineVars, h as hairlineVars } from '../constants-DXSyrmvQ.mjs';
|
|
4
4
|
import '@dloizides/design-tokens';
|
|
5
5
|
|
|
6
6
|
/** Mounts a hairline figure on the host View's DOM node (RN-web); destroyed on unmount. */
|
package/dist/hairline/web.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { H as HairlineFigureProps } from '../constants-
|
|
3
|
-
export { D as DEFAULT_HAIRLINE_INTENSITY, a as HAIRLINE_ASPECT_RATIO, b as HAIRLINE_TEST_ID, c as HairlineFigureName, d as HairlineVarName, e as HairlineVars, h as hairlineVars } from '../constants-
|
|
2
|
+
import { H as HairlineFigureProps } from '../constants-DXSyrmvQ.js';
|
|
3
|
+
export { D as DEFAULT_HAIRLINE_INTENSITY, a as HAIRLINE_ASPECT_RATIO, b as HAIRLINE_TEST_ID, c as HairlineFigureName, d as HairlineVarName, e as HairlineVars, h as hairlineVars } from '../constants-DXSyrmvQ.js';
|
|
4
4
|
import '@dloizides/design-tokens';
|
|
5
5
|
|
|
6
6
|
/** Mounts a hairline figure on the host View's DOM node (RN-web); destroyed on unmount. */
|
package/dist/hairline/web.js
CHANGED
|
@@ -75,13 +75,23 @@ var FIGURE_REGISTRY = {
|
|
|
75
75
|
["vault" /* Vault */]: hairline.vault
|
|
76
76
|
};
|
|
77
77
|
|
|
78
|
+
// src/hairline/HairlineVarName.ts
|
|
79
|
+
var HairlineVarName = /* @__PURE__ */ ((HairlineVarName2) => {
|
|
80
|
+
HairlineVarName2["Plate"] = "--hairline-plate";
|
|
81
|
+
HairlineVarName2["Hi"] = "--hairline-hi";
|
|
82
|
+
HairlineVarName2["Edge"] = "--hairline-edge";
|
|
83
|
+
HairlineVarName2["Mid"] = "--hairline-mid";
|
|
84
|
+
HairlineVarName2["Lo"] = "--hairline-lo";
|
|
85
|
+
return HairlineVarName2;
|
|
86
|
+
})(HairlineVarName || {});
|
|
87
|
+
|
|
78
88
|
// src/hairline/utils/hairlineVars.ts
|
|
79
89
|
var hairlineVars = (colors) => ({
|
|
80
|
-
"--hairline-plate": colors.background,
|
|
81
|
-
"--hairline-hi": colors.text,
|
|
82
|
-
"--hairline-edge": colors.textSecondary,
|
|
83
|
-
"--hairline-mid": colors.textTertiary !== void 0 ? colors.textTertiary : colors.border,
|
|
84
|
-
"--hairline-lo": colors.divider
|
|
90
|
+
["--hairline-plate" /* Plate */]: colors.background,
|
|
91
|
+
["--hairline-hi" /* Hi */]: colors.text,
|
|
92
|
+
["--hairline-edge" /* Edge */]: colors.textSecondary,
|
|
93
|
+
["--hairline-mid" /* Mid */]: colors.textTertiary !== void 0 ? colors.textTertiary : colors.border,
|
|
94
|
+
["--hairline-lo" /* Lo */]: colors.divider
|
|
85
95
|
});
|
|
86
96
|
var styles = reactNative.StyleSheet.create({
|
|
87
97
|
host: { width: "100%", aspectRatio: HAIRLINE_ASPECT_RATIO }
|
|
@@ -126,6 +136,7 @@ exports.HAIRLINE_ASPECT_RATIO = HAIRLINE_ASPECT_RATIO;
|
|
|
126
136
|
exports.HAIRLINE_TEST_ID = HAIRLINE_TEST_ID;
|
|
127
137
|
exports.HairlineFigure = HairlineFigure;
|
|
128
138
|
exports.HairlineFigureName = HairlineFigureName;
|
|
139
|
+
exports.HairlineVarName = HairlineVarName;
|
|
129
140
|
exports.hairlineVars = hairlineVars;
|
|
130
141
|
//# sourceMappingURL=web.js.map
|
|
131
142
|
//# sourceMappingURL=web.js.map
|
package/dist/hairline/web.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hairline/constants.ts","../../src/hairline/HairlineFigureName.ts","../../src/hairline/data/figureRegistry.ts","../../src/hairline/utils/hairlineVars.ts","../../src/hairline/components/HairlineFigure.web.tsx"],"names":["HairlineFigureName","basket","branches","cabinet","dish","drawer","elevator","exploded","keyboard","laptop","lockers","loupe","padlock","patch","phone","phosphor","plot","plug","query","rail","riffle","router","sieve","slow","terminal","terrain","turntable","vault","StyleSheet","useRef","useEffect","View"],"mappings":";;;;;;;;;;AAAO,IAAM,gBAAA,GAAmB;AACzB,IAAM,wBAAwB,CAAA,GAAI;AAClC,IAAM,0BAAA,GAA6B;;;ACFnC,IAAW,kBAAA,qBAAAA,mBAAAA,KAAX;AACL,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,oBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AACR,EAAAA,oBAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AACR,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AACR,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,oBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AACR,EAAAA,oBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AACR,EAAAA,oBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,oBAAA,WAAA,CAAA,GAAY,WAAA;AACZ,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AA3BQ,EAAA,OAAAA,mBAAAA;AAAA,CAAA,EAAA,kBAAA,IAAA,EAAA;;;ACWX,IAAM,eAAA,GAA2D;AAAA,EACtE,yBAA6BC,eAAA;AAAA,EAC7B,6BAA+BC,iBAAA;AAAA,EAC/B,2BAA8BC,gBAAA;AAAA,EAC9B,qBAA2BC,aAAA;AAAA,EAC3B,yBAA6BC,eAAA;AAAA,EAC7B,6BAA+BC,iBAAA;AAAA,EAC/B,6BAA+BC,iBAAA;AAAA,EAC/B,6BAA+BC,iBAAA;AAAA,EAC/B,yBAA6BC,eAAA;AAAA,EAC7B,2BAA8BC,gBAAA;AAAA,EAC9B,uBAA4BC,cAAA;AAAA,EAC5B,2BAA8BC,gBAAA;AAAA,EAC9B,uBAA4BC,cAAA;AAAA,EAC5B,uBAA4BC,cAAA;AAAA,EAC5B,6BAA+BC,iBAAA;AAAA,EAC/B,qBAA2BC,aAAA;AAAA,EAC3B,qBAA2BC,aAAA;AAAA,EAC3B,uBAA4BC,cAAA;AAAA,EAC5B,qBAA2BC,aAAA;AAAA,EAC3B,yBAA6BC,eAAA;AAAA,EAC7B,yBAA6BC,eAAA;AAAA,EAC7B,uBAA4BC,cAAA;AAAA,EAC5B,qBAA2BC,aAAA;AAAA,EAC3B,6BAA+BC,iBAAA;AAAA,EAC/B,2BAA8BC,gBAAA;AAAA,EAC9B,+BAAgCC,kBAAA;AAAA,EAChC,uBAA4BC;AAC9B,CAAA;;;
|
|
1
|
+
{"version":3,"sources":["../../src/hairline/constants.ts","../../src/hairline/HairlineFigureName.ts","../../src/hairline/data/figureRegistry.ts","../../src/hairline/HairlineVarName.ts","../../src/hairline/utils/hairlineVars.ts","../../src/hairline/components/HairlineFigure.web.tsx"],"names":["HairlineFigureName","basket","branches","cabinet","dish","drawer","elevator","exploded","keyboard","laptop","lockers","loupe","padlock","patch","phone","phosphor","plot","plug","query","rail","riffle","router","sieve","slow","terminal","terrain","turntable","vault","HairlineVarName","StyleSheet","useRef","useEffect","View"],"mappings":"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","file":"web.js","sourcesContent":["export const HAIRLINE_TEST_ID = 'motion-hairline-figure';\nexport const HAIRLINE_ASPECT_RATIO = 5 / 4;\nexport const DEFAULT_HAIRLINE_INTENSITY = 0.5;\nexport const HAIRLINE_HANDLE_GLOBAL = '__dloizidesHairline';\n","export const enum HairlineFigureName {\n Basket = 'basket',\n Branches = 'branches',\n Cabinet = 'cabinet',\n Dish = 'dish',\n Drawer = 'drawer',\n Elevator = 'elevator',\n Exploded = 'exploded',\n Keyboard = 'keyboard',\n Laptop = 'laptop',\n Lockers = 'lockers',\n Loupe = 'loupe',\n Padlock = 'padlock',\n Patch = 'patch',\n Phone = 'phone',\n Phosphor = 'phosphor',\n Plot = 'plot',\n Plug = 'plug',\n Query = 'query',\n Rail = 'rail',\n Riffle = 'riffle',\n Router = 'router',\n Sieve = 'sieve',\n Slow = 'slow',\n Terminal = 'terminal',\n Terrain = 'terrain',\n Turntable = 'turntable',\n Vault = 'vault',\n}\n","import {\n basket, branches, cabinet, dish, drawer, elevator, exploded, keyboard, laptop,\n lockers, loupe, padlock, patch, phone, phosphor, plot, plug, query, rail,\n riffle, router, sieve, slow, terminal, terrain, turntable, vault,\n type Figure, type HairlineOptions,\n} from '@lucasmarkes/hairline';\n\nimport { HairlineFigureName } from '../HairlineFigureName';\n\nexport type MountFigure = (el: HTMLElement, options?: HairlineOptions) => Figure;\n\nexport const FIGURE_REGISTRY: Record<HairlineFigureName, MountFigure> = {\n [HairlineFigureName.Basket]: basket,\n [HairlineFigureName.Branches]: branches,\n [HairlineFigureName.Cabinet]: cabinet,\n [HairlineFigureName.Dish]: dish,\n [HairlineFigureName.Drawer]: drawer,\n [HairlineFigureName.Elevator]: elevator,\n [HairlineFigureName.Exploded]: exploded,\n [HairlineFigureName.Keyboard]: keyboard,\n [HairlineFigureName.Laptop]: laptop,\n [HairlineFigureName.Lockers]: lockers,\n [HairlineFigureName.Loupe]: loupe,\n [HairlineFigureName.Padlock]: padlock,\n [HairlineFigureName.Patch]: patch,\n [HairlineFigureName.Phone]: phone,\n [HairlineFigureName.Phosphor]: phosphor,\n [HairlineFigureName.Plot]: plot,\n [HairlineFigureName.Plug]: plug,\n [HairlineFigureName.Query]: query,\n [HairlineFigureName.Rail]: rail,\n [HairlineFigureName.Riffle]: riffle,\n [HairlineFigureName.Router]: router,\n [HairlineFigureName.Sieve]: sieve,\n [HairlineFigureName.Slow]: slow,\n [HairlineFigureName.Terminal]: terminal,\n [HairlineFigureName.Terrain]: terrain,\n [HairlineFigureName.Turntable]: turntable,\n [HairlineFigureName.Vault]: vault,\n};\n","export const enum HairlineVarName {\n Plate = '--hairline-plate',\n Hi = '--hairline-hi',\n Edge = '--hairline-edge',\n Mid = '--hairline-mid',\n Lo = '--hairline-lo',\n}\n","import type { ModeColors } from '@dloizides/design-tokens';\n\nimport { HairlineVarName } from '../HairlineVarName';\nimport type { HairlineVars } from '../types';\n\n/** Maps one theme mode's colour tokens onto the hairline palette vars (stroke width stays upstream). */\nexport const hairlineVars = (colors: ModeColors): HairlineVars => ({\n [HairlineVarName.Plate]: colors.background,\n [HairlineVarName.Hi]: colors.text,\n [HairlineVarName.Edge]: colors.textSecondary,\n [HairlineVarName.Mid]: colors.textTertiary !== undefined ? colors.textTertiary : colors.border,\n [HairlineVarName.Lo]: colors.divider,\n});\n","import React, { useEffect, useRef } from 'react';\n\nimport { StyleSheet, View } from 'react-native';\n\nimport type { Figure } from '@lucasmarkes/hairline';\n\nimport { DEFAULT_HAIRLINE_INTENSITY, HAIRLINE_ASPECT_RATIO, HAIRLINE_TEST_ID } from '../constants';\nimport { FIGURE_REGISTRY } from '../data/figureRegistry';\nimport type { HairlineFigureProps } from '../types';\nimport { hairlineVars } from '../utils/hairlineVars';\n\nconst styles = StyleSheet.create({\n host: { width: '100%', aspectRatio: HAIRLINE_ASPECT_RATIO },\n});\n\nconst toElement = (view: View | null): HTMLElement | null => view as unknown as HTMLElement | null;\n\n/** Mounts a hairline figure on the host View's DOM node (RN-web); destroyed on unmount. */\nexport const HairlineFigure = ({\n figure,\n colors,\n intensity = DEFAULT_HAIRLINE_INTENSITY,\n label,\n testID = HAIRLINE_TEST_ID,\n}: HairlineFigureProps): React.ReactElement => {\n const hostRef = useRef<View>(null);\n const figureRef = useRef<Figure | null>(null);\n const optionsRef = useRef({ intensity, label });\n optionsRef.current = { intensity, label };\n\n useEffect(() => {\n const el = toElement(hostRef.current);\n if (el === null) return undefined;\n const vars = Object.entries(hairlineVars(colors));\n vars.forEach(([name, value]) => el.style.setProperty(name, value));\n return () => vars.forEach(([name]) => el.style.removeProperty(name));\n }, [colors]);\n\n useEffect(() => {\n const el = toElement(hostRef.current);\n if (el === null) return undefined;\n const mounted = FIGURE_REGISTRY[figure](el, optionsRef.current);\n figureRef.current = mounted;\n return () => {\n mounted.destroy();\n figureRef.current = null;\n };\n }, [figure]);\n\n useEffect(() => {\n figureRef.current?.update({ intensity, label });\n }, [intensity, label]);\n\n return <View ref={hostRef} style={styles.host} testID={testID} />;\n};\n"]}
|
package/dist/hairline/web.mjs
CHANGED
|
@@ -73,13 +73,23 @@ var FIGURE_REGISTRY = {
|
|
|
73
73
|
["vault" /* Vault */]: vault
|
|
74
74
|
};
|
|
75
75
|
|
|
76
|
+
// src/hairline/HairlineVarName.ts
|
|
77
|
+
var HairlineVarName = /* @__PURE__ */ ((HairlineVarName2) => {
|
|
78
|
+
HairlineVarName2["Plate"] = "--hairline-plate";
|
|
79
|
+
HairlineVarName2["Hi"] = "--hairline-hi";
|
|
80
|
+
HairlineVarName2["Edge"] = "--hairline-edge";
|
|
81
|
+
HairlineVarName2["Mid"] = "--hairline-mid";
|
|
82
|
+
HairlineVarName2["Lo"] = "--hairline-lo";
|
|
83
|
+
return HairlineVarName2;
|
|
84
|
+
})(HairlineVarName || {});
|
|
85
|
+
|
|
76
86
|
// src/hairline/utils/hairlineVars.ts
|
|
77
87
|
var hairlineVars = (colors) => ({
|
|
78
|
-
"--hairline-plate": colors.background,
|
|
79
|
-
"--hairline-hi": colors.text,
|
|
80
|
-
"--hairline-edge": colors.textSecondary,
|
|
81
|
-
"--hairline-mid": colors.textTertiary !== void 0 ? colors.textTertiary : colors.border,
|
|
82
|
-
"--hairline-lo": colors.divider
|
|
88
|
+
["--hairline-plate" /* Plate */]: colors.background,
|
|
89
|
+
["--hairline-hi" /* Hi */]: colors.text,
|
|
90
|
+
["--hairline-edge" /* Edge */]: colors.textSecondary,
|
|
91
|
+
["--hairline-mid" /* Mid */]: colors.textTertiary !== void 0 ? colors.textTertiary : colors.border,
|
|
92
|
+
["--hairline-lo" /* Lo */]: colors.divider
|
|
83
93
|
});
|
|
84
94
|
var styles = StyleSheet.create({
|
|
85
95
|
host: { width: "100%", aspectRatio: HAIRLINE_ASPECT_RATIO }
|
|
@@ -119,6 +129,6 @@ var HairlineFigure = ({
|
|
|
119
129
|
return /* @__PURE__ */ jsx(View, { ref: hostRef, style: styles.host, testID });
|
|
120
130
|
};
|
|
121
131
|
|
|
122
|
-
export { DEFAULT_HAIRLINE_INTENSITY, HAIRLINE_ASPECT_RATIO, HAIRLINE_TEST_ID, HairlineFigure, HairlineFigureName, hairlineVars };
|
|
132
|
+
export { DEFAULT_HAIRLINE_INTENSITY, HAIRLINE_ASPECT_RATIO, HAIRLINE_TEST_ID, HairlineFigure, HairlineFigureName, HairlineVarName, hairlineVars };
|
|
123
133
|
//# sourceMappingURL=web.mjs.map
|
|
124
134
|
//# sourceMappingURL=web.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hairline/constants.ts","../../src/hairline/HairlineFigureName.ts","../../src/hairline/data/figureRegistry.ts","../../src/hairline/utils/hairlineVars.ts","../../src/hairline/components/HairlineFigure.web.tsx"],"names":["HairlineFigureName"],"mappings":";;;;;;;;AAAO,IAAM,gBAAA,GAAmB;AACzB,IAAM,wBAAwB,CAAA,GAAI;AAClC,IAAM,0BAAA,GAA6B;;;ACFnC,IAAW,kBAAA,qBAAAA,mBAAAA,KAAX;AACL,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,oBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AACR,EAAAA,oBAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AACR,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AACR,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,oBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AACR,EAAAA,oBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AACR,EAAAA,oBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,oBAAA,WAAA,CAAA,GAAY,WAAA;AACZ,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AA3BQ,EAAA,OAAAA,mBAAAA;AAAA,CAAA,EAAA,kBAAA,IAAA,EAAA;;;ACWX,IAAM,eAAA,GAA2D;AAAA,EACtE,yBAA6B,MAAA;AAAA,EAC7B,6BAA+B,QAAA;AAAA,EAC/B,2BAA8B,OAAA;AAAA,EAC9B,qBAA2B,IAAA;AAAA,EAC3B,yBAA6B,MAAA;AAAA,EAC7B,6BAA+B,QAAA;AAAA,EAC/B,6BAA+B,QAAA;AAAA,EAC/B,6BAA+B,QAAA;AAAA,EAC/B,yBAA6B,MAAA;AAAA,EAC7B,2BAA8B,OAAA;AAAA,EAC9B,uBAA4B,KAAA;AAAA,EAC5B,2BAA8B,OAAA;AAAA,EAC9B,uBAA4B,KAAA;AAAA,EAC5B,uBAA4B,KAAA;AAAA,EAC5B,6BAA+B,QAAA;AAAA,EAC/B,qBAA2B,IAAA;AAAA,EAC3B,qBAA2B,IAAA;AAAA,EAC3B,uBAA4B,KAAA;AAAA,EAC5B,qBAA2B,IAAA;AAAA,EAC3B,yBAA6B,MAAA;AAAA,EAC7B,yBAA6B,MAAA;AAAA,EAC7B,uBAA4B,KAAA;AAAA,EAC5B,qBAA2B,IAAA;AAAA,EAC3B,6BAA+B,QAAA;AAAA,EAC/B,2BAA8B,OAAA;AAAA,EAC9B,+BAAgC,SAAA;AAAA,EAChC,uBAA4B;AAC9B,CAAA;;;
|
|
1
|
+
{"version":3,"sources":["../../src/hairline/constants.ts","../../src/hairline/HairlineFigureName.ts","../../src/hairline/data/figureRegistry.ts","../../src/hairline/HairlineVarName.ts","../../src/hairline/utils/hairlineVars.ts","../../src/hairline/components/HairlineFigure.web.tsx"],"names":["HairlineFigureName","HairlineVarName"],"mappings":"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","file":"web.mjs","sourcesContent":["export const HAIRLINE_TEST_ID = 'motion-hairline-figure';\nexport const HAIRLINE_ASPECT_RATIO = 5 / 4;\nexport const DEFAULT_HAIRLINE_INTENSITY = 0.5;\nexport const HAIRLINE_HANDLE_GLOBAL = '__dloizidesHairline';\n","export const enum HairlineFigureName {\n Basket = 'basket',\n Branches = 'branches',\n Cabinet = 'cabinet',\n Dish = 'dish',\n Drawer = 'drawer',\n Elevator = 'elevator',\n Exploded = 'exploded',\n Keyboard = 'keyboard',\n Laptop = 'laptop',\n Lockers = 'lockers',\n Loupe = 'loupe',\n Padlock = 'padlock',\n Patch = 'patch',\n Phone = 'phone',\n Phosphor = 'phosphor',\n Plot = 'plot',\n Plug = 'plug',\n Query = 'query',\n Rail = 'rail',\n Riffle = 'riffle',\n Router = 'router',\n Sieve = 'sieve',\n Slow = 'slow',\n Terminal = 'terminal',\n Terrain = 'terrain',\n Turntable = 'turntable',\n Vault = 'vault',\n}\n","import {\n basket, branches, cabinet, dish, drawer, elevator, exploded, keyboard, laptop,\n lockers, loupe, padlock, patch, phone, phosphor, plot, plug, query, rail,\n riffle, router, sieve, slow, terminal, terrain, turntable, vault,\n type Figure, type HairlineOptions,\n} from '@lucasmarkes/hairline';\n\nimport { HairlineFigureName } from '../HairlineFigureName';\n\nexport type MountFigure = (el: HTMLElement, options?: HairlineOptions) => Figure;\n\nexport const FIGURE_REGISTRY: Record<HairlineFigureName, MountFigure> = {\n [HairlineFigureName.Basket]: basket,\n [HairlineFigureName.Branches]: branches,\n [HairlineFigureName.Cabinet]: cabinet,\n [HairlineFigureName.Dish]: dish,\n [HairlineFigureName.Drawer]: drawer,\n [HairlineFigureName.Elevator]: elevator,\n [HairlineFigureName.Exploded]: exploded,\n [HairlineFigureName.Keyboard]: keyboard,\n [HairlineFigureName.Laptop]: laptop,\n [HairlineFigureName.Lockers]: lockers,\n [HairlineFigureName.Loupe]: loupe,\n [HairlineFigureName.Padlock]: padlock,\n [HairlineFigureName.Patch]: patch,\n [HairlineFigureName.Phone]: phone,\n [HairlineFigureName.Phosphor]: phosphor,\n [HairlineFigureName.Plot]: plot,\n [HairlineFigureName.Plug]: plug,\n [HairlineFigureName.Query]: query,\n [HairlineFigureName.Rail]: rail,\n [HairlineFigureName.Riffle]: riffle,\n [HairlineFigureName.Router]: router,\n [HairlineFigureName.Sieve]: sieve,\n [HairlineFigureName.Slow]: slow,\n [HairlineFigureName.Terminal]: terminal,\n [HairlineFigureName.Terrain]: terrain,\n [HairlineFigureName.Turntable]: turntable,\n [HairlineFigureName.Vault]: vault,\n};\n","export const enum HairlineVarName {\n Plate = '--hairline-plate',\n Hi = '--hairline-hi',\n Edge = '--hairline-edge',\n Mid = '--hairline-mid',\n Lo = '--hairline-lo',\n}\n","import type { ModeColors } from '@dloizides/design-tokens';\n\nimport { HairlineVarName } from '../HairlineVarName';\nimport type { HairlineVars } from '../types';\n\n/** Maps one theme mode's colour tokens onto the hairline palette vars (stroke width stays upstream). */\nexport const hairlineVars = (colors: ModeColors): HairlineVars => ({\n [HairlineVarName.Plate]: colors.background,\n [HairlineVarName.Hi]: colors.text,\n [HairlineVarName.Edge]: colors.textSecondary,\n [HairlineVarName.Mid]: colors.textTertiary !== undefined ? colors.textTertiary : colors.border,\n [HairlineVarName.Lo]: colors.divider,\n});\n","import React, { useEffect, useRef } from 'react';\n\nimport { StyleSheet, View } from 'react-native';\n\nimport type { Figure } from '@lucasmarkes/hairline';\n\nimport { DEFAULT_HAIRLINE_INTENSITY, HAIRLINE_ASPECT_RATIO, HAIRLINE_TEST_ID } from '../constants';\nimport { FIGURE_REGISTRY } from '../data/figureRegistry';\nimport type { HairlineFigureProps } from '../types';\nimport { hairlineVars } from '../utils/hairlineVars';\n\nconst styles = StyleSheet.create({\n host: { width: '100%', aspectRatio: HAIRLINE_ASPECT_RATIO },\n});\n\nconst toElement = (view: View | null): HTMLElement | null => view as unknown as HTMLElement | null;\n\n/** Mounts a hairline figure on the host View's DOM node (RN-web); destroyed on unmount. */\nexport const HairlineFigure = ({\n figure,\n colors,\n intensity = DEFAULT_HAIRLINE_INTENSITY,\n label,\n testID = HAIRLINE_TEST_ID,\n}: HairlineFigureProps): React.ReactElement => {\n const hostRef = useRef<View>(null);\n const figureRef = useRef<Figure | null>(null);\n const optionsRef = useRef({ intensity, label });\n optionsRef.current = { intensity, label };\n\n useEffect(() => {\n const el = toElement(hostRef.current);\n if (el === null) return undefined;\n const vars = Object.entries(hairlineVars(colors));\n vars.forEach(([name, value]) => el.style.setProperty(name, value));\n return () => vars.forEach(([name]) => el.style.removeProperty(name));\n }, [colors]);\n\n useEffect(() => {\n const el = toElement(hostRef.current);\n if (el === null) return undefined;\n const mounted = FIGURE_REGISTRY[figure](el, optionsRef.current);\n figureRef.current = mounted;\n return () => {\n mounted.destroy();\n figureRef.current = null;\n };\n }, [figure]);\n\n useEffect(() => {\n figureRef.current?.update({ intensity, label });\n }, [intensity, label]);\n\n return <View ref={hostRef} style={styles.host} testID={testID} />;\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dloizides/ui-motion",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "Themable, brand-agnostic React Native (RN-web) motion primitives — useEnterExit, FadeIn, Collapse, PressableScale, Skeleton — built on RN Animated, driven by @dloizides/design-tokens motion tokens, and gated on @dloizides/rn-web-hooks useReducedMotion (every animation collapses to instant under reduced-motion). Part of the dloizides.com shared UI kit.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|